pms-app/pages/inventory/search/index.vue

<template>
  <view class="page">
    <view class="form-content">
      <uni-forms :model-value="form" labelWidth="140px">
        <!-- 选择工厂 -->

        <uni-forms-item class="form-item" :label="$t('inventory.search.factory')">
          <uni-data-picker
              v-model="form.factoryId"
              :popup-title="$t('inventory.search.factory')"
              :localdata="factoryList"
              :map="{ text: 'factoryName', value: 'id' }"
          />
        </uni-forms-item>

        <!-- 选择库存地点 -->
        <!-- <uni-forms-item class="form-item" :label="$t('inventory.search.storageLocation')">
          <uni-data-picker
              v-model="form.storageLocationId"
              :popup-title="$t('inventory.search.storageLocation')"
              :localdata="storageLocationList"
              :map="{ text: 'storageLocationName', value: 'id' }"
          />
        </uni-forms-item> -->

        <!-- 选择成本中心 -->
        <uni-forms-item class="form-item" :label="$t('inventory.search.costCenter')">
          <uni-data-picker
            v-model="form.costCenterId"
            :popup-title="$t('inventory.search.costCenter')"
            :localdata="costCenterList"
            :map="{ text: 'costCenterName', value: 'id' }"
          />
        </uni-forms-item>

        <!-- 填写物料编码 -->
        <uni-forms-item class="form-item" :label="$t('inventory.search.materialCode')">
          <uni-easyinput
              v-model="form.materialCode"
              :inputBorder="false"
              :clearable="false"
              :styles="{ disableColor: '#fff' }"
              :placeholder="$t('inventory.search.materialCodeHint')"
              style="text-align: right"
          />
        </uni-forms-item>

        <!-- 填写物料名称 -->
        <uni-forms-item class="form-item" :label="$t('inventory.search.materialName')">
          <uni-easyinput
              v-model="form.materialName"
              :inputBorder="false"
              :clearable="false"
              :styles="{ disableColor: '#fff' }"
              :placeholder="$t('inventory.search.materialNameHint')"
              style="text-align: right"
          />
        </uni-forms-item>

        <!-- 选择入库时间 -->
        <uni-forms-item class="form-item" :label="$t('inventory.search.storageTime')">
          <uni-datetime-picker
            v-model="form.storageTime"
            type="daterange"
            return-type="string"
            start-placeholder=" "
            :end-placeholder="$t('inventory.search.storageTimeHint')"
            :range-separator="!form.storageTime || !form.storageTime[0] ? '' : '-'"
            :class="!form.storageTime || !form.storageTime[0] ? 'time-hint-color' : undefined"
            :border="false"
          />
        </uni-forms-item>
      </uni-forms>
      <uni-row style="margin-top: 20px" :gutter="20">
        <uni-col :span="12">
          <button type="primary" @click="reset">{{ $t('inventory.search.reset') }}</button>
        </uni-col>
        <uni-col :span="12">
          <button type="primary" @click="confirm">{{ $t('operation.search') }}</button>
        </uni-col>
      </uni-row>
    </view>
  </view>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { filteredSimpleSapOrgList } from "@/api"

const form = reactive({
  factoryId: undefined,
  costCenterId: undefined,
  materialCode: undefined,
  materialName: undefined,
  storageTime: undefined,
})

const reset = () => {
  form.factoryId = undefined
  form.costCenterId = undefined
  form.materialCode = undefined
  form.materialName = undefined
  form.storageTime = undefined
  uni.$emit('search', {})
  uni.navigateBack()
}
const confirm = async () => {
  if (form.storageTime && form.storageTime[0]) {
    form.storageTime[0] = form.storageTime[0] + ' 00:00:00'
    form.storageTime[1] = form.storageTime[1] + ' 23:59:59'
  }
  // 去掉空值和无用的参数
  const params = {}
  Object.entries(form).forEach(([key, value]) => {
    if (Number.isNaN(Number.parseInt(key)) && value) {
      params[key] = value
    }
  })
  uni.$emit('search', params)
  uni.navigateBack()
}

const factoryList = ref([])
const costCenterList = ref([])
onLoad(async (options) => {
  // 获取工厂、成本中心列表
  const getFactoryList = filteredSimpleSapOrgList(1)
  const getCostCenterList = filteredSimpleSapOrgList(2)

  factoryList.value = (await getFactoryList).data
  costCenterList.value = (await getCostCenterList).data

  if (options.params) {
    Object.assign(form, JSON.parse(options.params))
  }
})
</script>

<style lang="scss" scoped>
@import "@/style/choose-device.scss";
@import "@/style/work-order-detail.scss";

.segmented-control {
  margin-bottom: 15px;
}

.button-group {
  margin-top: 15px;
  display: flex;
  justify-content: space-around;
}

.button {
  display: flex;
  align-items: center;
  height: 35px;
  line-height: 35px;
  margin-left: 10px;
}

:deep(.input-value-border) {
  border: 0 !important;
}

:deep(.input-value) {
  text-align: end;
}

:deep(.selected-list) {
  display: block;
}

:deep(.selected-area) {
  display: block;
  margin-right: 5px;
}

:deep(.uni-data-pickerview .selected-area) {
  display: none;
}

:deep(.tab-c) {
  margin-left: 30px;
  margin-right: 30px;
  border-top: 1px dashed #CACCCF;

  .item {
    border-bottom: 1px dashed #CACCCF;
  }
}

:deep(.uni-forms-item) {
  margin-bottom: 0;
}

.popup-content {
  height: 500px;
}

.device-item {
  height: 35px;
  line-height: 35px;
  padding: 0 30px;
  font-size: 13px;
  color: #333333;
  border-bottom: 1px #CACCCF;
}

.selected {
  color: #004098;
}

.divider {
  height: 0.5px;
  margin: 0 28px;
  background-color: #CACCCF;
}

.time-hint-color {
  color: #999999;
}

.submit-btn {
  width: 100%;
  height: 48px;
  border-radius: 0;
}
</style>