canrd-outside / order-erp-front · Files

<template>
  <BasicDrawer

    @register="register"

    v-bind="$attrs"
    title="操作记录"
    width="60%"
    :isDetail="true"
    :showDetailBack="false"
    okText="保存"

    :destroyOnClose="true"

  >

    <Tabs v-model:activeKey="activeKey" className="my-0">
      <TabPanel :key="1" tab="操作记录" className="w-full">
        <a-list :pagination="pagination1" className="w-full">
          <template v-for="item in list1" :key="item.id">
            <a-list-item class="list">
              <a-list-item-meta>
                <template #avatar> </template>
                <template #title>
                  <span>{{ item.userName }}</span>
                </template>
                <template #description>
                  <div class="description">
                    {{ item.optType }}
                  </div>
                  <div class="info">
                    <div><span>操作时间：</span>{{ formatToDateTime(item.createTime) }}</div>
                  </div>
                </template>
              </a-list-item-meta>
            </a-list-item>
          </template>
        </a-list>
      </TabPanel>
      <TabPanel :key="2" tab="审批记录" className="w-full">
        <a-list :pagination="pagination2" className="w-full">
          <template v-for="item in list2" :key="item.id">
            <a-list-item class="list">
              <a-list-item-meta>
                <template #avatar> </template>
                <template #title>
                  <span>{{ item.applyUserName }}</span>
                </template>
                <template #description>
                  <div class="description">
                    {{ item.applyRemark }}
                  </div>
                  <div class="info">
                    <div><span>操作时间：</span>{{ formatToDateTime(item.createTime) }}</div>
                  </div>
                </template>
              </a-list-item-meta>
            </a-list-item>
          </template>
        </a-list>
      </TabPanel>

    </Tabs>

    <!-- <template #titleToolbar> <a-button type="primary"> 申请编辑权限 </a-button></template> -->

    <template #appendFooter>
      <!-- <a-button type="primary" @click="onGoCheckDetail"> 申请权限</a-button> -->
    </template>
  </BasicDrawer>
</template>
<script lang="ts">

  import { defineComponent, ref, computed } from 'vue';

  import { Tabs, Progress, Row, Col, List } from 'ant-design-vue';

  import { FormSchema, useForm } from '/@/components/Form/index';

  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';

  import { getOrderAuditLog, getOrderOptLog } from '/@/api/project/order';
  import { formatToDateTime } from '/@/utils/dateUtil';

  const TabPanel = Tabs.TabPane;

  const schemas: FormSchema[] = [
    {
      field: '订单号',
      component: 'Input',
      label: '字段1',
      componentProps: {
        readonly: true,
        disabled: true,
      },
      colProps: {
        span: 12,
      },
      defaultValue: '111',
    },
    {
      field: 'field2',
      component: 'Input',
      label: '字段2',
      colProps: {
        span: 12,
      },
    },
  ];
  const achieveList = [
    {
      key: '1',

      name: '操作记录',

    },
    {
      key: '2',
      name: '审批记录',
    },
  ];
  export default defineComponent({
    components: {
      BasicDrawer,
      Tabs,

      TabPanel,

      [List.name]: List,
      [List.Item.name]: List.Item,
      AListItemMeta: List.Item.Meta,
    },
    props: {
      onGoCheckDetail: {
        type: Function,
      },
    },
    setup() {

      const list1 = ref([]);
      const total1 = ref(0);
      const page1 = ref(1);

      const list2 = ref([]);
      const total2 = ref(0);
      const page2 = ref(1);
      const orderId = ref('');
      const activeKey = ref(1);

      const getOrderOptLogFunc = async (data, index, page) => {

        console.log('%c [ data ]-135', 'font-size:13px; background:pink; color:#bf2c9f;', data);

        if (index === 1) {

          const res = await getOrderOptLog({ orderId: data, page: page, pageSize: 20 });

          list1.value = res.records;
          total1.value = res.total;
          page1.value = page;
        } else {

          const res = await getOrderAuditLog({ orderId: data, page: page, pageSize: 20 });

          list2.value = res.records;
          total2.value = res.total;
          page2.value = page;
        }
      };

      const [register] = useDrawerInner((data) => {

        orderId.value = data.id;
        getOrderOptLogFunc(orderId.value, 1, 1);
        getOrderOptLogFunc(orderId.value, 2, 1);
      });

      const pagination1 = computed(() => {
        return {
          show: true,
          pageSize: 20,
          page: page1.value,
          total: total1.value,
          onChange(cur) {
            getOrderOptLogFunc(orderId.value, 1, cur);
          },
        };
      });

      const pagination2 = computed(() => {
        return {
          show: true,
          pageSize: 20,
          page: page1.value,
          total: total1.value,
          onChange(cur) {
            getOrderOptLogFunc(orderId.value, 2, cur);
          },
        };

      });

      return {
        register,
        schemas,
        achieveList,

        list1,
        list2,

        prefixCls: 'account-center',

        pagination1,
        pagination2,
        activeKey,
        formatToDateTime,

      };
    },
  });
</script>