v1

src/views/dataScreening/list/ss.vue

@@ -87,7 +87,7 @@ import { ElMessageBox, ElMessage } from 'element-plus';
 // 引入组件
 const Breadcrumb = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/breadcrumb.vue')); 
 const AddDialog = defineAsyncComponent(() => import('/@/views/norm/list/dialog.vue'));
-const DetailDialog = defineAsyncComponent(() => import('/@/views/norm/list/details.vue'));
+// const DetailDialog = defineAsyncComponent(() => import('/@/views/norm/list/details.vue'));
 const EditDialog = defineAsyncComponent(() => import('/@/views/norm/list/edit.vue'));
 const ImporDialog = defineAsyncComponent(() => import('/@/views/norm/list/impor.vue'));
 const router = useRouter();

src/views/norm/list/index.vue

@@ -80,7 +80,6 @@
 						:total="state.tableData.total">
 					</el-pagination>
 				</div>
-				<DetailDialog ref="DetailDialogRef" @refresh="getList()" />
 				<AddDialog ref="AddDialogRef" @refresh="getList()" />
 				<EditDialog ref="EditDialogRef" @refresh="getList()" />
 				<ImporDialog ref="ImporDialogRef" @refresh="getList()" />
@@ -99,7 +98,6 @@ import { Session } from '/@/utils/storage';
 // 引入组件
 const Breadcrumb = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/breadcrumb.vue')); 
 const AddDialog = defineAsyncComponent(() => import('/@/views/norm/list/dialog.vue'));
-const DetailDialog = defineAsyncComponent(() => import('/@/views/norm/list/details.vue'));
 const EditDialog = defineAsyncComponent(() => import('/@/views/norm/list/edit.vue'));
 const ImporDialog = defineAsyncComponent(() => import('/@/views/norm/list/impor.vue'));
 const router = useRouter();
@@ -146,7 +144,7 @@ onMounted(() => {
 	}
 	getList()
 	getTaskList()
-	state.tableHeight = getCurrentInstance().refs.pageMain.offsetHeight - 80 - 52 + "px";
+	state.tableHeight = getCurrentInstance().refs.pageMain.offsetHeight - 100 - 52 + "px";
 });
 
 const searchChange = () => {
@@ -232,9 +230,11 @@ const release= () => {
 	AddDialogRef.value.openDialog();
 }
 
-// 详情弹窗
-const details= (norm_id) => {
-	DetailDialogRef.value.openDialog(norm_id);
+// 详情信息
+const details= (id) => {
+	router.push({
+		path: '/norm/list/details',query: {norm_id:id}
+	});
 }
 
 // 编辑弹窗
@@ -292,6 +292,6 @@ const multipleExports= () => {
 
 <style lang="scss" scoped>
 .page-main {
-	height: calc(100vh - 50px - 106px);
+	height: calc(100vh - 50px - 126px);
 }
 </style>

src/views/norm/list/whole.vue

+<template>
+    <div class="system-menu-container">
+		<div class="breadcrumb-box">
+			<Breadcrumb />
+		</div>
+        <div class="header-search flex space-between">
+			<div>
+			    <el-page-header @back="backToPreviousPage">
+                </el-page-header>
+			</div>
+        </div>
+		<div class="page-main" ref="pageMain" v-loading="state.loading">
+			<el-card shadow="hover">
+                <el-table :data="state.tableData" border style="width: 100%" :height="state.tableHeight"
+                            ref="multipleTableRef">
+                            <el-table-column v-for="column in state.columns" :key="column.prop" :label="column.label" :prop="column.prop" :width="column.width" show-overflow-tooltip align="center">
+                        <template  #default="scope">
+                        <span style="color:#409EFF" v-if="column.label =='用户名称'">{{scope.row[column.prop]}}</span>
+                        <span style="color:#909399" v-else-if="column.label =='领取状态' && scope.row[column.prop] ==1">已领取</span>
+                        <span style="color:#E6A23C" v-else-if="column.label =='完成状态' && scope.row[column.prop] ==0">未完成</span>
+                        <span style="color:#409EFF" v-else-if="column.label =='完成状态' && scope.row[column.prop] ==1">已完成</span>
+                        <span v-else>{{scope.row[column.prop]}}</span>
+                        </template>
+                    </el-table-column>
+                </el-table>
+            </el-card>
+        </div>
+    </div>
+  </template>
+  
+  <script setup name="systemRoleDialog">
+  import { normApi } from '/@/api/norm'
+  import { ElMessage } from 'element-plus';
+  import { toolsApi } from '/@/api/tools'
+  const Breadcrumb = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/breadcrumb.vue')); 
+  const router = useRouter(); 
+  // 定义子组件向父组件传值/事件
+  const emit = defineEmits(['refresh']);
+  
+  // 定义变量内容
+  const dialogFormRef = ref();
+
+  const state = reactive({
+    userId: null,
+    index:0,
+    userIndex:0,
+    apiData: {
+        id:'',
+      },
+    rules: {
+      
+    },
+    dialog: {
+      isShowDialog: false,
+      title: '',
+      submitTxt: '',
+    },
+    tableData:[
+    ],
+    columns:[
+    ],
+    collectsTableData:[],
+    collectsColumns:[],
+    dataLoading: false,
+    btnLoading: false,
+    // 填写内容及自定义文本框
+    formItem: {
+          addItem:{
+            name:'',
+            level:'',
+            sort:'',
+            refer:'',
+            price:'',
+            task_id:'',
+          },
+          dynamicItem: [
+          //默认显示一条
+            // {
+            //   name: '',
+            //   value:''
+            // }
+          ],
+          userFilled: [
+          //默认显示一条
+            // {
+            //   name: '',
+            //   radio:'1',
+            // }
+          ]
+    }
+  });
+  
+  // 打开弹窗
+  const getInfo = () => {
+    normApi().normDetail(state.apiData).then(res => {
+          let addItem = res.data.addItem;
+      let custom = res.data.custom;
+      // 数据详情
+      state.formItem.addItem.name = addItem.name;
+      state.formItem.addItem.level = addItem.level;
+      state.formItem.addItem.sort = addItem.sort+'';
+      state.formItem.addItem.refer = addItem.refer;
+      state.formItem.addItem.price =addItem.price;
+      state.formItem.addItem.task_id= addItem.task_id
+      state.formItem.addItem.guide= addItem.guide
+      state.userIndex = 0;
+      state.index = 0;
+      custom.forEach(item => {
+              if(item.user_filled==1){
+            state.formItem.userFilled.push({name:item.extend_name,radio:item.required+"",remarks:item.extend_remarks});
+            state.userIndex++
+          }else{
+            state.formItem.dynamicItem.push({name:item.extend_name,value:item.extend_value});
+            state.index++
+          }
+          });
+  
+      //领取列表
+      let receivesList =  res.data.receivesList
+      if(receivesList){
+        let arr = [
+          { label:'序号',     prop: 'index',width:'80px'},
+          // { label:'ID',     prop: 'id'},
+          { label:'用户名称', prop: 'userInfo.name',width:120},
+          { label:'任务名称', prop: 'task_info.name',width:180},
+          { label:'指标名称', prop: 'norm_list_info.name',width:180},
+        ];
+        state.columns = arr;
+        receivesList.forEach(function(item, index, arr) {
+          let list = { 
+            'index': index+1,
+            // 'id':item.id,
+            'userInfo.name': item.userInfo.name,
+            'task_info.name': item.task_info.name,
+            'norm_list_info.name': item.norm_list_info.name,
+            'receives_status': item.receives_status,
+            'completion_status': item.completion_status,
+            'not_collectible_remarks': item.not_collectible_remarks?item.not_collectible_remarks:"是",
+            
+           }
+          state.tableData.push(list);
+          item.norm_list_extend.forEach(function(items, indexs, arrs) {
+            if(state.columns.length>0){
+                state.columns.forEach(function(itemss, indexss, arrss) {
+                  let vlues = state.columns.map(itemsss => itemsss.prop).indexOf('extend_value'+indexs)
+                  if(vlues== -1){
+                    state.columns.push( { label: items.extend_name, prop: 'extend_value'+indexs,width:180 })
+                  }
+                });
+            }else{
+              state.columns.push( { label: items.extend_name, prop: 'extend_value'+indexs,width:180 })
+            }
+            list['extend_value'+indexs] =items.extend_value;
+          });
+            });
+        state.columns.push( { label: '领取状态', prop:'receives_status',width:100 })
+        state.columns.push( { label: '完成状态', prop:'completion_status',width:100 })  
+        state.columns.push( { label: '是否可采集', prop:'not_collectible_remarks',width:200 })  
+      }
+      }).catch(() => {
+  
+      })
+  };
+  
+  
+  
+  // 关闭弹窗
+  const closeDialog = () => {
+    dialogFormRef.value.resetFields();
+    state.dialog.isShowDialog = false;
+  };
+  
+  // 暴露变量
+  defineExpose({
+
+  });
+  
+  
+  onMounted(() => {
+	if(router.currentRoute.value.query.norm_id){
+		state.apiData.id = router.currentRoute.value.query.norm_id
+		// state.isHide = true // 如果有任务ID才允许发布
+         getInfo()
+	}else{
+        router.go(-1);
+    }
+    state.tableHeight = getCurrentInstance().refs.pageMain.offsetHeight - 50 - 22 + "px";
+  });
+  </script>
+  
+  <style scoped lang="scss">
+.page-main {
+	height: calc(100vh - 50px - 116px);
+}
+.norm_title{
+  font-weight:bold;color: #409EFF;
+}
+.box_info{
+  margin-bottom: 20px;
+}
+.box_title{
+  // color: #409EFF;
+  font-weight: 600;
+}
+.custom_a{
+  text-decoration: none !important;
+  float: left;
+}
+  </style>
+  
\ No newline at end of file