4dkk_mp/src/views/order/cameraList.vue

<template>
  <BasicTable @register="registerTable" @row-click="handlerowClick" @expand="handleExpanded">
    <template #toolbar>
      <a-button type="primary" @click="exportExcel" v-if="getCheckPerm('camera-order-export')">
        导出</a-button
      >
    </template>
    <template #expandedRowRender="{ record }">
      <div>
        <a-descriptions title="订单信息" :column="2">
          <a-descriptions-item label="下单时间"> {{ record.orderTime }}</a-descriptions-item>
          <a-descriptions-item label="订单号"> {{ record.orderSn }} </a-descriptions-item>
          <a-descriptions-item label="用户账号"> {{ record.userName }} </a-descriptions-item>
          <a-descriptions-item label="订单状态"> {{ record.paymentStatus }} </a-descriptions-item>
          <a-descriptions-item label="手机号码"> {{ record.shipMobile }} </a-descriptions-item>
          <a-descriptions-item label="地址">
            {{ record.shipAreaPath }}{{ record.shipAddress }}
          </a-descriptions-item>
          <a-descriptions-item label="收件人"> {{ record.shipName }} </a-descriptions-item>
        </a-descriptions>
        <a-descriptions title="商品信息" :column="2">
          <a-descriptions-item label="" :span="2" v-for="goods in record.itemGoods" :key="goods">
            <div style="display: flex; align-items: center">
              <TableImg 
                style="margin: 0"
                :size="120"
                :simpleShow="true"
                :imgList="[goods.goodsPic]"
              />
              <div style="margin-left: 30px">
                <p>{{ goods.goodsName }}</p>
                <p>{{ goods.goodsPrice }}* {{ goods.goodsCount }}</p>
              </div>
            </div>
          </a-descriptions-item>
        </a-descriptions>
      </div>
    </template>
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'action'">
        <TableAction
          stopButtonPropagation
          :actions="[
            {
              label: '删除',
              //icon: 'ic:outline-delete-outline',
              onClick: handleDelete.bind(null, record),
            },
          ]"
          :dropDownActions="[
            {
              label: '启用',
              popConfirm: {
                title: '是否启用？',
                confirm: handleOpen.bind(null, record),
              },
            },
          ]"
        />
      </template>
    </template>
  </BasicTable>
</template>
<script lang="ts">
import { defineComponent, h, reactive, ref } from 'vue';
import {
  BasicTable,
  useTable,
  TableAction,
  BasicColumn,
  TableImg,
  FormProps,
} from '/@/components/Table';
import { PageWrapper } from '/@/components/Page';
import { Time } from '/@/components/Time';
import { Descriptions } from 'ant-design-vue';
import { useI18n } from '/@/hooks/web/useI18n';
import { useMessage } from '/@/hooks/web/useMessage';
import { Switch } from 'ant-design-vue';
import { downloadByData } from '/@/utils/file/download';
import { CameraList, CameraItem, CameraExport } from '/@/api/order';
import { usePermissionStore } from '/@/store/modules/permission';
import { cameraColumns, orderSearchForm } from '../account/details/data';

export default defineComponent({
  components: {
    BasicTable,
    TableAction,
    PageWrapper,
    TableImg,
    [Descriptions.name]: Descriptions,
    [Descriptions.Item.name]: Descriptions.Item,
  },
  setup() {
    const { t } = useI18n();
    const isSearch = ref(false);
    const { createConfirm } = useMessage();
    const permissionStore = usePermissionStore();
    const { getCheckPerm } = permissionStore;
    const expandedItem = reactive({});
    const [registerTable] = useTable({
      api: CameraList,
      title: '相机列表',
      // titleHelpMessage: ['已启用expandRowByClick', '已启用stopButtonPropagation'],
      columns: cameraColumns,
      useSearchForm: true,
      formConfig: orderSearchForm,
      showIndexColumn: false,
      showTableSetting: true,
      canResize: true,
      expandRowByClick: true,
      rowKey: 'id',
      beforeFetch: (T) => {
        const { ctivated, tradeNum, userName, orderSn } = T;
        if (ctivated || tradeNum || userName || orderSn) {
          isSearch.value = true;
        } else {
          isSearch.value = false;
        }
        if (T.ctivated) {
          T.startTime = T.ctivated[0];
          T.endTime = T.ctivated[1];
        }
        return T;
      },
      fetchSetting: {
        pageField: 'pageNum',
        sizeField: 'pageSize',
        listField: 'list',
        totalField: 'total',
      },
    });
    function handleDelete(record: Recordable) {
      console.log('点击了删除', record);
    }
    function handleOpen(record: Recordable) {
      console.log('点击了启用', record);
    }
    function handleExpanded(_, record: Recordable) {
      handlerowClick(record);
    }
    function exportExcel() {
      createConfirm({
        iconType: 'warning',
        title: () => h('span', '温馨提示'),
        content: () => h('span', isSearch.value ? '确认导出搜索结果？' : '确认导出全部?'),
        onOk: async () => {
          CameraExport();
        },
      });
    }
    function handlerowClick(record: Recordable) {
      CameraItem({ id: record.id }).then((res) => {
        if (res.length) {
          let itemGoods = res;
          Reflect.set(record, 'itemGoods', itemGoods);
          // Reflect.set(record, 'goodsName', item.goodsName);
          // Reflect.set(record, 'goodsPic', item.goodsPic);
          // Reflect.set(record, 'goodsPrice', item.goodsPrice);
        }
      });
    }
    return {
      registerTable,
      handleDelete,
      handleOpen,
      exportExcel,
      handlerowClick,
      expandedItem,
      handleExpanded,
      getCheckPerm,
    };
  },
});
</script>