index.vue 4.6 KB
<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)" />
        </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" />
  </div>
</template>
<script setup lang="ts">
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { getPackageProfit } from '@/api/project/invoice';
  import { COLUMNS } from './data';
  import { BasicModal, useModal } from '/@/components/Modal';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { ref } from 'vue';
  import { useDrawer } from '/@/components/Drawer';
  import FinanceEdit from './FinanceEdit.vue';
  import CheckDetail from './CheckDetail.vue';

  const { createMessage } = useMessage();
  const { error } = createMessage;
  const message = ref();
  const [checkModalRegister, { openDrawer: openCheckDetailDrawer }] = useDrawer();
  const [registerFinanceEdit, { openDrawer: openFinanceEdit }] = useDrawer();
  const handleOk = (record) => {
    // 修改父组件的状态
    console.log(message.value, '5656messsage', record);
    closeModal();
  };
  const handleClose = (visible: boolean) => {
    if (!visible) {
      message.value = '';
    }
  };
  const [registerTable, { reload }] = useTable({
    api: getPackageProfit,
    bordered: true,
    columns: COLUMNS,
    rowKey: 'id',
    useSearchForm: true,
    actionColumn: {
      width: 240,
      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),
        },
      ];
    }
    return [
      {
        label: '保存',
        onClick: handleSave.bind(null, record),
      },
      {
        label: '取消',
        popConfirm: {
          title: '是否取消编辑',
          confirm: handleCancel.bind(null, record),
        },
      },
    ];
  }

  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) {
    console.log(record, '5656edit');
    // 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();
  // }
</script>
<style></style>