diff --git a/src/views/planning-production/production-monitoring/material-monitoring/index.vue b/src/views/planning-production/production-monitoring/material-monitoring/index.vue
index 158b026b..b72ff3a6 100644
--- a/src/views/planning-production/production-monitoring/material-monitoring/index.vue
+++ b/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,94 +82,107 @@
       </template>
     </page-table>
 
-    <el-dialog :title="$t(key('input_semi_product_data'))" :visible.sync="dialogVisible" width="520px">
-      <el-form ref="form" :model="form" :rules="rules" label-width="130px" size="mini">
-        <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
-            style="width:100%"
-            @focus="loadBatchOptions"
-            @change="onBatchChange"
-          >
-            <el-option
-              v-for="item in batchOptions"
-              :key="item.id"
-              :label="item.batch"
-              :value="item.id"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item :label="$t(key('workingsubclass'))" prop="process_code">
-          <el-select
-            v-model="form.process_code"
-            :placeholder="$t(key('select_workingsubclass'))"
-            clearable
-            filterable
-            style="width:100%"
-            :disabled="!form.batch_id"
-          >
-            <el-option
-              v-for="item in selectedBatchProcesses"
-              :key="item.code || item.name"
-              :label="item.name || item.code"
-              :value="item.code || item.name"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item :label="$t(key('device_code'))" prop="device_code">
-          <el-select
-            v-model="form.device_code"
-            :placeholder="$t(key('select_device_code'))"
-            clearable
-            filterable
-            style="width:100%"
-            @focus="loadDeviceOptions"
-          >
-            <el-option
-              v-for="item in deviceOptions"
-              :key="item.code || item.device_code"
-              :label="item.name || item.device_name || item.code || item.device_code"
-              :value="item.code || item.device_code"
-            />
-          </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-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"
-            style="width:100%"
-            :placeholder="$t(key('output_date'))"
+    <page-dialog-form
+      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"
+        >
+          <el-option
+            v-for="item in batchOptions"
+            :key="item.id"
+            :label="item.batch"
+            :value="item.id"
           />
-        </el-form-item>
-      </el-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>
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="$t(key('workingsubclass'))" prop="process_code">
+        <el-select
+          v-model="form.process_code"
+          :placeholder="$t(key('select_workingsubclass'))"
+          clearable
+          filterable
+          size="mini"
+          style="width:100%"
+          :disabled="!form.batch_id"
+        >
+          <el-option
+            v-for="item in selectedBatchProcesses"
+            :key="item.code || item.name"
+            :label="item.name || item.code"
+            :value="item.code || item.name"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="$t(key('device_code'))" prop="device_code">
+        <el-select
+          v-model="form.device_code"
+          :placeholder="$t(key('select_device_code'))"
+          clearable
+          filterable
+          size="mini"
+          style="width:100%"
+          @focus="loadDeviceOptions"
+        >
+          <el-option
+            v-for="item in deviceOptions"
+            :key="item.code || item.device_code"
+            :label="item.name || item.device_name || item.code || item.device_code"
+            :value="item.code || item.device_code"
+          />
+        </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" 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>
+    </page-dialog-form>
   </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 [
-        {
-          key: 'create',
-          label: this.key('input_semi_product_data'),
-          type: 'primary',
-          icon: 'el-icon-plus',
-          size: 'mini',
-          onClick: this.openDialog
-        }
-      ]
+      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' }],
-        process_code: [{ required: true, message: this.$t(this.key('select_workingsubclass')), trigger: 'change' }],
-        device_code: [{ required: true, message: this.$t(this.key('select_device_code')), trigger: 'change' }],
-        item_quantity: [{ required: true, message: this.$t(this.key('enter_output_quantity')), trigger: 'blur' }]
+        batch_id: [{ required: true, message: this.key('select_batch_id'), trigger: 'change' }],
+        process_code: [{ required: true, message: this.key('select_workingsubclass'), trigger: 'change' }],
+        device_code: [{ required: true, message: this.key('select_device_code'), trigger: 'change' }],
+        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) {
-      return res && res.data ? res.data : (res || {})
+    normalizePayload (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)
-        this.tableData = Array.isArray(payload.data) ? payload.data : []
-        this.pagination.total = Number(payload.count || 0)
+        const payload = this.normalizePage(res)
+        this.tableData = payload.data
+        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,31 +350,34 @@ export default {
     async loadBatchOptions () {
       if (this.batchOptions.length) return
       const res = await getBatchAll({})
-      const data = Array.isArray(res) ? res : (res && res.data) || []
-      this.batchOptions = Array.isArray(data) ? data : []
+      this.batchOptions = this.normalizeList(res)
     },
     async loadDeviceOptions () {
       if (this.deviceOptions.length) return
       const res = await getDeviceAll({})
-      const payload = this.responseData(res)
-      this.deviceOptions = Array.isArray(payload.data) ? payload.data : []
+      this.deviceOptions = this.normalizeList(res)
+    },
+    async loadProcessOptions () {
+      if (this.processOptions.length) return
+      const res = await getWorkingsubclassAll({})
+      this.processOptions = this.normalizeList(res)
     },
     onBatchChange () {
       this.form.process_code = ''
     },
-    submitForm () {
-      this.$refs.form.validate(async valid => {
-        if (!valid) return
-        this.submitting = true
-        try {
-          await createWipData({ ...this.form })
-          this.$message.success(this.$t(this.key('operation_success')))
-          this.dialogVisible = false
-          this.fetchData()
-        } finally {
-          this.submitting = false
-        }
-      })
+    onDialogClose () {
+      this.submitting = false
+    },
+    async submitForm () {
+      this.submitting = true
+      try {
+        await createWipData({ ...this.form })
+        this.$message.success(this.$t(this.key('operation_success')))
+        this.dialogVisible = false
+        this.fetchData()
+      } finally {
+        this.submitting = false
+      }
     }
   }
 }