详情页面优化

Ben Lin

2024-06-23 f1d47feeee1ddb5751847b71f789f2c3b822ec32

 src/views/tigerprojects/bas/MaterialInfo/index.vue

@@ -2,8 +2,8 @@
  <div>
    <BasicTable @register="registerTable">
      <template #toolbar>
        <a-button type="primary" @click="handleRenew"> 批量更新 </a-button>
        <a-button type="primary" @click="handleCreate"> 新增物料 </a-button>
        <!-- <a-button type="primary" @click="handleRenew"> 批量更新 </a-button> -->
        <a-button type="primary" @click="handleCreate" v-if="HasRole"> 新增物料 </a-button>
      </template>
      <template #action="{ record }">
        <!-- b87079a98deb456a9cfa506bfd1a7bc6 -->
@@ -22,6 +22,11 @@
                confirm: handleDelete.bind(null, record),
              },
            },
            // {
            //   icon: 'binding|svg',
            //   tooltip: '绑定工艺',
            //   onClick: handleBinding.bind(null, record),
            // },
          ]"
        />
      </template>
@@ -30,8 +35,7 @@
    <MaterialModal @register="registerModal" />
  </div>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
<script lang="ts" setup>
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { useDrawer } from '/@/components/Drawer';
  import MaterialDrawer from './MaterialDrawer.vue';
@@ -39,73 +43,99 @@
  import { columns, searchFormSchema } from './Material.data';
  import { DeleteMaterial, getMaterialListByPage } from '../../../../api/tigerapi/bas/MaterialInfo';
  import { useModal } from '/@/components/Modal';
  import { getListByPage } from '/@/api/tigerapi/system';
  import { useGo } from '/@/hooks/web/usePage';
  import { useRouter } from 'vue-router';
  import { onMounted, ref } from 'vue';
  import { getMenuButtons } from '/@/api/sys/menu';
import { useUserStore } from '/@/store/modules/user';

  export default defineComponent({
    name: 'MaterialManagement',
    components: { BasicTable, MaterialDrawer, TableAction, MaterialModal },
    setup() {
      const [registerDrawer, { openDrawer }] = useDrawer();
      const [registerModal, { openModal: openMaterialModal }] = useModal();
      const [registerTable, { reload }] = useTable({
        title: '物料列表',
        api: getMaterialListByPage,
        columns,
        formConfig: {
          labelWidth: 120,
          schemas: searchFormSchema,
        },
        useSearchForm: true,
        showTableSetting: true,
        bordered: true,
        showIndexColumn: false,
        actionColumn: {
          width: 100,
          title: '操作',
          dataIndex: 'action',
          slots: { customRender: 'action' },
        },
      });
      function handleCreate() {
        openDrawer(true, {
          isUpdate: false,
        });
      }
      function handleRenew() {
        openMaterialModal(true, {
          data: 'content',
          info: 'Info',
        });
      }
      function handleSuccess() {
        reload();
      }

      function handleEdit(record: Recordable) {
        openDrawer(true, {
          record,
          isUpdate: true,
        });
      }
      function handleDelete(record: Recordable) {
        console.log(record);
        //删除物料
        const apiAction = DeleteMaterial(record);
        apiAction.then((action) => {
          if (action.IsSuccessed) {
            reload();
          }
        });
      }
      return {
        registerTable,
        registerDrawer,
        registerModal,
        handleCreate,
        handleEdit,
        handleDelete,
        handleRenew,
        handleSuccess,
      };
  const go = useGo();
  const { currentRoute } = useRouter();
  const [registerDrawer, { openDrawer }] = useDrawer();
  const [registerModal, { openModal: openMaterialModal }] = useModal();
  const buttons = ref([]);
  const HasRole = ref(false);
  const [registerTable, { reload }] = useTable({
    title: '物料列表',
    api: getListByPage,
    searchInfo: { TABLE_NAME: 'BAS_ITEM' },
    columns,
    formConfig: {
      labelWidth: 120,
      schemas: searchFormSchema,
    },
    useSearchForm: true,
    showTableSetting: true,
    bordered: true,
    showIndexColumn: false,
    actionColumn: {
      width: 100,
      title: '操作',
      dataIndex: 'action',
      slots: { customRender: 'action' },
    },
  });
  function handleCreate() {
    openDrawer(true, {
      isUpdate: false,
    });
  }
  function handleRenew() {
    openMaterialModal(true, {
      data: 'content',
      info: 'Info',
    });
  }
  function handleSuccess() {
    reload();
  }

  function handleEdit(record: Recordable) {
    openDrawer(true, {
      record,
      isUpdate: true,
    });
  }
  function handleDelete(record: Recordable) {
    console.log(record);
    //删除物料
    const apiAction = DeleteMaterial(record);
    apiAction.then((action) => {
      if (action.IsSuccessed) {
        reload();
      }
    });
  }

  onMounted(async () => {
    buttons.value = (await getMenuButtons(currentRoute.value.meta.menuCode as string)).Data.Items;
    const roles = useUserStore().getUserInfo.roles;
    HasRole.value = roles.some((item) => item.MENU_CODE === buttons.value[0]['FUNC_CODE']);
  });

  /**
   * @description: 跳转产品工艺绑定页面
   * @param {*} record
   * @return {*}
   */
  function handleBinding(record: Recordable) {
    const id = {
      ID: record.ID,
      Name: 'ProdRouteBinding',
      CODE: record.ITEM_CODE,
      Title: `产品[${record.ITEM_CODE}]工艺绑定`,
      colSlots: [],
      crudColSlots: [],
      dense: true,
      pageTitle: `产品工艺绑定`,
      pageContent: `这里是管理产品的工艺绑定，一个产品可以绑定多个工艺路线`,
    };
    go(`/ProdRouteBinding/CP/${encodeURI(JSON.stringify(id))}`);
    // let obj = JSON.stringify(id);
    // push({
    //   path: '/ProdRouteBinding',
    //   state: {obj}, //HTML5 History API 的传参，参数隐藏不在地址栏显示（history）
    // })
  }
</script>