bug fix

src/components/common/status-tag/config.js

@@ -6,6 +6,7 @@ import {
   publishStatusFilter,
   attendanceResultFilter,
   crmStatusFilter,
+  runningStatusFilter,
 } from '@/utils/filter';
 
 const configs = {
@@ -62,6 +63,13 @@ const configs = {
     },
     valFilter: attendanceResultFilter,
   },
+  runningStatus: {
+    themeDict: {
+      NORMAL: 'success',
+      BREAK_DOWN: 'danger',
+    },
+    valFilter: runningStatusFilter,
+  },
 };
 export function getConfig(type) {
   return configs[type] || { themeDict: {}, valFilter: (val) => val };

src/components/global/my-upload/index.vue

@@ -18,7 +18,7 @@
   </t-upload>
 </template>
 <script setup name="MyUpload">
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
 import { MessagePlugin } from 'tdesign-vue-next';
 import { uploadFiles } from '@/api/common';
 import { getFileMD5 } from '@/utils/crypto';
@@ -42,6 +42,7 @@ const props = defineProps({
     type: Number,
     default: 20 * 1024,
   },
+  modelValue: { type: Array },
 });
 const files = ref([]);
 const checkFileFormat = (fileType) => {
@@ -91,4 +92,14 @@ const handleChange = () => {
     files.value.map((item) => item.response)
   );
 };
+watch(
+  () => props.modelValue,
+  (val, oldval) => {
+    if (val === oldval) return;
+    files.value = val || [];
+  },
+  {
+    immediate: true,
+  }
+);
 </script>

src/layout/index.vue

@@ -14,7 +14,11 @@
           ]"
           @click="moduleChange(item.name)"
         >
-          <svg-icon prefix="icon-icon-fill" :name="item.meta.icon"></svg-icon>
+          <svg-icon
+            v-if="item.meta.icon"
+            prefix="icon-icon-fill"
+            :name="item.meta.icon"
+          ></svg-icon>
           <p>{{ item.meta.title }}</p>
         </div>
       </div>

src/views/my-workbenches/workbenches/my-waits/waits-list.vue

@@ -15,7 +15,9 @@
           <template v-else>
             <t-tag theme="danger" variant="light">已超时</t-tag>
             <t-tag theme="danger" variant="light"
-              >超时时长：{{ item.diffTime <= 30 ? '30天' : '大于30天' }}</t-tag
+              >超时时长：{{
+                item.diffTime <= 30 ? `${item.diffTime}天` : '大于30天'
+              }}</t-tag
             >
           </template>
         </div>

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

@@ -1,73 +0,0 @@
-<template>
-  <t-table
-    class="dynamic-table"
-    ref="tableRef"
-    row-key="key"
-    :columns="columns"
-    :data="tableData"
-    bordered
-    size="small"
-  >
-    <template #key="{ row }">
-      <div class="flex items-center key-cell">
-        <span class="key-index">{{ row.key }}</span>
-      </div>
-    </template>
-
-    <template #h="{ row }">
-      <span>上传图片</span>
-    </template>
-  </t-table>
-</template>
-<script setup name="DEVICEINTABLE">
-import { ref } from 'vue';
-const { config, onChange } = defineProps(['config', 'onChange']);
-const columns = [
-  {
-    title: '',
-    coleKey: 'key',
-    cell: 'key',
-    align: 'left',
-    width: 80,
-  },
-  {
-    title: '设备编号',
-    colKey: 'a',
-    width: 150,
-  },
-  {
-    title: '设备编号',
-    colKey: 'b',
-    width: 150,
-  },
-  {
-    title: '供应商',
-    colKey: 'c',
-  },
-  {
-    title: '运行状态',
-    colKey: 'd',
-    width: 80,
-  },
-  {
-    title: '总扫描量',
-    colKey: 'e',
-    width: 80,
-  },
-  {
-    title: '当前所在地',
-    colKey: 'f',
-  },
-  {
-    title: '发往地',
-    colKey: 'g',
-  },
-  {
-    title: '快递单拍照',
-    colKey: 'h',
-    width: 100,
-  },
-];
-const tableData = ref([]);
-</script>
-<style></style>

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

@@ -1,106 +0,0 @@
-<template>
-  <t-table
-    class="dynamic-table"
-    ref="tableRef"
-    row-key="key"
-    :columns="columns"
-    :data="tableData"
-    bordered
-    size="small"
-  >
-    <template #key="{ row }">
-      <div class="flex items-center key-cell">
-        <Icon name="delete" class="delete-icon" @click="deleteRow(row)"></Icon>
-        <span class="key-index">{{ row.key }}</span>
-      </div>
-    </template>
-    <template #a="{ row }">
-      <t-select v-model="row.a">
-        <t-option value="1">111</t-option>
-        <t-option value="2">222</t-option>
-      </t-select>
-    </template>
-
-    <template #h="{ row }">
-      <span>上传图片</span>
-    </template>
-  </t-table>
-</template>
-<script setup name="DEVICEOUTTABLE">
-import { ref } from 'vue';
-const { config, onChange } = defineProps(['config', 'onChange']);
-const columns = [
-  {
-    title: '',
-    coleKey: 'key',
-    cell: 'key',
-    align: 'left',
-    width: 80,
-  },
-  {
-    title: '设备编号',
-    colKey: 'a',
-    width: 150,
-  },
-  {
-    title: '设备编号',
-    colKey: 'b',
-    width: 150,
-  },
-  {
-    title: '供应商',
-    colKey: 'c',
-  },
-  {
-    title: '运行状态',
-    colKey: 'd',
-    width: 80,
-  },
-  {
-    title: '总扫描量',
-    colKey: 'e',
-    width: 80,
-  },
-  {
-    title: '当前所在地',
-    colKey: 'f',
-  },
-  {
-    title: '发往地',
-    colKey: 'g',
-  },
-  {
-    title: '快递单拍照',
-    colKey: 'h',
-    width: 100,
-  },
-];
-const tableData = ref([]);
-const resetKeys = () => {
-  tableData.value.forEach((item, index) => {
-    item.key = index + 1 + '';
-  });
-};
-
-const createOneRow = () => {
-  tableData.value.push({
-    a: '',
-    b: '',
-    c: '',
-    d: '',
-    e: '',
-    f: '',
-    g: '',
-    h: '',
-  });
-  resetKeys();
-};
-
-createOneRow();
-const deleteRow = (row) => {
-  let index = tableData.value.findIndex((item) => item.key == row.key);
-  tableData.value.splice(index, 1);
-  resetKeys();
-};
-</script>
-<style></style>

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

@@ -0,0 +1,164 @@
+<template>
+  <my-dialog
+    :visible="visible"
+    :header="title"
+    :width="700"
+    attach="body"
+    :closeOnOverlayClick="false"
+    @close="emit('update:visible', false)"
+    @opened="dialogOpened"
+  >
+    <t-form
+      ref="formRef"
+      :data="formData"
+      :rules="rules"
+      :labelWidth="120"
+      colon
+    >
+      <t-form-item label="设备编号" name="deviceNo">
+        <t-select
+          v-model="formData.deviceNo"
+          :options="deviceOptions"
+          @change="deviceChange"
+        >
+        </t-select>
+      </t-form-item>
+      <t-form-item v-if="!isOutType" label="运行状态" name="deviceStatus">
+        <t-select
+          v-model="formData.deviceStatus"
+          :options="dictToOptionList(RUNNING_STATUS)"
+        ></t-select>
+      </t-form-item>
+      <t-form-item v-if="!isOutType" label="总扫描量" name="scanCount">
+        <t-input v-model="formData.inOutType"></t-input>
+      </t-form-item>
+      <t-form-item v-if="isOutType" label="发往地" name="address" required-mark>
+        <select-area v-model="formData.address" value-type="full"></select-area>
+      </t-form-item>
+      <t-form-item label="快递单拍照" name="basePhotoPath">
+        <my-upload
+          v-model="files"
+          :imgLength="1"
+          @change="imgChange"
+        ></my-upload>
+      </t-form-item>
+    </t-form>
+    <template #foot>
+      <t-button theme="default" @click="emit('update:visible', false)"
+        >取消</t-button
+      >
+      <t-button theme="primary" @click="save">保存</t-button>
+    </template>
+  </my-dialog>
+</template>
+<script setup name="EditColumnDialog">
+import { ref, computed, reactive } from 'vue';
+import { RUNNING_STATUS } from '@/config/constants';
+import { dictToOptionList } from '@/utils/tool';
+import { deviceCanOut, deviceCanIn } from '@/api/sop';
+
+const emit = defineEmits(['update:visible', 'success']);
+const props = defineProps({
+  visible: Boolean,
+  curRow: Object,
+  isOutType: Boolean,
+});
+
+const deviceOptions = ref([]);
+const formRef = ref(null);
+const files = ref([]);
+const formData = reactive({
+  key: '',
+  deviceNo: '',
+  supplierName: '',
+  deviceStatus: '',
+  scanCount: '',
+  location: '',
+  address: ['', '', ''],
+  basePhotoPath: '',
+});
+
+const title = computed(() => {
+  return (props.curRow?.key ? '编辑' : '新增') + '记录';
+});
+
+const rules = {
+  deviceNo: [
+    {
+      required: true,
+      message: '不能为空',
+      type: 'error',
+      trigger: 'change',
+    },
+  ],
+  deviceStatus: [
+    {
+      required: true,
+      message: '不能为空',
+      type: 'error',
+      trigger: 'change',
+    },
+  ],
+  scanCount: [
+    {
+      required: true,
+      message: '不能为空',
+      type: 'error',
+      trigger: 'change',
+    },
+  ],
+  address: [
+    {
+      validator: () => {
+        console.log(formData.address);
+        if (formData.address.some((item) => !item))
+          return { result: false, message: '发往地必选' };
+
+        return { result: true, type: 'success' };
+      },
+      type: 'error',
+      trigger: 'change',
+    },
+  ],
+};
+
+const getDeviceOptions = async () => {
+  const func = props.isOutType ? deviceCanOut : deviceCanIn;
+  const res = await func();
+
+  deviceOptions.value = res.map((item) => ({
+    ...item,
+    value: item.deviceNo,
+    label: item.deviceNo,
+  }));
+};
+
+const imgChange = (fileRes) => {
+  formData.basePhotoPath = fileRes.length ? fileRes[0].url : '';
+};
+const deviceChange = (val, { option }) => {
+  formData.supplierName = option.supplierName;
+  formData.deviceStatus = option.deviceStatus;
+  formData.scanCount = option.scanCount;
+  formData.location = option.location;
+  if (!props.isOutType) {
+    formData.address = option.supplierName;
+  }
+};
+
+const dialogOpened = async () => {
+  for (let key in formData) {
+    formData[key] = props.curRow[key];
+  }
+  files.value = formData.basePhotoPath ? [{ url: formData.basePhotoPath }] : [];
+  await getDeviceOptions();
+};
+
+const save = async () => {
+  const valid = await formRef.value.validate();
+  if (valid !== true) return;
+
+  emit('update:visible', false);
+  emit('success', formData);
+};
+</script>

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

@@ -0,0 +1,174 @@
+<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 :value="row.deviceStatus" type="runningStatus"></status-tag>
+      </template>
+      <template #address="{ row }">
+        <span v-if="!isOutType">{{ row.address }}</span>
+        <span v-else>{{ row.address.join('') }}</span>
+      </template>
+      <template #basePhotoPath="{ row }">
+        <t-image
+          v-if="row.basePhotoPath"
+          :src="row.basePhotoPath"
+          :style="{ width: '80px', height: '80px' }"
+        />
+      </template>
+    </t-table>
+    <t-button 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-model:visible="showEditColumnDialog"
+      :curRow="curRow"
+      :isOutType="isOutType"
+      @success="columnConfirm"
+    ></edit-column-dialog>
+  </div>
+</template>
+<script setup name="DEVICEOUTTABLE">
+import { computed, ref, watch } from 'vue';
+import EditColumnDialog from './edit-column-dialog.vue';
+
+const props = defineProps({
+  config: { type: Object },
+  modelValue: { type: Array },
+});
+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: 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: 90,
+    align: 'center',
+  },
+];
+const resetKeys = () => {
+  tableData.value.forEach((item, index) => {
+    item.key = index + 1 + '';
+  });
+};
+
+const handleAdd = () => {
+  curRow.value = {
+    key: '',
+    deviceNo: '',
+    supplierName: '',
+    deviceStatus: '',
+    scanCount: '',
+    location: '',
+    address: isOutType.value ? ['', '', ''] : '',
+    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) => {
+  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);
+};
+
+watch(
+  () => props.modelValue,
+  (val, oldval) => {
+    if (val === oldval) return;
+    const vals = val || [];
+    tableData.value = vals;
+  },
+  {
+    immediate: true,
+  }
+);
+</script>

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

@@ -26,11 +26,8 @@ import UPLOADIMAGE from './UPLOAD_IMAGE.vue';
 import RADIOWITHINPUT from './RADIO_WITH_INPUT.vue';
 import NUMBER from './NUMBER.vue';
 import BIGTITLE from './BIG_TITLE.vue';
-
-// 待完善
 import SIGN from './SIGN.vue';
-import DEVICEOUTTABLE from './DEVICE_OUT_TABLE.vue';
-import DEVICEINTABLE from './DEVICE_IN_TABLE.vue';
+import DEVICEOUTTABLE from './device-table/index.vue';
 
 const props = defineProps({
   config: { type: Object },
@@ -59,7 +56,7 @@ const tabComps = {
   FILE: UPLOADIMAGE,
   RADIO_WITH_INPUT: RADIOWITHINPUT,
   DEVICE_OUT_TABLE: DEVICEOUTTABLE,
-  DEVICE_IN_TABLE: DEVICEINTABLE,
+  DEVICE_IN_TABLE: DEVICEOUTTABLE,
   FORM_GROUP_TITLE: BIGTITLE,
   ONLY_TITLE: BIGTITLE,
 };

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

@@ -6,7 +6,7 @@
     :width="1100"
     :closeOnOverlayClick="false"
   >
-    <t-form ref="formRef" :model="formData" :labelWidth="120">
+    <t-form ref="formRef" :data="formData" :rules="rules" :labelWidth="120">
       <t-row :gutter="[0, 20]">
         <t-col :span="6">
           <t-form-item label="设备出入库选择">
@@ -17,7 +17,7 @@
           </t-form-item>
         </t-col>
         <t-col :span="6">
-          <t-form-item label="设备出入库时间">
+          <t-form-item label="设备出入库时间" name="inOutTime">
             <t-date-picker
               v-model="formData.inOutTime"
               style="width: 100%"
@@ -26,7 +26,7 @@
           </t-form-item>
         </t-col>
         <t-col :span="12">
-          <t-form-item label="设备出入库登记">
+          <t-form-item label="设备出入库登记" name="deviceInOutFormList">
             <div class="w-full">
               <t-table
                 class="dynamic-table"
@@ -37,21 +37,23 @@
                 bordered
                 size="small"
               >
+                <template #operate="{ row }">
+                  <svg-icon
+                    class="delete-icon"
+                    name="delete"
+                    color="#262626"
+                    @click="deleteRow(row)"
+                  />
+                </template>
                 <template #key="{ row }">
-                  <div class="flex items-center key-cell">
-                    <Icon
-                      name="delete"
-                      class="delete-icon"
-                      @click="deleteRow(row)"
-                    ></Icon>
-                    <span class="key-index">{{ row.key }}</span>
-                  </div>
+                  <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
@@ -79,12 +81,13 @@
                 </template>
                 <template #address="{ row }">
                   <span v-if="formData.inOutType == 'IN'">{{
-                    row.address.join('')
+                    row.address
                   }}</span>
                   <select-area
                     v-else
                     v-model="row.address"
                     value-type="full"
+                    @change="checkTable"
                   ></select-area>
                 </template>
                 <template #basePhotoPath="{ row }">
@@ -94,13 +97,19 @@
                   ></my-upload>
                 </template>
               </t-table>
-              <t-button theme="primary" class="m-t-15px" @click="createOneRow">
-                <template #icon><Icon name="add"></Icon></template>
-                添加
-              </t-button>
             </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>
+          </t-form-item>
+        </t-col>
       </t-row>
     </t-form>
     <template #foot>
@@ -114,7 +123,6 @@
 <script setup name="AddDeviceDialog">
 import { ref, watch } from 'vue';
 import { cloneDeep, omit } from 'lodash';
-import { Icon } from 'tdesign-icons-vue-next';
 import useOptions from '@/hooks/useOptions';
 import { RUNNING_STATUS } from '@/config/constants';
 import { dictToOptionList } from '@/utils/tool';
@@ -144,19 +152,69 @@ watch(
   }
 );
 watch(
-  () => formData.inOutType,
+  () => formData.value.inOutType,
   () => {
     tableData.value = [];
   }
 );
+const rules = {
+  inOutTime: [
+    {
+      required: true,
+      message: '设备出入库时间必选',
+      type: 'error',
+      trigger: 'change',
+    },
+  ],
+  deviceInOutFormList: [
+    {
+      validator: () => {
+        if (!tableData.value.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',
+        };
+      },
+      type: 'error',
+      trigger: 'change',
+    },
+  ],
+};
 const columns = [
   {
-    title: '',
+    title: '序号',
     coleKey: 'key',
     cell: 'key',
-    align: 'left',
-    width: 80,
+    align: 'center',
+    width: 50,
   },
   {
     title: '设备编号',
@@ -170,12 +228,12 @@ const columns = [
   {
     title: '运行状态',
     colKey: 'deviceStatus',
-    width: 120,
+    width: 105,
   },
   {
     title: '总扫描量',
     colKey: 'scanCount',
-    width: 90,
+    width: 80,
   },
   {
     title: '当前所在地',
@@ -190,16 +248,36 @@ const columns = [
     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: '',
@@ -207,7 +285,7 @@ const createOneRow = () => {
     deviceStatus: '',
     scanCount: '',
     location: '',
-    address: ['', '', ''],
+    address: formData.value.inOutType === 'OUT' ? ['', '', ''] : '',
     basePhotoPath: '',
   });
   resetKeys();
@@ -219,26 +297,11 @@ const deleteRow = (row) => {
   tableData.value.splice(index, 1);
   resetKeys();
 };
-const validate = () => {
-  if (!tableData.value.length) {
-    MessagePlugin.error('请填写至少一条记录');
-    return false;
-  }
-  if (formData.inOutType === 'OUT') {
-    return tableData.value.every((item) => {
-      return item.deviceNo && item.address[2];
-    });
-  } else {
-    MessagePlugin.error('设备信息未填写完整');
-    return tableData.value.every((item) => {
-      return item.deviceNo && item.deviceStatus && item.scanCount;
-    });
-  }
-};
-const save = () => {
-  if (!validate()) {
-    return;
-  }
+
+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') };
@@ -257,17 +320,11 @@ const save = () => {
 .dynamic-table {
   width: 100%;
   margin-bottom: 15px;
-  .key-cell {
-    .key-index {
-      font-size: 14px;
-    }
-    .delete-icon {
-      font-size: 18px;
-      color: #777;
-      margin-right: 10px;
-      cursor: pointer;
-      &:hover {
-        color: var(--td-brand-color);
+  .delete-icon {
+    cursor: pointer;
+    &:hover {
+      :deep(use) {
+        fill: var(--td-brand-color);
       }
     }
   }

src/views/sop/sop-manage/device-out-in/index.vue

@@ -14,6 +14,7 @@
           v-if="perm.BUTTON_Cancel"
           theme="default"
           :disabled="!selectedRowKeys.length"
+          ><template #icon><svg-icon name="delete" color="#262626" /></template
           >作废</t-button
         >
       </t-space>

src/views/system/config-manage/customer-manage/edit-customer-dialog.vue

@@ -63,7 +63,7 @@
               v-model="pca"
               value-type="full"
               placeholder="请选择省市区"
-              @change="areaChagne"
+              @change="areaChange"
             ></select-area>
           </t-form-item>
         </t-col>
@@ -185,7 +185,7 @@ const dialogOpened = () => {
   pca.value = [formData.province, formData.city, formData.area];
 };
 
-const areaChagne = (val) => {
+const areaChange = (val) => {
   formData.province = val[0];
   formData.city = val[1];
   formData.area = val[2];