canrd-outside / order-erp-front · Files

<template>
  <div>
    <BasicTable @register="registerTable" :bordered="true">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'picUrl'">
          <img :z-index="100000" :width="50" :height="50" :src="record?.picUrl" />
        </template>
        <template v-if="column.key === 'action'">
          <TableAction 
            :actions="createActions(record)" 
            :dropDownActions="createDropActions(record)" 
           />
        </template>
        <!-- <template v-if="column.key === 'relationValue'">
          <a-input
            v-if="record.settingValue === 'A01'"
            v-model:value="record.settingValue"
            :max-length="50"
          />
          <span v-else style="color: red">
            {{ record.settingValue }}
          </span>
        </template> -->
      </template>
    </BasicTable>
    <!-- <BasicModal
      title="拒绝原因"
      width="30%"
      @register="registerModal"
      @visible-change="handleClose"
      @ok="handleOk"
      wrapClassName="approve-modal"
    >
      <div className="pa-8">
        <a-textarea :rows="6" placeholder="请输入拒绝原因" v-model:value="message" />
      </div>
    </BasicModal> -->
    <CheckDetail @register="checkModalRegister" :onGoFormDetail="handleGoFormDetail" />
    <FinanceEdit @register="registerFinanceEdit" @success="handleSuccess" />
    <HistoryDetail @register="registerHistoryDetail" />
  </div>
</template>
<script setup lang="ts">
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { getPackageProfit } from '@/api/project/invoice';
  import { searchFormSchema, COLUMNS } from './data';
  import { BasicModal, useModal } from '/@/components/Modal';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { onMounted, ref, computed } from 'vue';
  import { useDrawer } from '/@/components/Drawer';
  import FinanceEdit from './FinanceEdit.vue';
  import CheckDetail from './CheckDetail.vue';
  import HistoryDetail from './HistoryDetail.vue';
  import { FilePptOutlined } from '@ant-design/icons-vue';
  import { useOrderStoreWithOut } from '/@/store/modules/order';
  import { useUserStoreWithOut } from '/@/store/modules/user';
  import { RoleEnum } from '/@/enums/roleEnum';
  import { ROLE } from '../../../type.d';

  const { createMessage } = useMessage();
  const { error } = createMessage;
  const message = ref();
  const orderStore = useOrderStoreWithOut();
  const [checkModalRegister, { openDrawer: openCheckDetailDrawer }] = useDrawer();
  const [registerFinanceEdit, { openDrawer: openFinanceEdit }] = useDrawer();
  const [registerHistoryDetail, { openDrawer: openHistoryDetail }] = useDrawer();
  const userStore = useUserStoreWithOut();
  const user = userStore.getUserInfo;
  const role = computed(() => {
    return user?.roleSmallVO?.code;
  });
  const handleOk = (record) => {
    // 修改父组件的状态
    closeModal();
  };
  const handleClose = (visible: boolean) => {
    if (!visible) {
      message.value = '';
    }
  };
  const [registerTable, { reload }] = useTable({
    api: getPackageProfit,
    bordered: true,
    columns: COLUMNS,
    rowKey: 'id',
    formConfig: {
      labelWidth: 120,
      schemas: searchFormSchema,
      autoSubmitOnEnter: true,
    },
    useSearchForm: true,
    showTableSetting: true,
    showIndexColumn: false,
    tableSetting: {
      setting: false,
    },
    actionColumn: {
      width: 260,
      title: 'Action',
      dataIndex: 'action',
    },
  });

  function createActions(record: any): any[] {
    if (!record.editable) {
      return [
        {
          label: '财务编辑',
          onClick: handleFinanceEdit.bind(null, record),
        },
        // {
        //   label: '编辑',
        //   onClick: handleEdit.bind(null, record),
        // },
        // {
        //   label: '删除',
        //   popConfirm: {
        //     title: '确认删除？',
        //     confirm: handleDelete.bind(null, record),
        //   },
        // },
        {
          label: '申请权限',
          // popConfirm: {
          //   title: '确认申请？',
          //   confirm: handleFalse.bind(null, record),
          // },
          onClick: handleFalse.bind(null, record),
        },
        {
          label: '审核通过',
          popConfirm: {
            title: '确认审核？',
            confirm: () => {
              if (record.status === 0 && role.value === ROLE.ADMIN) {
                handleStatus(record, true);
              }
              return;
            },
          },
        },
      ];
    }
    return [
      {
        label: '保存',
        onClick: handleSave.bind(null, record),
      },
      {
        label: '取消',
        popConfirm: {
          title: '是否取消编辑',
          confirm: handleCancel.bind(null, record),
        },
      },
    ];
  }

  function createDropActions(record: any) {
    if (!record.editable) {
      const actions = [
        {
          label: '历史记录',
          onClick: handleHistoryDetail.bind(null, record),
        },
      ];
      return actions;
    }
  }

  function handleFinanceEdit(record) {
    openFinanceEdit(true, {
      data: record,
    });
  }

  function handleFalse(record, e) {
    openCheckDetailDrawer(true, record);
    e?.stopPropagation();
    return false;
  }
  function handleSuccess() {
    setTimeout(() => {
      reload();
    }, 50);
  }
  // async function handleFalse(record: any) {
  //   console.log(record);
  //   // openModal(true, { record });
  // }

  async function handleSave(record) {
    await saveConfig({ id: record.id, relationValue: record.relationValue });
    handleCancel(record);
    reload();
  }
  function handleEdit(record: any) {
    // if (record.settingValue == 'A01') {
    //   error('请勿连续点击生成按钮,需要等待三秒再点击生成');
    // } else {
    record.onEdit?.(true);
    // }
  }

  function handleCancel(record) {
    record.onEdit?.(false, false);
  }

  // async function handleDelete(record) {
  //   await deleteConfig({ ids: [record.id] });
  //   reload();
  // }
  
  async function handleStatus(record, status) {
    try {
      // Add your API call here for updating status
      // Example: await updateStatus({ id: record.id, status: status ? 1 : 2 });
      reload();
    } catch (error) {
      console.error(error);
    }
  }
  
  function handleHistoryDetail(record) {
    openHistoryDetail(true, {
      data: record,
    });
  }
  
  function handleGoFormDetail() {
    // Add your logic for form detail navigation
  }

  onMounted(async () => {
    await orderStore.getDict();
  });
</script>
<style></style>