detect-embeded/src/views/data/task/drawer.vue

<template>
  <BasicDrawer v-bind="$attrs" @register="registerDrawer" showFooter :title="getTitle" width="960px" @ok="handleSubmit">
    <BasicForm @register="registerForm" @field-value-change="handleValuesChanged" />
    <BasicTable @register="registerTable">
      <template #toolbar>
        <a-button type="primary" :icon="h(PlusOutlined)" @click="handleCreate">新 增</a-button>
        <a-button type="primary" :icon="h(EyeOutlined)" :disabled="importDisabled" @click="handleOpenFileDialog">OCR识别</a-button>
        <a-button type="primary" :icon="h(FileExcelOutlined)" :disabled="importDisabled" @click="handleImport">导入Excel</a-button>
        <Popconfirm
            title="确定要清空预埋件列表吗?"
            ok-text="确定"
            cancel-text="取消"
            @confirm="handleDeleteAll"
        >
          <a-button type="primary" :icon="h(MinusOutlined)">清空列表</a-button>
        </Popconfirm>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'x'">
          <span v-if="markField('x', record)" style="color: red">{{ record.x }}</span>
          <span v-else style="color: white">{{ record.x }}</span>
        </template>
        <template v-if="column.dataIndex === 'center'">
          <span v-if="markField('center', record)" style="color: red">{{ record.center }}</span>
          <span v-else style="color: white">{{ record.center }}</span>
        </template>
        <template v-if="column.dataIndex === 'w'">
          <span v-if="record.w !== record.h" style="color: red">{{ record.w }}</span>
          <span v-else style="color: white">{{ record.w }}</span>
        </template>
        <template v-if="column.dataIndex === 'h'">
          <span v-if="record.w !== record.h" style="color: red">{{ record.h }}</span>
          <span v-else style="color: white">{{ record.h }}</span>
        </template>
        <template v-if="column.dataIndex === 'action'">
          <TableAction
            :actions="[
              {
                label: '编辑',
                icon: 'clarity:note-edit-line',
                onClick: handleEdit.bind(null, record),
                divider: true,
              },
              {
                label: '删除',
                icon: 'ant-design:delete-outlined',
                color: 'error',
                popConfirm: {
                  title: '是否确认删除',
                  confirm: handleDelete.bind(null, record),
                  placement: 'topRight',
                },
                divider: true,
              },
            ]"
          />
        </template>
      </template>
    </BasicTable>
    <Modal @register="register" @success="updateParamData" />
  </BasicDrawer>
</template>
<script lang="ts" setup>
import { defineEmits, ref, computed, unref, h } from 'vue';
import { BasicForm, useForm } from '@/components/Form/index';
import { formSchema } from './schema';
import { BasicDrawer, useDrawerInner } from '@/components/Drawer';
import * as TaskApi from '@/api/data/taskApi';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { EyeOutlined, PlusOutlined, MinusOutlined, FileExcelOutlined } from "@ant-design/icons-vue";
import { Popconfirm } from 'ant-design-vue';
import Modal from "@/views/data/task/modal.vue";
import { useModal } from '/@/components/Modal';
const [register, { openModal }] = useModal();
const columns = [
  {
    title: '序号',
    dataIndex: 'sn',
    key: 'sn',
    width: '50px',
  },
  {
    title: '预埋件编号',
    dataIndex: 'code',
    key: 'code',
  },
  {
    title: '类型',
    dataIndex: 'type',
    key: 'type',
  },
  {
    title: 'X(mm)',
    dataIndex: 'x',
    key: 'x',
    width: '72px',
  },
  {
    title: 'Y(mm)',
    dataIndex: 'y',
    key: 'y',
    width: '72px',
  },
  {
    title: 'w(mm)',
    dataIndex: 'w',
    key: 'w',
    width: '72px',
  },
  {
    title: 'h(mm)',
    dataIndex: 'h',
    key: 'h',
    width: '72px',
  },
  {
    title: '中心点(m)',
    dataIndex: 'center',
    key: 'center',
    width: '80px',
  },
];

const paramData = ref<any>([]);

const emit = defineEmits(['success', 'register', 'ocrClick']);
const isUpdate = ref(true);
const importDisabled = ref(true);
const entity = ref();

const [registerForm, { resetFields, setFieldsValue, validate, getFieldsValue, updateSchema }] = useForm({
  labelWidth: 120,
  schemas: formSchema,
  showActionButtonGroup: false,
});

const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
  await resetFields();
  setDrawerProps({confirmLoading: false});
  isUpdate.value = !!data?.isUpdate;
  entity.value = data?.record;
  paramData.value = [];
  const items = entity.value && entity.value.paramJson ? JSON.parse(entity.value.paramJson) : [];
  items.forEach((d: any, index: number) => {
    if (Object.keys(d).includes('sn')) {
      paramData.value.push({...d});
    } else {
      paramData.value.push({sn: (index + 1) + '', ...d});
    }
  });
  await setFieldsValue({
    ...data.record,
  });
  await updateSchema([
    {
      field: 'wallType',
      componentProps: {
        disabled: unref(isUpdate)
      }
    },
    {
      field: 'direction',
      componentProps: {
        disabled: unref(isUpdate)
      }
    }]);
  handleValuesChanged();
});

const [registerTable] = useTable({
  title: '预埋件列表',
  columns,
  dataSource: paramData,
  useSearchForm: false,
  showTableSetting: false,
  bordered: true,
  showIndexColumn: false,
  canResize: false,
  pagination: false,
  rowKey: (record: any) => record.code,
  actionColumn: {
    width: 140,
    title: '操作',
    dataIndex: 'action',
    fixed: undefined,
  },
});

const getTitle = computed(() => (!unref(isUpdate) ? '新增' : '编辑'));

async function handleSubmit() {
  const values = await validate();
  setDrawerProps({confirmLoading: true});
  const {
    ...rest
  } = values;
  const action = !unref(isUpdate) ? TaskApi.add : TaskApi.update;
  const data = !unref(isUpdate)
    ? {
      ...rest,
    }
    : Object.assign({},
      {
        ...unref(entity),
        ...rest,
      },
    );
  let p: any = [];
  paramData.value.forEach((d: any) => {
    // 添加 墙体类型 方向（正面、背面） 堆芯坐标
    d.wallType = data.wallType;
    d.direction = data.direction;
    d.coreA = data.coreA;
    d.coreB = data.coreB;
    p.push({ ...d });
  });
  data.paramJson = JSON.stringify(p);
  await action(data);
  closeDrawer();
  emit('success');
  setDrawerProps({confirmLoading: false});
}

const handleCreate = () => {
  openModal(true, { isUpdate: false });
};

const handleEdit = (record: Recordable, index: number) => {
  openModal(true, { record, isUpdate: true });
};

const handleDelete = (record: Recordable) => {
  paramData.value = paramData.value.filter((d: any) => d.code !== record.code);
};

const handleOpenFileDialog = () => {
  const rest = getFieldsValue();
  const data = !unref(isUpdate)
    ? {
      ...rest,
    }
    : Object.assign({},
      {
        ...unref(entity),
        ...rest,
      },
    );
  emit("ocrClick", data);
};

const handleImport = () => {
  WebViewService.importExcel().then((res: any) => {
    const data = getFieldsValue();
    if (res === "") {
      WebViewService.setMessage('没有预埋件数据！', 'information').then(() => {});
      return;
    }
    const items = JSON.parse(res);
    if (items.length === 0) {
      WebViewService.setMessage('没有预埋件数据！', 'information').then(() => {});
      return;
    }
    if (!paramData.value) {
      paramData.value = [];
    }
    items.forEach((d: any) => {
      if (d.wallType.toUpperCase() === data.wallType && d.direction === data.direction) {
        const items = paramData.value.filter((p: any) => p.code === d.code);
        // if (data.wallType === "B类") {
        //   const nX: any = d["y"];
        //   const nY: any = d["x"];
        //   d.x = nX;
        //   d.y = nY;
        // }
        if (items.length === 0) {
          paramData.value.push({...d});
        } else {
          items[0] = {...d};
        }
      }
    });
    WebViewService.setMessage('数据导入成功！', "success").then(() => {});
  })
}

const handleDeleteAll = (e: MouseEvent) => {
  paramData.value = [];
};

const updateParamData = async (data: any) => {
  paramData.value.forEach((d: any, index: number) => {
    if (d["code"] === data["code"]) {
      paramData.value[index] = { ...data };
    }
  });
}

const markField = computed(() => {
  return (field: any, record: any) => {
    let c = 0
    paramData.value.forEach((d: any) => {
      if (Number(d[field]) < 0) {
        c += 1;
      }
    });
    if (paramData.value.length - c < c) {
      return Number(record[field]) > 0
    } else {
      return Number(record[field]) < 0
    }
  };
});

const handleValuesChanged = () => {
  const data = getFieldsValue();
  importDisabled.value = data.wallType === undefined || data.direction === undefined;
};

const setParamData = (data: any) => {
  const items = handleParamData(data);
  if (!paramData.value)
    paramData.value = [];
  items.forEach((d: any) => {
    if (d.hasOwnProperty("zm")) {
      delete d.zm;
    }
    if (d.hasOwnProperty("nX")) {
      delete d.nX;
    }
    if (d.hasOwnProperty("nY")) {
      delete d.nY;
    }
    const items = paramData.value.filter((p: any) => p.code === d.code);
    if (items.length === 0) {
      paramData.value.push({...d});
    }
    else {
      items[0] = {...d};
    }
  });
  WebViewService.setMessage('数据导入成功！', "success").then(() => {});
};

const handleParamData = (items: any) => {
  const data = getFieldsValue();
  const wallType = data.wallType;
  const direction = data.direction;
  // x去重
  const uniqueListX = Array.from(new Map(items.map((item: any) => [item.x, item])).values());
  // y去重
  const uniqueListY = Array.from(new Map(items.map((item: any) => [item.y, item])).values());
  // 墙体类型为 B
  items.forEach((d: any) => {
    if (wallType === "B类" && uniqueListX.length <= 3 && uniqueListY.length > 3) {
      const nX: any = d["y"];
      const nY: any = d["x"];
      d.nX = nX;
      d.nY = nY;
    }
  });
  // 判断正面、背面
  const uniqueY = Array.from(new Map(items.map((item: any) => [item.nY, item])).values());
  const maxY = Math.max(...uniqueY.map((item: any) => Number(item.nY)));
  const minY = Math.min(...uniqueY.map((item: any) => Number(item.nY)));
  items.forEach((d: any) => {
    if (Number(d.nY) === minY) {
      d.zm = 1;
    } else if (Number(d.nY) === maxY) {
      d.zm = 0;
    } else if (maxY - Number(d.nY) < Number(d.nY) - minY) {
      d.zm = 0;
    } else {
      d.zm = 1;
    }
  });
  return direction === "正面" ? items.filter((d: any) => { return d.zm === 1 }).map((d: any) => ({...d})) : items.filter((d: any) => { return d.zm === 0 }).map((d: any) => ({...d}));
}

defineExpose({
  setParamData
});

</script>
<style lang="scss" scoped>
@use '@/assets/custom.scss';
</style>