完善物料监控功能迁移

src/views/planning-production/production-monitoring/material-monitoring/index.vue

@@ -28,7 +28,7 @@
               clearable
               filterable
               style="width:200px"
-              @focus="loadBatchOptions"
+              @focus="loadProcessOptions"
             >
               <el-option
                 v-for="item in processOptions"
@@ -82,14 +82,28 @@
       </template>
     </page-table>
 
-    <el-dialog :title="$t(key('input_semi_product_data'))" :visible.sync="dialogVisible" width="520px">
+    <page-dialog-form
-      <el-form ref="form" :model="form" :rules="rules" label-width="130px" size="mini">
+      ref="dialogForm"
+      :visible.sync="dialogVisible"
+      :title="key('input_semi_product_data')"
+      width="520px"
+      :form-cols="[]"
+      :form-data="form"
+      :rules="rules"
+      label-width="130px"
+      :submitting="submitting"
+      :confirm-text="key('confirm')"
+      :cancel-text="key('cancel')"
+      @submit="submitForm"
+      @close="onDialogClose"
+    >
       <el-form-item :label="$t(key('batch_id'))" prop="batch_id">
         <el-select
           v-model="form.batch_id"
           :placeholder="$t(key('select_batch_id'))"
           clearable
           filterable
+          size="mini"
           style="width:100%"
           @focus="loadBatchOptions"
           @change="onBatchChange"
@@ -108,6 +122,7 @@
           :placeholder="$t(key('select_workingsubclass'))"
           clearable
           filterable
+          size="mini"
           style="width:100%"
           :disabled="!form.batch_id"
         >
@@ -125,6 +140,7 @@
           :placeholder="$t(key('select_device_code'))"
           clearable
           filterable
+          size="mini"
           style="width:100%"
           @focus="loadDeviceOptions"
         >
@@ -137,39 +153,36 @@
         </el-select>
       </el-form-item>
       <el-form-item :label="$t(key('output_quantity'))" prop="item_quantity">
-          <el-input-number v-model="form.item_quantity" :min="1" style="width:100%" />
+        <el-input-number v-model="form.item_quantity" :min="1" size="mini" style="width:100%" />
       </el-form-item>
       <el-form-item :label="$t(key('output_date'))" prop="start_time">
         <el-date-picker
           v-model="form.start_time"
           type="date"
           value-format="yyyy-MM-dd"
+          size="mini"
           style="width:100%"
           :placeholder="$t(key('output_date'))"
         />
       </el-form-item>
-      </el-form>
+    </page-dialog-form>
-      <span slot="footer">
-        <el-button size="mini" @click="dialogVisible = false">{{ $t(key('cancel')) }}</el-button>
-        <el-button size="mini" type="primary" :loading="submitting" @click="submitForm">
-          {{ $t(key('confirm')) }}
-        </el-button>
-      </span>
-    </el-dialog>
   </d2-container>
 </template>
 
 <script>
 import { useTableColumns } from '@/composables/useTableColumns'
+import useTableButtons from '@/composables/useTableButtons'
 import { i18nMixin } from '@/composables/useI18n'
 import PageTable from '@/components/page-table'
+import PageDialogForm from '@/components/page-dialog-form'
 import { getBatchAll } from '@/api/planning-production/batch-list'
 import { getDeviceAll } from '@/api/planning-production/equipment-monitoring'
 import { createWipData, getWipDataList } from '@/api/planning-production/material-monitoring'
+import { getWorkingsubclassAll } from '@/api/production-master-data/process-step'
 
 export default {
   name: 'planning-production-material-monitoring',
-  components: { PageTable },
+  components: { PageTable, PageDialogForm },
   mixins: [i18nMixin('page.planning_production.production_monitoring.material_monitoring')],
   data () {
     return {
@@ -196,7 +209,8 @@ export default {
         start_time: ''
       },
       batchOptions: [],
-      deviceOptions: []
+      deviceOptions: [],
+      processOptions: []
     }
   },
   computed: {
@@ -216,23 +230,26 @@ export default {
       })
     },
     toolbarButtons () {
-      return [
+      return useTableButtons({
+        toolbar: [
           {
             key: 'create',
             label: this.key('input_semi_product_data'),
             type: 'primary',
             icon: 'el-icon-plus',
             size: 'mini',
+            auth: '/planning_production/production_batch_management/batch/create',
             onClick: this.openDialog
           }
         ]
+      }, this.$permission).toolbarButtons
     },
     rules () {
       return {
-        batch_id: [{ required: true, message: this.$t(this.key('select_batch_id')), trigger: 'change' }],
+        batch_id: [{ required: true, message: this.key('select_batch_id'), trigger: 'change' }],
-        process_code: [{ required: true, message: this.$t(this.key('select_workingsubclass')), trigger: 'change' }],
+        process_code: [{ required: true, message: this.key('select_workingsubclass'), trigger: 'change' }],
-        device_code: [{ required: true, message: this.$t(this.key('select_device_code')), trigger: 'change' }],
+        device_code: [{ required: true, message: this.key('select_device_code'), trigger: 'change' }],
-        item_quantity: [{ required: true, message: this.$t(this.key('enter_output_quantity')), trigger: 'blur' }]
+        item_quantity: [{ required: true, message: this.key('enter_output_quantity'), trigger: 'change' }]
       }
     },
     selectedBatch () {
@@ -240,25 +257,36 @@ export default {
     },
     selectedBatchProcesses () {
       return Array.isArray(this.selectedBatch.process) ? this.selectedBatch.process : []
-    },
-    processOptions () {
-      const map = new Map()
-      this.batchOptions.forEach(batch => {
-        const processes = Array.isArray(batch.process) ? batch.process : []
-        processes.forEach(item => {
-          const value = item.code || item.name
-          if (value && !map.has(value)) map.set(value, item)
-        })
-      })
-      return Array.from(map.values())
     }
   },
   created () {
     this.fetchData()
   },
   methods: {
-    responseData (res) {
+    normalizePayload (res) {
-      return res && res.data ? res.data : (res || {})
+      if (res && res.code !== undefined && res.data !== undefined) return res.data
+      return res || {}
+    },
+    normalizeList (res) {
+      const payload = this.normalizePayload(res)
+      if (Array.isArray(payload)) return payload
+      if (Array.isArray(payload.data)) return payload.data
+      if (payload.data && Array.isArray(payload.data.data)) return payload.data.data
+      return []
+    },
+    normalizePage (res) {
+      const payload = this.normalizePayload(res)
+      if (Array.isArray(payload)) return { data: payload, count: payload.length }
+      if (payload.data && !Array.isArray(payload.data)) {
+        return {
+          data: Array.isArray(payload.data.data) ? payload.data.data : [],
+          count: Number(payload.data.count || 0)
+        }
+      }
+      return {
+        data: Array.isArray(payload.data) ? payload.data : [],
+        count: Number(payload.count || 0)
+      }
     },
     searchParams () {
       const params = {
@@ -280,9 +308,9 @@ export default {
           page_no: this.pagination.current,
           page_size: this.pagination.size
         })
-        const payload = this.responseData(res)
+        const payload = this.normalizePage(res)
-        this.tableData = Array.isArray(payload.data) ? payload.data : []
+        this.tableData = payload.data
-        this.pagination.total = Number(payload.count || 0)
+        this.pagination.total = payload.count
       } finally {
         this.loading = false
       }
@@ -314,7 +342,7 @@ export default {
         start_time: ''
       }
       this.$nextTick(() => {
-        if (this.$refs.form) this.$refs.form.clearValidate()
+        if (this.$refs.dialogForm) this.$refs.dialogForm.reset()
       })
       this.loadBatchOptions()
       this.loadDeviceOptions()
@@ -322,21 +350,25 @@ export default {
     async loadBatchOptions () {
       if (this.batchOptions.length) return
       const res = await getBatchAll({})
-      const data = Array.isArray(res) ? res : (res && res.data) || []
+      this.batchOptions = this.normalizeList(res)
-      this.batchOptions = Array.isArray(data) ? data : []
     },
     async loadDeviceOptions () {
       if (this.deviceOptions.length) return
       const res = await getDeviceAll({})
-      const payload = this.responseData(res)
+      this.deviceOptions = this.normalizeList(res)
-      this.deviceOptions = Array.isArray(payload.data) ? payload.data : []
+    },
+    async loadProcessOptions () {
+      if (this.processOptions.length) return
+      const res = await getWorkingsubclassAll({})
+      this.processOptions = this.normalizeList(res)
     },
     onBatchChange () {
       this.form.process_code = ''
     },
-    submitForm () {
+    onDialogClose () {
-      this.$refs.form.validate(async valid => {
+      this.submitting = false
-        if (!valid) return
+    },
+    async submitForm () {
       this.submitting = true
       try {
         await createWipData({ ...this.form })
@@ -346,7 +378,6 @@ export default {
       } finally {
         this.submitting = false
       }
-      })
     }
   }
 }