canrd-outside / order-erp-front · Files

<template>
  <div class="order-page">
    <BasicTable @register="registerTable" bordered>
      <template #headerCell="{ column }">
        <!-- <template v-if="column.key === 'address1'">
          <span class="flex items-center justify-center"> 自定义字段列11 </span>
        </template> -->
        <template v-if="SELECT_FIELD_COLUMNS.includes(column.key) && role === ROLE.ADMIN">
          <span class="flex items-center justify-center">
            {{ column.customTitle }}
            <FormOutlined class="ml-2 cursor-pointer" @click="handleFieldVisible(column)" />
          </span>
        </template>
        <template v-else>
          <HeaderCell :column="column" />
        </template>
      </template>
      <template #headerTop>
        <a-alert type="info" show-icon>
          <template #message>
            <template v-if="checkedKeys.length > 0">
              <span>已选中{{ checkedKeys.length }}条记录(可跨页)</span>
              <a-button type="link" @click="checkedKeys = []" size="small">清空</a-button>
            </template>
            <template v-else>
              <span>未选中任何订单</span>
            </template>
          </template>
        </a-alert>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <TableAction
            :actions="[
              {
                // 数据分析没有编辑权限
                ...(role !== ROLE.DATA_REPORT_USER && {
                  label: '编辑',
                  // icon: 'ic:outline-delete-outline',
                  onClick: handleEdit.bind(null, record),
                }),
              },
              {
                ...(role !== ROLE.DATA_REPORT_USER && {
                  label: '申请权限',
                  // icon: 'ic:outline-delete-outline',
                  onClick: handleCheck.bind(null, record),
                }),
              },
              // {
              //   ...(role !== ROLE.DATA_REPORT_USER && {
              //     label: '申请',
              //     // icon: 'ic:outline-delete-outline',
              //     onClick: handleCheck.bind(null, record),
              //   }),
              // },
            ]"
            :dropDownActions="
              role !== ROLE.DATA_REPORT_USER
                ? [
                    {
                      label: '历史记录',
                      onClick: handleHistory.bind(null, record),
                    },
                    {
                      label: '跟单结果记录',
                      onClick: handleTrackHistory.bind(null, record),
                    },
                    {
                      // 数据分析没有编辑权限
                      ...((role === ROLE.ADMIN || role === ROLE.TRACKER) && {
                        label: '复制',
                        // icon: 'ic:outline-delete-outline',
                        onClick: handleCopy.bind(null, record),
                      }),
                    },
                    {
                      ...(role === ROLE.ADMIN && {
                        label: '删除',
                        popConfirm: {
                          title: '是否确认删除',
                          placement: 'left',
                          confirm: handleDelete.bind(null, record?.id),
                        },
                      }),
                    },
                  ]
                : []
            "
          />
        </template>
        <template v-if="column.key === 'picUrl'">
          <img
            :width="100"
            :height="100"
            :src="record.smallPicUrl"
            :key="record.smallPicUrl"
            @click="handlePreview(record.picUrl)"
          />
        </template>
      </template>

      <template #toolbar>
        <a-select
          ref="select"
          v-model:value="value1"
          style="width: 118px"
          @change="handleChange"
          class="passCalculate"
          dropdown-class-name="dropdown-class"
        >
          <a-select-option value1="confirm">一次通过率</a-select-option>
          <a-select-option value="确认样品" @click="handlePassModal('确认样品')"
            >确认样品</a-select-option
          >
          <a-select-option value="生产样品" @click="handlePassModal('生产样品')"
            >生产样品</a-select-option
          >
          <a-select-option value="测试样品" @click="handlePassModal('测试样品')"
            >测试样品</a-select-option
          >
        </a-select>
        <a-button
          type="primary"
          @click="handleProductModal"
          v-if="role === ROLE.ADMIN || role === ROLE.BUSINESS || role === ROLE.TRACKER"
          >生产指标书</a-button
        >
        <a-button type="primary" @click="handleRateModal" v-if="role === ROLE.ADMIN"
          >比重计算</a-button
        >
        <!-- 质检角色不能导出任何信息 -->
        <a-button type="primary" @click="handleExportModal">导出</a-button>
        <a-button
          type="primary"
          @click="handleProfitModal"
          v-if="role === ROLE.ADMIN || role === ROLE.BUSINESS"
          >分析利润</a-button
        >
        <a-button
          type="primary"
          @click="handleAdd"
          v-if="role === ROLE.ADMIN || role === ROLE.TRACKER"
          >创建订单</a-button
        >
      </template>
    </BasicTable>
    <FormDetail
      @register="formDetailRegister"
      :onGoCheckDetail="handleGoCheckDetail"
      @success="handleFormSuccess"
    />
    <ProductText
      @register="productModalRegister"
      :role="role"
      :customerCodes="selectedCustomCodes"
    />
    <ProfitAnalysis @register="profitModalRegister" />
    <RateModal @register="rateModalRegister" />
    <ExportModal @register="exportModalRegister" :role="role" :ids="checkedKeys" />
    <CheckDetail @register="checkModalRegister" :onGoFormDetail="handleGoFormDetail" />
    <HistoryDetail @register="historyDetailRegister" />
    <TrackHistory @register="trackHistoryRegister" />
    <FieldDetail @register="fieldDetailRegister" />
    <PassCalculate @register="passModalRegister" />
  </div>
</template>
<script lang="ts">
  import { defineComponent, onMounted, ref, toRaw, computed } from 'vue';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { FormOutlined } from '@ant-design/icons-vue';
  import HeaderCell from '/@/components/Table/src/components/HeaderCell.vue';
  import { Alert } from 'ant-design-vue';

  import { useDrawer } from '/@/components/Drawer';
  import ProfitAnalysis from './ProfitAnalysis.vue';
  import ProductText from './ProductText.vue';
  import RateModal from './RateModal.vue';
  import ExportModal from './ExportModal.vue';
  import PassCalculate from './PassCalculate.vue';
  import { useModal } from '/@/components/Modal';

  import { getFormConfig, getOrderColumns, SELECT_FIELD_COLUMNS } from './tableData';
  import FormDetail from './FormDetail/index.vue';
  import CheckDetail from './CheckDetail.vue';
  import HistoryDetail from './HistoryDetail.vue';
  import TrackHistory from './TrackHistory.vue';
  import FieldDetail from './FieldDetail.vue';
  import { createImgPreview } from '/@/components/Preview/index';
  import { getOrderList, orderDelete } from '/@/api/project/order';
  import { useOrderStoreWithOut } from '/@/store/modules/order';
  import { useUserStoreWithOut } from '/@/store/modules/user';
  import { ROLE } from './type.d';
  import { getUserList } from '/@/api/project/account';

  const orderStore = useOrderStoreWithOut();
  const userStore = useUserStoreWithOut();

  export default defineComponent({
    components: {
      HeaderCell,
      BasicTable,
      AAlert: Alert,
      TableAction,
      FormDetail,
      ProfitAnalysis,
      ProductText,
      PassCalculate,
      FormOutlined,
      CheckDetail,
      HistoryDetail,
      TrackHistory,
      FieldDetail,
      RateModal,
      ExportModal,
    },
    setup() {
      const checkedKeys = ref<Array<string | number>>([]);
      const selectedCustomCodes = ref<Array<string>>([]);
      const [profitModalRegister, { openModal: openProfitModal }] = useModal();
      const [rateModalRegister, { openModal: openRateModal }] = useModal();
      const [exportModalRegister, { openModal: openExportModal }] = useModal();
      const [productModalRegister, { openModal: openProductModal }] = useModal();
      const [passModalRegister, { openModal: openPassModal }] = useModal();

      const tooltipVisible = ref(false);
      const [formDetailRegister, { openDrawer: openFormDetailDrawer }] = useDrawer();
      const [historyDetailRegister, { openDrawer: openHistoryDetailDrawer }] = useDrawer();
      const [trackHistoryRegister, { openDrawer: openTrackHistoryDrawer }] = useDrawer();
      const [fieldDetailRegister, { openDrawer: openFieldDetailDrawer }] = useDrawer();

      const user = userStore.getUserInfo;
      const role = computed(() => {
        return user?.roleSmallVO?.code;
      });
      // 业务员列表
      const businessUsers = ref([]);

      const [checkModalRegister, { openDrawer: openCheckDetailDrawer }] = useDrawer();
      onMounted(async () => {
        await orderStore.getDict();
      });

      onMounted(async () => {
        // 获取业务员
        const res = await getUserList({ page: 1, pageSize: 1000 });
        businessUsers.value = res.items
          .filter((item) => item.roleCode === ROLE.BUSINESS)
          .map((item) => ({ value: item.userName, label: item.userName }));
      });

      const formConfig = computed(() => {
        return getFormConfig(businessUsers.value);
      });

      const [registerTable, { getForm, reload, getColumns }] = useTable({
        api: getOrderList,
        title: '订单列表',
        pagination: {
          total: 60,
        },
        columns: getOrderColumns(user?.roleSmallVO?.code),
        useSearchForm: true,
        formConfig: formConfig,
        showTableSetting: true,
        // tableSetting: { fullScreen: true },
        showIndexColumn: false,
        rowKey: 'id',
        rowSelection: {
          type: 'checkbox',
          selectedRowKeys: checkedKeys,
          onSelect,
          onSelectAll,
        },
        actionColumn: {
          width: 160,
          title: 'Action',
          dataIndex: 'action',
          // slots: { customRender: 'action' },
        },
      });
      function getFormValues() {
        console.log(getForm().getFieldsValue());
      }
      function onSelect(record, selected) {
        if (selected) {
          if (!selectedCustomCodes.value.includes(record.customerCode)) {
            // 如果不包含，则添加到 selectedCustomCodes
            selectedCustomCodes.value = [...selectedCustomCodes.value, record.customerCode];
          }
          checkedKeys.value = [...checkedKeys.value, record.id];
        } else {
          checkedKeys.value = checkedKeys.value.filter((id) => id !== record.id);
          selectedCustomCodes.value = selectedCustomCodes.value.filter(
            (customerCode) => customerCode !== record.customerCode,
          );
        }
      }
      function onSelectAll(selected, selectedRows, changeRows) {
        const changeIds = changeRows.map((item) => item.id);
        const changeCustomerCodes = changeRows.map((item) => item.customerCode);
        if (selected) {
          checkedKeys.value = [...checkedKeys.value, ...changeIds];
          // 创建一个集合来去除重复的代码
          const allCodes = new Set([...selectedCustomCodes.value, ...changeCustomerCodes]);
          // 将集合转换回数组
          selectedCustomCodes.value = Array.from(allCodes);
        } else {
          checkedKeys.value = checkedKeys.value.filter((id) => {
            return !changeIds.includes(id);
          });
          selectedCustomCodes.value = selectedCustomCodes.value.filter((customerCode) => {
            return !changeCustomerCodes.includes(customerCode);
          });
        }
      }

      function handleEdit(record, e) {
        openFormDetailDrawer(true, { ...toRaw(record) });
        e?.stopPropagation();
        return false;
      }

      function handleCopy(record, e) {
        openFormDetailDrawer(true, { ...toRaw(record), id: undefined, isCopy: true });
        e?.stopPropagation();
        return false;
      }

      function handleAdd() {
        openFormDetailDrawer(true, {});
      }

      function handleCheck(record, e) {
        openCheckDetailDrawer(true, record);
        e?.stopPropagation();
        return false;
      }

      function handleHistory(record, e) {
        openHistoryDetailDrawer(true, record);
        e?.stopPropagation();
        return false;
      }

      function handleTrackHistory(record, e) {
        openTrackHistoryDrawer(true, record);
        return false;
      }

      function handleProfitModal() {
        const form = getForm();
        const values = form.getFieldsValue();
        openProfitModal(true, {
          data: checkedKeys.value,
          searchData: values,
        });
      }

      //一次通过率
      const value1 = ref('一次通过率');
      function handleChange() {}
      function handlePassModal(title) {
        const form = getForm();
        const values = form.getFieldsValue();
        if (title == '确认样品') {
          openPassModal(true, {
            check: checkedKeys.value,
            data: values,
            title: title,
          });
          return false;
        } else if (title == '生产样品') {
          openPassModal(true, title);
          return false;
        } else if (title == '测试样品') {
          openPassModal(true, title);
          return false;
        }
      }

      function handleProductModal() {
        const form = getForm();
        const values = form.getFieldsValue();

        openProductModal(true, {
          data: values,
        });
      }

      function handleRateModal() {
        const form = getForm();
        const values = form.getFieldsValue();

        openRateModal(true, {
          data: values,
        });
      }

      function handleFieldVisible(record) {
        openFieldDetailDrawer(true, record);
      }

      function handleGoCheckDetail() {
        openCheckDetailDrawer(true);
        openFormDetailDrawer(false);
      }

      function handleGoFormDetail() {
        openCheckDetailDrawer(false);
        openFormDetailDrawer(true);
      }

      function handlePreview(url) {
        createImgPreview({ imageList: [url], defaultWidth: 500 });
        // e?.stopPropagation();
        // e?.preventDefault();
        return false;
      }

      async function handleExportModal() {
        const form = getForm();
        const values = form.getFieldsValue();
        openExportModal(true, {
          data: values,
        });
      }

      const handleFormSuccess = () => {
        reload();
      };

      async function handleDelete(id: string) {
        try {
          await orderDelete({ ids: [id] });
          reload();
        } catch (error) {
          console.log(error);
        }
      }

      return {
        user,
        SELECT_FIELD_COLUMNS,
        fieldDetailRegister,
        profitModalRegister,
        handleChange,
        rateModalRegister,
        exportModalRegister,
        productModalRegister,
        passModalRegister,
        historyDetailRegister,
        trackHistoryRegister,
        formDetailRegister,
        handleProfitModal,
        registerTable,
        getFormValues,
        checkedKeys,
        onSelect,
        handleEdit,
        handleCopy,
        handleCheck,
        onSelectAll,
        tooltipVisible,
        handleFieldVisible,
        checkModalRegister,
        handleGoCheckDetail,
        handleGoFormDetail,
        handleHistory,
        focus,
        value1,
        handlePassModal,
        handleTrackHistory,
        handleAdd,
        createImgPreview,
        handleExportModal,
        handlePreview,
        handleFormSuccess,
        handleProductModal,
        handleRateModal,
        openExportModal,
        openProductModal,
        openPassModal,
        handleDelete,
        selectedCustomCodes,
        role,
        ROLE,
      };
    },
  });
</script>

<style lang="less">
  .ant-table-thead th,
  .ant-table-tbody td {
    padding: 0;
    white-space: pre-wrap;
  }

  .ant-table-cell img {
    width: 40px;
    height: 40px;
  }

  .order-page .vben-basic-table .ant-form-item .ant-picker {
    width: 100%;
  }

  .order-page .ant-table.ant-table-middle .ant-table-tbody > tr > td {
    padding-top: 0;
    padding-bottom: 0;
  }

  .passCalculate .ant-select-selector {
    background-color: #1890ff !important;
    color: white !important;
  }

  .passCalculate .ant-select-selection-item {
    color: white !important;
  }

  .dropdown-class {
    background-color: #1890ff; /* 选择框背景颜色 */
    color: white;
    border: none; /* 去除选择框边框 */
  }

  .dropdown-class .ant-select-selector {
    background-color: #1890ff; /* 选择框背景颜色 */
    color: white;
    border: none !important; /* 去除选择框边框 */
    box-shadow: none !important; /* 去除选择框阴影 */
  }

  .dropdown-class .ant-select-dropdown {
    background-color: #1890ff; /* 下拉框背景颜色 */
    border: none !important; /* 去除下拉框边框 */
    box-shadow: none !important; /* 去除下拉框阴影 */
  }

  .dropdown-class .ant-select-item {
    background-color: #1890ff; /* 下拉选项背景颜色 */
    color: white !important; /* 下拉选项字体颜色 */
    border: none !important; /* 去除下拉选项边框 */
  }

  .dropdown-class .ant-select-item:hover,
  .dropdown-class .ant-select-item-option-active,
  .dropdown-class .ant-select-item-option-selected {
    background-color: #1967d3 !important; /* 选中和悬停状态下拉选项背景颜色 */
    color: white !important; /* 选中和悬停状态下拉选项字体颜色 */
    border: none !important; /* 去除选中和悬停状态下拉选项边框 */
  }

  .dropdown-class .ant-select-item-option {
    background-color: #1890ff; /* 下拉选项背景颜色 */
    color: white !important; /* 下拉选项字体颜色 */
    border: none !important; /* 去除下拉选项边框 */
  }
</style>
./constant