4dkk_mp/src/views/account/overview/interesModal.vue

<template>
  <div>
      <AddModal @register="registerAddModal" />
      <BasicModal
      v-bind="$attrs"
      @register="register"
      title="权益详情"
      :width="900"
      @visible-change="handleVisibleChange"
      @ok="handleSubmit"
    >
      <div class="pt-3px pr-3px">
        <div class="table_list">
          <BasicTable @register="registerSubtable" >
            <template #action="{ record }">
              <TableAction
                :actions="[
                  {
                    label: '续费',
                    onClick: handleDelete.bind(null, record, 'edit'),
                  },
                ]"
              />
            </template>
          </BasicTable>
        </div>
      </div>
    </BasicModal>
  </div>
</template>
<script lang="ts">
  import { defineComponent, nextTick, onMounted, reactive, computed,h } from 'vue';
  import { BasicTable, useTable, BasicColumn,TableAction } from '/@/components/Table';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicForm } from '/@/components/Form/index';
  import { Time } from '/@/components/Time';
  import AddModal from './AddModal.vue';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { GetCameraDetailApi,UnbindCameraApi } from '/@/api/account';
  import { otherInfoStore } from '/@/store/modules/other'
  import { DetailsApi,IncrementDelayApi } from '/@/api/account';
  import { usePermissionStore } from '/@/store/modules/permission';
  import { useModal } from '/@/components/Modal';

  const { t } = useI18n();
  export default defineComponent({
    components: { BasicModal, BasicForm, BasicTable,TableAction, AddModal },
    props: {
      userData: { type: Object },
    },
    emits: ['update', 'register'],
    setup(props, { emit }) {
      const otherInfo = otherInfoStore();
      const overviewInfo = computed(() => otherInfo.getOverviewInfo);
      const { createMessage, createConfirm } = useMessage();
      const [registerAddModal, { openModal: openAddModal }] = useModal();
      const permissionStore = usePermissionStore();
      const { getCheckPerm } = permissionStore;
      console.log('overviewInfo',overviewInfo)
      // const overviewInfo = getOverviewInfo() || {}
      const fileFlow = reactive({
        file:null,
        id:'',
        type:'down',//down-下载，equity-权益
      })
            const columns: BasicColumn[] = [
        {
          title: '会员权益ID',
          dataIndex: 'id',
          width: 100,
          customRender: ({ record }) => {
            return record.memberLevels? (record.memberLevels +' '+ record.id): record.id;
          },
        },
        {
          title: '权益类型',
          width: 100,
          dataIndex: 'memberLevels',
          customRender: ({ record }) => {
            let obj = {
              'PR': '专业会员',
              'SE': '高级会员',
            }
            return obj[record.memberLevels] || '';
          },
        },
        {
          title: '使用类型',
          width: 100,
          dataIndex: 'useTypeStr',
        },
        {
          title: '授权相机S/N吗',
          width: 160,
          dataIndex: 'snCode',
        },
        {
          title: '购买日期',
          dataIndex: 'incrementStartTime',
          width: 120,
          customRender: ({ record }) => {
            return record.incrementStartTime
              ? h(Time, {
                  value: record.incrementStartTime,
                  mode: 'date',
                })
              : '-';
          },
        },
        {
          title: '到期日期',
          dataIndex: 'incrementEndTime',
          width: 120,
          customRender: ({ record }) => {
            return record.incrementEndTime
              ? h(Time, {
                  value: record.incrementEndTime,
                  mode: 'date',
                })
              : '-';
          },
        },
        {
          title: '项目号',
          width: 100,
          dataIndex: 'projectNum',
        },
        {
          title: '备注',
          width: 100,
          dataIndex: 'remark',
        },
        {
          title: t('common.operating'),
          ifShow:getCheckPerm('account-equityRenew'),
          dataIndex: '',
          slots: { customRender: 'action' },
          width: 60,
        },
      ];
      const [
        registerSubtable,
        {
          reload,
        },
      ] = useTable({
        // title: `查看相机详情`,
        searchInfo:{
          id:overviewInfo.value?.id
        },
        api: DetailsApi,        
        rowKey: 'id',
        fetchSetting: {
          pageField: 'pageNum',
          sizeField: 'pageSize',
          listField: 'list',
          totalField: 'total',
        },
        columns: columns,
        showIndexColumn: false,
        bordered: true,
        canResize: true,
        // pagination: false,
      });

      onMounted(() => {});
      let addListFunc = () => {};
      const [register, { closeModal }] = useModalInner((data) => {
        reload()
        data && onDataReceive(data);
      });
      function onDataReceive(data) {
        console.log('onDataReceive',data)
        fileFlow.id = data.id
      }
      async function handleDelete (record: Recordable) {
        openAddModal(true, {
          userId: overviewInfo.value && overviewInfo.value.id,
          ...record,
        });
        // createConfirm({
        //   iconType: 'warning',
        //   title: () => h('span', '续费提示'),
        //   content: () => h('span', `您确定给权益ID${record.id}续期${record.validTimeType == 1?'1月':'1年'}！`),
        //   onOk: async () => {
        //     await await IncrementDelayApi({id:record.id,year:1})
        //     createMessage.success(t('common.optSuccess'));
        //     otherInfo.updateOverviewInfo()
        //     reload()
        //   },
        // });
      }
      const handleSubmit = async () => {
          closeModal();
          emit('update');
      };
      function handleVisibleChange(v) {
        v && props.userData && nextTick(() => onDataReceive(props.userData));
      }
      return {
        register,
        fileFlow,
        handleVisibleChange,
        handleSubmit,
        addListFunc,
        registerSubtable,
        reload,
        registerAddModal,
        handleDelete,
        t,
      };
    },
  });
</script>