出入库

src/views/sop/sop-manage/device-out-in/add-device-dialog.vue

@@ -27,87 +27,11 @@
         </t-col>
         <t-col :span="12">
           <t-form-item label="设备出入库登记" name="deviceInOutFormList">
-            <div class="w-full">
-              <t-table
-                class="dynamic-table"
-                ref="tableRef"
-                row-key="key"
-                :columns="columns"
-                :data="tableData"
-                bordered
-                size="small"
-              >
-                <template #operate="{ row }">
-                  <svg-icon
-                    class="delete-icon"
-                    name="delete"
-                    color="#262626"
-                    @click="deleteRow(row)"
-                  />
-                </template>
-                <template #key="{ row }">
-                  <span>{{ row.key }}</span>
-                </template>
-                <template #deviceNo="{ row }">
-                  <t-select
-                    v-if="formData.inOutType == 'OUT'"
-                    v-model="row.deviceNo"
-                    :options="deviceOutOptions"
-                    @change="(data, { option }) => deviceChange(row, option)"
-                  >
-                  </t-select>
-                  <t-select
-                    v-else
-                    v-model="row.deviceNo"
-                    :options="deviceInOptions"
-                  >
-                  </t-select>
-                </template>
-                <template #deviceStatus="{ row }">
-                  <span v-if="formData.inOutType == 'OUT'">{{
-                    RUNNING_STATUS[row.deviceStatus]
-                  }}</span>
-                  <t-select
-                    v-else
-                    v-model="row.deviceStatus"
-                    :options="dictToOptionList(RUNNING_STATUS)"
-                  ></t-select>
-                </template>
-                <template #scanCount="{ row }">
-                  <span v-if="formData.inOutType == 'OUT'">{{
-                    row.scanCount
-                  }}</span>
-                  <t-input v-else v-model="row.inOutType"></t-input>
-                </template>
-                <template #address="{ row }">
-                  <span v-if="formData.inOutType == 'IN'">{{
-                    row.address
-                  }}</span>
-                  <select-area
-                    v-else
-                    v-model="row.address"
-                    value-type="full"
-                    @change="checkTable"
-                  ></select-area>
-                </template>
-                <template #basePhotoPath="{ row }">
-                  <my-upload
-                    :imgLength="1"
-                    @change="imgChange($event, row)"
-                  ></my-upload>
-                </template>
-              </t-table>
-            </div>
-          </t-form-item>
-        </t-col>
-        <t-col :span="12">
-          <t-form-item>
-            <t-button theme="primary" @click="createOneRow">
-              <template #icon
-                ><svg-icon name="add-circle" color="#fff"
-              /></template>
-              添加
-            </t-button>
+            <device-table
+              v-model="formData.deviceInOutFormList"
+              :config="deviceConfig"
+              :key="formData.inOutType"
+            ></device-table>
           </t-form-item>
         </t-col>
       </t-row>
@@ -121,40 +45,42 @@
   </my-dialog>
 </template>
 <script setup name="AddDeviceDialog">
-import { ref, watch } from 'vue';
-import { cloneDeep, omit } from 'lodash';
-import useOptions from '@/hooks/useOptions';
-import { RUNNING_STATUS } from '@/config/constants';
-import { dictToOptionList } from '@/utils/tool';
+import { computed, reactive, ref, watch } from 'vue';
 import { MessagePlugin } from 'tdesign-vue-next';
 import { deviceOutInSave } from '@/api/sop';
-
-const { options: deviceOutOptions } = useOptions('deviceCanOut');
-const { options: deviceInOptions } = useOptions('deviceCanIn');
+import DeviceTable from '../../components/dynamic-form-item/device-table/index.vue';
 
 const emit = defineEmits(['update:visible', 'success']);
-
 const formRef = ref(null);
 
 const props = defineProps({
   visible: Boolean,
 });
-let data = {
+const formData = reactive({
   inOutType: 'OUT',
   inOutTime: '',
   deviceInOutFormList: [],
-};
-const formData = ref(cloneDeep(data));
+});
+
+const deviceConfig = computed(() => {
+  return {
+    code: formData.inOutType === 'OUT' ? 'DEVICE_OUT_TABLE' : 'DEVICE_IN_TABLE',
+    writable: true,
+  };
+});
+
 watch(
   () => props.visible,
   () => {
-    formData.value = cloneDeep(data);
+    formData.inOutType = 'OUT';
+    formData.inOutTime = '';
+    formData.deviceInOutFormList = [];
   }
 );
 watch(
-  () => formData.value.inOutType,
+  () => formData.inOutType,
   () => {
-    tableData.value = [];
+    formData.deviceInOutFormList = [];
   }
 );
 const rules = {
@@ -168,36 +94,13 @@ const rules = {
   ],
   deviceInOutFormList: [
     {
-      validator: () => {
-        if (!tableData.value.length) {
+      validator: (val) => {
+        if (!val.length) {
           return {
             result: false,
             message: '请填写至少一条记录',
           };
         }
-
-        if (formData.value.inOutType === 'OUT') {
-          const valid = tableData.value.every((item) => {
-            return item.deviceNo && item.address[2];
-          });
-          if (!valid) {
-            return {
-              result: false,
-              message: '设备信息未填写完整',
-            };
-          }
-        } else {
-          const valid = tableData.value.every((item) => {
-            return item.deviceNo && item.deviceStatus && item.scanCount;
-          });
-          if (!valid) {
-            return {
-              result: false,
-              message: '设备信息未填写完整',
-            };
-          }
-        }
-
         return {
           result: true,
           type: 'success',
@@ -208,109 +111,12 @@ const rules = {
     },
   ],
 };
-const columns = [
-  {
-    title: '序号',
-    coleKey: 'key',
-    cell: 'key',
-    align: 'center',
-    width: 50,
-  },
-  {
-    title: '设备编号',
-    colKey: 'deviceNo',
-    width: 150,
-  },
-  {
-    title: '供应商',
-    colKey: 'supplierName',
-  },
-  {
-    title: '运行状态',
-    colKey: 'deviceStatus',
-    width: 105,
-  },
-  {
-    title: '总扫描量',
-    colKey: 'scanCount',
-    width: 80,
-  },
-  {
-    title: '当前所在地',
-    colKey: 'location',
-  },
-  {
-    title: '发往地',
-    colKey: 'address',
-  },
-  {
-    title: '快递单拍照',
-    colKey: 'basePhotoPath',
-    width: 98,
-  },
-  {
-    title: '操作',
-    colKey: 'operate',
-    width: 50,
-    align: 'center',
-  },
-];
-const tableData = ref([]);
-const resetKeys = () => {
-  tableData.value.forEach((item, index) => {
-    item.key = index + 1 + '';
-  });
-  checkTable();
-};
-const checkTable = async () => {
-  await formRef.value?.validate({ fields: ['deviceInOutFormList'] });
-};
-const imgChange = (obj, row) => {
-  row.basePhotoPath = obj.url;
-};
-const deviceChange = (row, option) => {
-  row.supplierName = option.supplierName;
-  row.deviceStatus = option.deviceStatus;
-  row.scanCount = option.scanCount;
-  row.location = option.location;
-  if (formData.value.inOutType === 'IN') {
-    row.address = option.supplierName;
-  }
-  checkTable();
-};
-const createOneRow = () => {
-  tableData.value.push({
-    deviceNo: '',
-    supplierName: '',
-    deviceStatus: '',
-    scanCount: '',
-    location: '',
-    address: formData.value.inOutType === 'OUT' ? ['', '', ''] : '',
-    basePhotoPath: '',
-  });
-  resetKeys();
-};
-
-createOneRow();
-const deleteRow = (row) => {
-  let index = tableData.value.findIndex((item) => item.key == row.key);
-  tableData.value.splice(index, 1);
-  resetKeys();
-};
 
 const save = async () => {
   const valid = await formRef.value.validate();
   if (valid !== true) return;
 
-  let deviceInOutFormList = tableData.value.map((item) => {
-    item.address = item.address.join('');
-    return { ...omit(item, 'key') };
-  });
-  deviceOutInSave({
-    inOutType: formData.inOutType,
-    inOutTime: formData.inOutTime,
-    deviceInOutFormList,
-  }).then(() => {
+  deviceOutInSave(formData).then(() => {
     MessagePlugin.success('操作成功');
     emit('success');
   });