JG-ADMIN-TEMP/src/views/pro/traceability/index.vue

<template>
    <div class="mainContentBox">
        
		<el-container>
	    <el-aside width="600px">
	      <avue-crud
	              ref="crudRef"
	              v-model:search="search"
	              v-model="form"
	              :data="data"
	              :option="option"
	              v-model:page="page"
	      		@row-click="handleRowClick">
	      	<template #seqNo="{ row }">
	      	  <el-tag :type="chooseTagType(row.seqNo,'css')">{{chooseTagType(row.seqNo,'text')}}</el-tag>
	      	  {{row.seqNo}}
	      	</template>
	      </avue-crud>
	    </el-aside>
	    <el-main>
	      <!-- <avue-crud></avue-crud> -->
	    </el-main>
	  </el-container>	
    </div>
</template>
<script setup>
    import { ref, getCurrentInstance } from "vue";
    import { useCrud } from "@/hooks/userCrud";
    import ButtonPermKeys from "@/common/configs/buttonPermission";

    import { useCommonStoreHook } from "@/store";
    const { isShowTable, tableType } = toRefs(useCommonStoreHook());
    const test = () => {
        isShowTable.value = true;
        tableType.value = tableType.value == 1 ? 2 : 1;
    };

    // 传入一个url，后面不带/
    const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
            useCrud({
                src: "/api/v1/process/web/traceability",
            });
    const { dataList, createRow, updateRow, deleteRow } = Methords; //增删改查
    const { selectionChange, multipleDelete } = Methords; //选中和批量删除事件
    const { checkBtnPerm } = Utils; //按钮权限等工具

    const crudRef = ref(null); //crudRef.value 获取avue-crud对象
	const chooseTagType = (row,type) => {
		let daynamicType = ''
		if(type == 'text'){
			daynamicType = row.startsWith("DD") ? '订单' : (row.startsWith("GD") ? '工单' : '序列号')
		}else{
			daynamicType = row.startsWith("DD") ? 'success' : (row.startsWith("GD") ? 'warning' : 'primary')
		}
	  return daynamicType
	};
	const handleRowClick = (row, column, event) => {
	      // 点击行时触发的逻辑
	      console.log('行数据:', row.workOrderCode);
	      // console.log('点击列信息:', option.value);
	      // 这里可以编写你的逻辑代码，比如弹窗显示行详情等
	};
    // 设置表格列或者其他自定义的option
    option.value = Object.assign(option.value, {
        // selection: true,
		excelBtn: true,
		border: true,
		index: false,
		expandLevel: 3,
		headerAlign: 'center',
		align: 'center',
		tree: true,
		labelWidth: 100,
		addBtn:false, 
		menu: false, 
		header: false,
		searchMenuSpan: 8, 
		rowKey: 'seqNo',
		rowParentKey: 'seqNo',
        column: [
				{
					label: "Id",
					prop: "id",
					search: false,
					hide: true,
				},
                {
                    label: "产品序列号",
                    prop: "seqNo",
                    search: true,
					searchLabelWidth: '100',
					searchSpan:12,
                },
                {
                    label: "数量",
                    prop: "quantity",
                    search: false,
					width: '100'
                }
        ],
    });

    onMounted(() => {
        dataList();
    });
</script>