sop流程里的设备入库修改

src/views/sop/components/dynamic-form-item/device-table/device-in-table.vue

@@ -0,0 +1,225 @@
+<template>
+  <div>
+    <t-table
+      class="dynamic-table"
+      ref="tableRef"
+      row-key="key"
+      :columns="columns"
+      :data="tableData"
+      bordered
+      size="small"
+    >
+      <template v-if="!readonly" #operate="{ row, rowIndex }">
+        <div class="table-operations">
+          <t-link theme="primary" hover="color" @click="handleEdit(row)">
+            编辑
+          </t-link>
+          <!-- <t-link theme="primary" hover="color" @click="deleteRow(rowIndex)">
+            删除
+          </t-link> -->
+        </div>
+      </template>
+      <template #deviceStatus="{ row }">
+        <status-tag
+          v-if="row.deviceStatus"
+          :value="row.deviceStatus"
+          type="runningStatus"
+        ></status-tag>
+        <span class="tip" v-else>请编辑并填写</span>
+      </template>
+      <template #basePhotoPath="{ row }">
+        <t-image
+          v-if="row.basePhotoPath"
+          :src="row.basePhotoPath"
+          :style="{ width: '80px', height: '80px' }"
+        />
+        <span class="tip" v-else>请编辑并上传</span>
+      </template>
+    </t-table>
+    <!-- <t-button
+      v-if="!readonly"
+      class="m-t-10px"
+      theme="primary"
+      @click="handleAdd"
+    >
+      <template #icon><svg-icon name="add-circle" color="#fff" /></template>
+      添加
+    </t-button> -->
+
+    <!-- EditColumnDialog -->
+    <edit-column-dialog
+      v-if="!readonly"
+      v-model:visible="showEditColumnDialog"
+      :curRow="curRow"
+      :isOutType="isOutType"
+      @success="columnConfirm"
+      :tableData="tableData"
+      :sop="sop"
+    ></edit-column-dialog>
+  </div>
+</template>
+<script setup name="DEVICEINTABLE">
+import { computed, ref, watch } from 'vue';
+import EditColumnDialog from './edit-column-dialog.vue';
+import { deviceCanIn } from '@/api/sop';
+import bus from '@/utils/bus';
+const props = defineProps({
+  config: { type: Object },
+  modelValue: { type: Array },
+  sop: {
+    type: Object,
+    default() {
+      return {};
+    },
+  },
+});
+const emit = defineEmits(['update:modelValue', 'change']);
+
+const tableData = ref([]);
+const showEditColumnDialog = ref(false);
+const curRow = ref(null);
+
+const isOutType = computed(() => {
+  return props.config.code === 'DEVICE_OUT_TABLE';
+});
+const readonly = computed(() => {
+  return !props.config.writable;
+});
+
+const columns = [
+  {
+    title: '序号',
+    colKey: 'key',
+    align: 'center',
+    width: 50,
+  },
+  {
+    title: '设备编号',
+    colKey: 'deviceNo',
+    width: 120,
+  },
+  {
+    title: '型号',
+    colKey: 'deviceModel',
+    width: 120,
+  },
+  {
+    title: '供应商',
+    colKey: 'supplierName',
+  },
+  {
+    title: '运行状态',
+    colKey: 'deviceStatus',
+    width: 105,
+  },
+  {
+    title: '总扫描量',
+    colKey: 'scanCount',
+    width: 80,
+  },
+  {
+    title: '当前所在地',
+    colKey: 'location',
+    width: 95,
+  },
+  {
+    title: '发往地',
+    colKey: 'address',
+  },
+  {
+    title: '快递单拍照',
+    colKey: 'basePhotoPath',
+    width: 98,
+  },
+  {
+    title: '操作',
+    colKey: 'operate',
+    width: 90,
+    align: 'center',
+  },
+];
+const resetKeys = () => {
+  tableData.value.forEach((item, index) => {
+    item.key = index + 1 + '';
+  });
+};
+
+const handleAdd = () => {
+  curRow.value = {
+    key: '',
+    deviceNo: '',
+    supplierName: '',
+    deviceStatus: '',
+    deviceBrand: '',
+    scanCount: '',
+    location: '',
+    address: '',
+    addressArr: ['', '', ''],
+    basePhotoPath: '',
+  };
+  showEditColumnDialog.value = true;
+};
+const handleEdit = (row) => {
+  curRow.value = row;
+  showEditColumnDialog.value = true;
+};
+const deleteRow = (row) => {
+  let index = tableData.value.findIndex((item) => item.key == row.key);
+  tableData.value.splice(index, 1);
+  emitChange();
+};
+
+const columnConfirm = (data) => {
+  console.log('data', data);
+  if (data.key) {
+    const pos = tableData.value.findIndex((item) => item.key === data.key);
+    tableData.value.splice(pos, 1, data);
+  } else {
+    tableData.value.push(data);
+  }
+  emitChange();
+};
+
+const emitChange = () => {
+  resetKeys();
+  emit('update:modelValue', tableData.value);
+  emit('change', tableData.value);
+};
+const initTableData = () => {
+  deviceCanIn({ sopNo: props.sop.sopNo }).then((res) => {
+    tableData.value = res;
+    emitChange();
+  });
+};
+watch(
+  () => props.modelValue,
+  (val, oldval) => {
+    if (!val) {
+      initTableData();
+      return;
+    }
+    if (val === oldval) return;
+    const vals = val || [];
+    tableData.value = vals;
+    emitChange();
+  },
+  {
+    immediate: true,
+  }
+);
+
+watch(
+  tableData,
+  (val) => {
+    let bool = val.every((item) => item.deviceStatus && item.basePhotoPath);
+    bus.emit('changeOtherRules', { code: 'DEVICE_IN_TABLE', result: bool });
+  },
+  { deep: true }
+);
+</script>
+<style lang="less" scoped>
+.tip {
+  font-size: 12px;
+  color: var(--td-error-color);
+}
+</style>

src/views/sop/components/dynamic-form-item/device-table/edit-column-dialog.vue

@@ -17,6 +17,7 @@
     >
       <t-form-item label="设备编号" name="deviceNo">
         <t-select
+          :disabled="!isOutType"
           v-model="formData.deviceNo"
           :options="deviceOptions"
           @change="deviceChange"

src/views/sop/components/dynamic-form-item/index.vue

@@ -29,6 +29,7 @@ import NUMBER from './NUMBER.vue';
 import BIGTITLE from './BIG_TITLE.vue';
 import SIGN from './SIGN.vue';
 import DEVICEOUTTABLE from './device-table/index.vue';
+import DEVICEINTABLE from './device-table/device-in-table.vue';
 import LABEL from './LABEL.vue';
 
 const props = defineProps({
@@ -64,7 +65,7 @@ const tabComps = {
   FILE: UPLOADIMAGE,
   RADIO_WITH_INPUT: RADIOWITHINPUT,
   DEVICE_OUT_TABLE: DEVICEOUTTABLE,
-  DEVICE_IN_TABLE: DEVICEOUTTABLE,
+  DEVICE_IN_TABLE: DEVICEINTABLE,
   FORM_GROUP_TITLE: BIGTITLE,
   ONLY_TITLE: BIGTITLE,
   LABEL: LABEL,

src/views/sop/sop-manage/sop-step/index.vue

@@ -320,6 +320,13 @@ const approveRejectFormIds = {
 const stepHistoryShow = ref(false);
 const flowApproveHistoryList = ref([]);
 const stepDuration = ref('');
+const otherRules = ref({
+  DEVICE_IN_TABLE: true,
+});
+const otherRulesPassed = computed(() => {
+  let values = Object.values(otherRules.value);
+  return !values.filter((item) => !item).length;
+});
 
 function getFlowApproveHistoryList(data) {
   if (!data) return [];
@@ -512,7 +519,6 @@ watch(curFormConfig, (val) => {
     }
     return obj;
   }, {});
-  console.log('vvvv', val);
   rules.value = val.reduce((obj, item) => {
     let ruleItem =
       item.required && item.code === 'CHECKBOX'
@@ -559,7 +565,8 @@ const toViewHistory = () => {
 const switchStep = async (stepData) => {
   if (IS_EDIT_MODE.value) {
     const valid = await form.value.validate();
-    if (valid !== true) return MessagePlugin.error('请完善必填项');
+    if (valid !== true || !otherRulesPassed.value)
+      return MessagePlugin.error('请完善必填项');
 
     allFormData.value = { ...allFormData.value, ...formData.value };
   }
@@ -606,7 +613,8 @@ const submitHandle = async (approve = 'START') => {
   if (approve !== 'DRAFT') {
     // 提交
     const valid = await form.value.validate();
-    if (valid !== true) return MessagePlugin.error('请完善必填项');
+    if (valid !== true || !otherRulesPassed.value)
+      return MessagePlugin.error('请完善必填项');
 
     if (curStepData.value.setup !== 1) {
       const rejectFormIds = approveRejectFormIds[curStepData.value.taskKey];
@@ -651,7 +659,8 @@ const submitHandle = async (approve = 'START') => {
 // 编辑-保存
 const saveHandle = async () => {
   const valid = await form.value.validate();
-  if (valid !== true) return MessagePlugin.error('请完善必填项');
+  if (valid !== true || !otherRulesPassed.value)
+    return MessagePlugin.error('请完善必填项');
 
   const res = await sopSaveApi({
     id: props.sop.id,