4dkk_mp/src/views/empower/detailModel.vue

<template>
  <div>
    <BasicModal
      v-bind="$attrs"
      @register="register"
      title="授权详情"
      :width="800"
      @visible-change="handleVisibleChange"
      @ok="handleSubmit"
    >
      <div class="pt-3px pr-3px">
        <div class="table_list">
          <BasicTable @register="registerSubtable">
            <template #toolbar>
              <a-button type="primary" @click="handllogList" v-if="getCheckPerm('empowerCamera-loglist')" 
              >更换记录</a-button
              >
            </template>
            <template #action="{ record }">
              <TableAction
                :actions="[
                  {
                    label: '更换',
                    ifShow: getCheckPerm('empowerCamera-change'),
                    onClick: handleUpdataSn.bind(null, record, 'edit'),
                  },
                ]"
              />
            </template>
          </BasicTable>
        </div>
      </div>
    </BasicModal>
    <AddModal @register="registerupdata" @update="reload" />
    <AddListModal @register="registerList" @update="reload" />
  </div>
</template>
<script lang="ts">
  import { defineComponent, nextTick, onMounted, reactive, computed, h, ref } 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 { useMessage } from '/@/hooks/web/useMessage';
  import { useI18n } from '/@/hooks/web/useI18n';
  import AddModal from './uploadModal.vue';
  import AddListModal from './logListModal.vue';
  import { authorizeCameradetail } from '/@/api/authorizeModeling';
  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, AddListModal },
    props: {
      userData: { type: Object },
    },
    emits: ['update'],
    setup(props, { emit }) {
      const otherInfo = otherInfoStore();
      const overviewInfo = computed(() => otherInfo.getOverviewInfo);
      const { createMessage, createConfirm } = useMessage();
      const [registerupdata, { openModal: openSnModal }] = useModal();
      const [registerList, { openModal }] = useModal();
      const permissionStore = usePermissionStore();
      const { getCheckPerm } = permissionStore;
      console.log('overviewInfo', overviewInfo);
      // const overviewInfo = getOverviewInfo() || {}
      const id = ref('');
      const fileFlow = reactive({
        file: null,
        id: '',
        type: 'down', //down-下载，equity-权益
      });
      const columns: BasicColumn[] = [
        {
          title: '相机类型',
          dataIndex: 'cameraType',
          width: 120,
          customRender: ({ record }) => {
            return t(`routes.product.type.${record.cameraType}`);
          },
        },
        {
          title: 'SN码',
          dataIndex: 'snCode',
          width: 150,
        },
        {
          title: t('common.operating'),
          dataIndex: 'action',
          ifShow: getCheckPerm('account-equityCameraUnbind'),
          slots: { customRender: 'action' },
          align: 'center',
          fixed: 'right',
          width: 30,
        },
      ];
      const [registerSubtable, { reload }] = useTable({
        title: `授权相机列表`,
        searchInfo: {
          userId: overviewInfo.value?.id,
        },
        api: () => {
          return authorizeCameradetail(id.value);
        },
        columns: columns,
        immediate: false,
        rowKey: 'id',
        fetchSetting: {
          pageField: 'pageNum',
          sizeField: 'pageSize',
          listField: 'list',
          totalField: 'total',
        },
        showIndexColumn: false,
        canResize: true,
        bordered: true,
      });

      onMounted(() => {});
      let addListFunc = () => {};
      const [register, { closeModal }] = useModalInner((data) => {
        data && onDataReceive(data);
      });
      function onDataReceive(data) {
        console.log('onDataReceive', data.id);
        id.value = data.id;
        fileFlow.id = data.id;
        reload();
      }
      function handllogList() {
        openModal(true, { id: id.value });
      }
      async function handleUpdataSn(record: Recordable) {
        openSnModal(true, { id: record.id, oldSnCode: record.snCode });
      }
      const handleSubmit = async () => {
        closeModal();
        emit('update');
      };
      function handleVisibleChange(v) {
        v && props.userData && nextTick(() => onDataReceive(props.userData));
      }
      return {
        register,
        registerList,
        registerupdata,
        fileFlow,
        handleVisibleChange,
        handleSubmit,
        addListFunc,
        registerSubtable,
        reload,
        handleUpdataSn,
        handllogList,
        getCheckPerm,
        t,
      };
    },
  });
</script>