|
@@ -0,0 +1,190 @@
|
|
|
+<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 #basePhotoPath="{ row }">
|
|
|
+ <!-- <t-image
|
|
|
+ v-if="row.basePhotoPath"
|
|
|
+ :src="row.basePhotoPath"
|
|
|
+ :style="{ width: '80px', height: '80px' }"
|
|
|
+ /> -->
|
|
|
+ <image-view
|
|
|
+ v-if="row.basePhotoPath"
|
|
|
+ :width="80"
|
|
|
+ :height="80"
|
|
|
+ :images="[row.basePhotoPath]"
|
|
|
+ ></image-view>
|
|
|
+ </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"
|
|
|
+ ></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: 120,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '设备序列号',
|
|
|
+ colKey: 'serialNo',
|
|
|
+ width: 120,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ 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: '',
|
|
|
+ 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) => {
|
|
|
+ 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>
|