Просмотр исходного кода

修改报告任务清单,专题库分配参与者页面,增加报告详情对比任务的任务分配路由

zhuhao 2 лет назад
Родитель
Сommit
017b9c74ac

+ 10 - 1
src/router/index.js

@@ -267,7 +267,7 @@ const routes = [
             },
             component:() => import('@/views/report/InvalidResponse/components/evidenceAndRequestRouter.vue'),
           },
-          //任务分配
+          //对比任务
           {
             path: '/SelectedPatent',
             name:"SelectedPatent",
@@ -276,6 +276,15 @@ const routes = [
             },
             component:() => import('@/views/report/reportDetails/components/SelectedPatent.vue'),
           },
+          // 任务分配
+          {
+            path: '/AssignTasks',
+            name:"/AssignTasks",
+            meta:{
+              aside:true
+            },
+            component:() => import('@/views/report/Invalid/InvalidPage/AssignTasks.vue'),
+          },
           //添加对比文件
           {
             path:'/addPatentList',

+ 210 - 208
src/views/report/reportDetails/components/taskDetails.vue

@@ -1,96 +1,93 @@
 <template>
-	<!-- 权限管理确认  任务:我处理的 -->
-	  <div style="padding:20px">
-		<el-form :inline="true">
-			<el-form-item label="名称">
-				<el-input v-model="queryParams.taskName" size="small" placeholder="请输入任务名称"></el-input>
-			</el-form-item>
-			<el-form-item label="处理人">
-				<el-input v-model="queryParams.handlePersonName" size="small" placeholder="请输入发起人名称"></el-input>
-			</el-form-item>
-			<el-form-item label="类型">
-				<el-select clearable v-model="queryParams.type" size="small" placeholder="请选择任务类型">
-					<el-option v-for="(item,key) in reportType" :key="key" :label="item" :value="key"></el-option>
-				</el-select>
+  <!-- 权限管理确认  任务:我处理的 -->
+  <div style="padding:20px">
+    <el-form :inline="true">
+      <el-form-item style="width: 150px;">
+        <el-select v-model="query" size="small">
+          <el-option v-for="item in queryOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <template v-if="query!='type'">
+          <el-input v-model="queryParams[query]" clearable size="small" :placeholder="query=='taskName'?'请输入任务名称':'请输入发起人名称'"></el-input>
+        </template>
+        <template v-else>
+          <el-select clearable v-model="queryParams[query]" size="small" placeholder="请选择任务类型">
+            <el-option v-for="(item,key) in reportType" :key="key" :label="item" :value="key"></el-option>
+          </el-select>
+        </template>
 			</el-form-item>
 			<el-form-item>
-				<el-button type="" size="small" @click="getList">查询</el-button>
-			</el-form-item>
-		</el-form>
-       <!-- <div style=" margin-bottom: 10px; float: right;" >
-          <div class="btn1" @click="sift" style="width:80px;height:32px;right: 100px;display:flex;justify-content:space-around;border-radius:5px; cursor: pointer; background-color: rgb(144 147 153);">
-            <img src="@/assets/img/filtrationSearch.png" alt="" style="width:16px;height:16px;margin-top:9px;margin-left:8px"><p style="margin:0 8px 0 0;line-height:32px;color:white;font-size:14px">筛选 </p> 
+				<el-button type="primary" size="small" @click="getList">查询</el-button>
+			</el-form-item> 
+    </el-form>
+    <!-- 序号/任务名称/创建人/创建时间/状态/完成时间/操作 -->
+    <el-table border style="width: 100%;" :data="tableData" v-loading="loading"
+      header-row-class-name="custom-table-header" :default-sort="{ prop: 'date', order: 'descending' }">
+      <el-table-column prop="id" type="index" label="序号" width="100" align="center"></el-table-column>
+      <el-table-column prop="taskName" label="任务名称" width="230" align="center">
+        <template slot-scope="scope">
+          <div v-if="scope.row.type == 0">
+            {{ scope.row.taskName }}
+          </div>
+          <div v-else @click="rowTaskType(scope.row)">
+            <el-link type="primary">{{ scope.row.taskName }}</el-link>
           </div>
-      </div> -->
-		  <!-- 序号/任务名称/创建人/创建时间/状态/完成时间/操作 -->
-		  <el-table
-			border
-			style="width: 100%;"
-			:data="tableData"
-			v-loading="loading"
-			header-row-class-name="custom-table-header"
-			:default-sort="{ prop: 'date', order: 'descending' }"
-		>
-			  <el-table-column prop="id" type="index" label="序号" width="100" align="center"></el-table-column>
-			  <el-table-column prop="taskName" label="任务名称" width="230" align="center">
-          <template slot-scope="scope">
-            <div v-if="scope.row.type==0">
-              {{scope.row.taskName}}
-            </div>
-            <div v-else @click="rowTaskType(scope.row)">
-              <el-link type="primary">{{scope.row.taskName}}</el-link>
-            </div>
-          </template>
-        </el-table-column>
-			  <el-table-column prop="handlePersonName" label="处理人" width="150" align="center"></el-table-column>
-			  <el-table-column prop="createName" label="发起人" width="150" align="center"></el-table-column>
-			  <el-table-column prop="createTime" label="创建时间" sortable width="180" align="center"></el-table-column>
-			  <el-table-column prop="endTime" label="期限" sortable width="200" align="center"></el-table-column>
-			  <el-table-column prop="remark" label="备注" sortable width="200" align="center"></el-table-column>
-			  <el-table-column prop="type" label="类型" sortable width="120" align="center">
-				<template slot-scope="scope">
-					<div>
-					{{reportType[scope.row.type]}}
-					</div>
-				</template>
-			  </el-table-column>
-        <!-- <el-table-column label="任务进度" align="center" min-width="200px" show-overflow-tooltip>
+        </template>
+      </el-table-column>
+      <el-table-column prop="handlePersonName" label="处理人" width="150" align="center"></el-table-column>
+      <el-table-column prop="createName" label="发起人" width="150" align="center"></el-table-column>
+      <el-table-column prop="createTime" label="创建时间" sortable width="180" align="center"></el-table-column>
+      <el-table-column prop="endTime" label="期限" sortable width="200" align="center"></el-table-column>
+      <el-table-column prop="remark" label="备注" sortable width="200" align="center"></el-table-column>
+      <el-table-column prop="type" label="类型" sortable width="120" align="center">
+        <template slot-scope="scope">
+          <div>
+            {{ reportType[scope.row.type] }}
+          </div>
+        </template>
+      </el-table-column>
+      <!-- <el-table-column label="任务进度" align="center" min-width="200px" show-overflow-tooltip>
             <template slot-scope="scope">
               <el-progress :text-inside="true" :stroke-width="20" :percentage="scope.row.progress" :color="customColors"></el-progress>
             </template>
         </el-table-column> -->
-			  <el-table-column prop="taskStatus" label="状态" sortable width="120" align="center">
-				<template slot-scope="scope">
-					<div>
-					{{status[scope.row.taskStatus]}}
-					</div>
-				</template>
-			  </el-table-column>
-			  <el-table-column prop="finishTime" label="实际完成时间" width="180" sortable  align="center"></el-table-column>
-			  <el-table-column prop="result" label="结果" sortable  align="center">
-				<template slot-scope="scope">
-					<div v-if="scope.row.type==0">
-						<span v-if="btnObj.filter(item=>{return item.value == scope.row.result}).length>0">{{btnObj.filter(item=>{return item.value == scope.row.result})[0].label}}</span>
-					</div>
-					<div v-else>
-						{{status[scope.row.taskStatus]}}
-					</div>
-				</template>
-			  </el-table-column>
-		  </el-table>
-		  <div style="text-align: center;">
-        <el-pagination background layout="total, prev, pager, next, jumper" :current-page.sync="queryParams.current"
-          :page-size.sync="queryParams.size" @current-change="handleCurrentChange" :total="total">
-        </el-pagination>
-	    </div>
-	  </div>
+      <el-table-column prop="taskStatus" label="状态" sortable width="120" align="center">
+        <template slot-scope="scope">
+          <div>
+            {{ status[scope.row.taskStatus] }}
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="finishTime" label="实际完成时间" width="180" sortable align="center"></el-table-column>
+      <el-table-column prop="result" label="结果" sortable align="center">
+        <template slot-scope="scope">
+          <div v-if="scope.row.type == 0">
+            <span
+              v-if="btnObj.filter(item => { return item.value == scope.row.result }).length > 0">{{ btnObj.filter(item => {
+                return
+                item.value == scope.row.result
+              })[0].label }}</span>
+          </div>
+          <div v-else>
+            {{ status[scope.row.taskStatus] }}
+          </div>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div style="text-align: center;">
+      <el-pagination background layout="total, prev, pager, next, jumper" :current-page.sync="queryParams.current"
+        :page-size.sync="queryParams.size" @current-change="handleCurrentChange" :total="total">
+      </el-pagination>
+    </div>
+  </div>
 </template>
   
-  <script>
-  export default {
-	// props:['activeName','reportType','status'],
-	props:['reportId','row'],
-	data() {
+<script>
+export default {
+  // props:['activeName','reportType','status'],
+  props: ['reportId', 'row'],
+  data() {
     return {
       // customColors: [
       //   {color: '#f56c6c', percentage: 20},
@@ -99,147 +96,153 @@
       //   {color: '#1989fa', percentage: 80},
       //   {color: '#6f7ad3', percentage: 100}
       // ],
-		tableData:[],
-		form:[],
-		size:'',
-		taskId:'',
-		remark:'',
-		btn:{
-				label:'同意创建',
-				value:1
-			},
-    queryParams: {
-      reportId:this.reportId,
-		  size: 10,
-		  current: 1,
-		  taskStatus:"",
-		  roleInTask:1,
-		  taskName:'',
-		  handlePersonName:'',
-      type: null,
-		},
-		btnObj:[
-			{
-				label:'同意创建',
-				value:1
-			},
-			{
-				label:'取消创建',
-				value:4
-			},
-			{
-				label:'缺少材料',
-				value:5
-			}
-		],
-		total: 0,
-		loading:false,
+      query: 'taskName',
+      queryOption: [
+        {value:'taskName',label:'名称'},
+        {value:'handlePersonName',label:'处理人'},
+        {value:'type',label:'类型'},
+      ],
+      tableData: [],
+      form: [],
+      size: '',
+      taskId: '',
+      remark: '',
+      btn: {
+        label: '同意创建',
+        value: 1
+      },
+      queryParams: {
+        reportId: this.reportId,
+        size: 10,
+        current: 1,
+        taskStatus: "",
+        roleInTask: 1,
+        taskName: '',
+        handlePersonName: '',
+        type: null,
+      },
+      btnObj: [
+        {
+          label: '同意创建',
+          value: 1
+        },
+        {
+          label: '取消创建',
+          value: 4
+        },
+        {
+          label: '缺少材料',
+          value: 5
+        }
+      ],
+      total: 0,
+      loading: false,
       showDialog: false,
       // finish: {
       //           '0':'未完成',
       //           '1':'完成'
       //         },
-      status: ['未完成', '已完成','负责人处理中'],
+      status: ['未完成', '已完成', '负责人处理中'],
       taskId: null,
       visible: false,
-      siftForm:{},
-	  };
-	},
-	watch:{
-	  // activeName(val){
-		// this.queryParams.taskStatus = this.activeName=='first'?0:1
-		//   this.getList()
-	  // }
+      siftForm: {},
+    };
+  },
+  watch: {
+    // activeName(val){
+    // this.queryParams.taskStatus = this.activeName=='first'?0:1
+    //   this.getList()
+    // }
   },
-  computed:{
-    reportType(){
+  computed: {
+    reportType() {
       var a = this.$store.state.dictMessage.dictMessage.TASK_TYPE
       var b = {}
-      if(a){
-         a.forEach(item => {
+      if (a) {
+        a.forEach(item => {
           b[item.dictChildValue] = item.dictChildLabel
         });
         return b
       }
-     return []
-      
+      return []
+
     }
   },
-	mounted() {
+  mounted() {
     this.getList()
-	},
+  },
   methods: {
-	  //查询任务
+    //查询任务
     getList() {
-      this.loading=true
+      this.loading = true
       this.$api.ReviewTheTasks(this.queryParams).then(response => {
 
-        response.data.forEach(item=>{//传任务id
-          if(item.type!=0){
-            this.$api.taskProgress({id:item.id}).then(response=>{
-              if(response.code == 200){
-                item.progress =Number((response.data.finish / response.data.total *100).toFixed(2))
+        response.data.forEach(item => {//传任务id
+          if (item.type != 0) {
+            this.$api.taskProgress({ id: item.id }).then(response => {
+              if (response.code == 200) {
+                item.progress = Number((response.data.finish / response.data.total * 100).toFixed(2))
               }
             })
           } else {
-            if(item.taskStatus == 1){
+            if (item.taskStatus == 1) {
               item.progress = 100
-            }else{
+            } else {
               item.progress = 0
             }
           }
-         
-		  })
+
+        })
         this.tableData = response.data
         this.total = response.pageColumn.total
-        this.loading=false
+        this.loading = false
       }).catch(error => {
         this.loading = false
       })
     },
     //点击任务名称
-    rowTaskType(row) { 
+    rowTaskType(row) {
       // console.log(this.row)
       row.reportType = this.row.type
       row.reportName = this.row.name
       row.reportId = this.row.id
       row.signPatentNo = this.row.signPatentNo
       this.$s.setSession('params', row)
-      if (row.type==1) {
-        let a=this.$router.resolve({
+      if (row.type == 1) {
+        let a = this.$router.resolve({
           path: '/Incomplete',
           query: {
             taskStatus: this.queryParams.taskStatus,
             taskId: row.id,
-            reportId:row.reportId,
-            type:row.type,
+            reportId: row.reportId,
+            type: row.type,
             signPatentNo: row.signPatentNo,
-            reportType:3,
-            taskWorkRemak:0,
+            reportType: 3,
+            taskWorkRemak: 0,
           }
         })
-        window.open(a.href,"_blank")
+        window.open(a.href, "_blank")
       } else {
-        let a=this.$router.resolve({
+        let a = this.$router.resolve({
           path: '/Incomplete',
           query: {
             taskStatus: this.queryParams.taskStatus,
             taskId: row.id,
-            reportId:row.reportId,
-            type:row.type,
-            signPatentNo:row.signPatentNo,
+            reportId: row.reportId,
+            type: row.type,
+            signPatentNo: row.signPatentNo,
           }
         })
-        window.open(a.href,"_blank")
+        window.open(a.href, "_blank")
       }
-      
+
     },
-    
-	  //切换按钮
-	  // onChangeFamily(key) {
-		// this.btn = key
-	  // },
-	  //完成任务
+
+    //切换按钮
+    // onChangeFamily(key) {
+    // this.btn = key
+    // },
+    //完成任务
     handleEdit(row) {
       switch (row.type) {
         case 0://开卷
@@ -249,10 +252,10 @@
           this.coordinationTask(row)
           break;
         case 2://对比
-		case 3://初筛
+        case 3://初筛
           this.contrastTask(row)
           break;
-      
+
         default:
           break;
       }
@@ -275,55 +278,54 @@
     //     this.form = response.data[0]
     //   })
     // },
-    coordinationTask(row){},
+    coordinationTask(row) { },
     contrastTask(row) {
-		// this.$store.commit('SET_ADMIN_SIGNPATENTNO',row.signPatentNo)
-		// console.log(row.signPatentNo,this.$store.state.admin)
-		// localStorage.signPatentNo = row.signPatentNo
-    // console.log(row);
-      let a=this.$router.resolve({
+      // this.$store.commit('SET_ADMIN_SIGNPATENTNO',row.signPatentNo)
+      // console.log(row.signPatentNo,this.$store.state.admin)
+      // localStorage.signPatentNo = row.signPatentNo
+      // console.log(row);
+      let a = this.$router.resolve({
         path: '/Incomplete',
         query: {
           // taskStatus: this.queryParams.taskStatus,
           taskId: row.id,
-          reportId:row.reportId,
-          type:row.type,
-          signPatentNo:row.signPatentNo
+          reportId: row.reportId,
+          type: row.type,
+          signPatentNo: row.signPatentNo
         }
       })
-      window.open(a.href,"_blank")
+      window.open(a.href, "_blank")
     },
-	  // submit(){
-		// var a = {
-		// 	taskId:this.taskId,
-		// 	status:1,
-		// 	remark:this.remark,
-		// 	result: this.btn.value,
-		// 	reportStatus:this.btn.value
+    // submit(){
+    // var a = {
+    // 	taskId:this.taskId,
+    // 	status:1,
+    // 	remark:this.remark,
+    // 	result: this.btn.value,
+    // 	reportStatus:this.btn.value
     //   }
     // console.log(a);
     //   this.$api.AuditTask(a).then(response => {
     //   console.log(response);
-		// 	if(response.code == 200){
-		// 		// this.$message.success('审核通过')
-		// 		this.showDialog = false
-		// 		this.getList()
-		// 	}
-		// })
-	  // },
-	  //分页
-	  handleCurrentChange(val) {
-		this.queryParams.current = val;
-		this.getList();
-	  },
-	  //关闭弹窗
-	  handleClose(){
-		this.showDialog = false
-	  }
-	},
-	
-  };
-  </script>
+    // 	if(response.code == 200){
+    // 		// this.$message.success('审核通过')
+    // 		this.showDialog = false
+    // 		this.getList()
+    // 	}
+    // })
+    // },
+    //分页
+    handleCurrentChange(val) {
+      this.queryParams.current = val;
+      this.getList();
+    },
+    //关闭弹窗
+    handleClose() {
+      this.showDialog = false
+    }
+  },
+
+};
+</script>
   
-  <style lang="scss" scoped>
-  </style>
+<style lang="scss" scoped></style>

+ 276 - 368
src/views/workspace/components/drawer/User.vue

@@ -1,385 +1,293 @@
 <template>
-	<div>
-		<el-drawer
-			class="custom-drawer-form"
-			title="专题库成员"
-			size="1000px"
-			:visible.sync="drawer"
-			direction="rtl"
-			:before-close="close"
-			destroy-on-close
-			append-to-body
-		>
-			<el-container class="project-user">
-				<el-header>
-					<el-form :inline="true" class="project-user-header-form">
-						<el-form-item label="账号">
-							<el-input
-								v-model="queryParams.username"
-								size="small"
-								placeholder="请输入账号"
-							></el-input>
-						</el-form-item>
-						<el-form-item label="姓名">
-							<el-input
-								v-model="queryParams.name"
-								size="small"
-								placeholder="请输入姓名"
-							></el-input>
-						</el-form-item>
-						<el-form-item label="类型">
-							<el-select
-								v-model="queryParams.type"
-								placeholder="请选择"
-								clearable
-								size="small"
-							>
-								<el-option
-									v-for="(item, key) in typeObj"
-									:label="item"
-									:value="key"
-								></el-option>
-							</el-select>
-						</el-form-item>
-						<el-form-item>
-							<el-button type="" size="small" @click="getList">查询</el-button>
-							<el-button
-								type="primary"
-								size="small"
-								@click="handleAdd()"
-								:disabled="
-									!(
-										$permission('/workspace/project/assign_participants/add') &&
-										$r(projectId, [2])
-									)
-								"
-								>新增</el-button
-							>
-							<span
-								class="el-icon-question"
-								title="查看用户类型解释"
-								@click="handleClick"
-								style="
+  <div>
+    <el-drawer class="custom-drawer-form" title="专题库成员" size="1000px" :visible.sync="drawer" direction="rtl"
+      :before-close="close" destroy-on-close append-to-body>
+      <el-container class="project-user">
+        <el-header>
+          <el-form :inline="true" class="project-user-header-form">
+            <el-form-item style="width: 120px;">
+              <el-select v-model="query" size="small">
+                <el-option v-for="item in queryOption" :key="item.value" :label="item.label" :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item>
+              <template v-if="query == 'type'">
+                <el-select v-model="queryParams.type" placeholder="请选择人员类型" clearable size="small">
+                  <el-option v-for="(item, key) in typeObj" :key="item" :label="item" :value="key"></el-option>
+                </el-select>
+              </template>
+              <template v-else>
+                <el-input v-model="queryParams[query]" size="small"
+                  :placeholder="query == 'username' ? '请输入账号' : '请输入姓名'"></el-input>
+              </template>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" size="small" @click="getList">查询</el-button>
+            </el-form-item>
+          </el-form>
+          <div>
+            <el-button type="primary" size="small" @click="handleAdd()" :disabled="!(
+              $permission('/workspace/project/assign_participants/add') &&
+              $r(projectId, [2])
+            )
+              " style="margin-right: 20px;">新增</el-button>
+            <span class="el-icon-question" title="查看用户类型解释" @click="handleClick" style="
 									font-size: 30px;
 									color: #a6a6a6;
 									position: relative;
 									top: 7px;
-									left: 40px;
+									right: 10px;
 									cursor: pointer;
-								"
-							></span>
-						</el-form-item>
-					</el-form>
-				</el-header>
-				<el-main class="project-user-main">
-					<el-table
-						v-loading="loading"
-						:data="tableData"
-						border
-						header-row-class-name="custom-table-header"
-					>
-						<el-table-column
-							type="index"
-							label="#"
-							width="55"
-							align="center"
-						></el-table-column>
-						<el-table-column
-							prop="username"
-							label="账号"
-							align="center"
-							show-overflow-tooltip
-						></el-table-column>
-						<el-table-column
-							prop="name"
-							label="名称"
-							align="center"
-							show-overflow-tooltip
-						></el-table-column>
-						<el-table-column label="类型" align="center" show-overflow-tooltip>
-							<template slot-scope="scope">
-								<span>{{ typeObj[scope.row.type] }}</span>
-							</template>
-						</el-table-column>
-						<el-table-column
-							prop="createTime"
-							label="加入时间"
-							align="center"
-							show-overflow-tooltip
-						>
-							<template slot-scope="scope">
-								<span>{{ $d(scope.row.createTime) }}</span>
-							</template>
-						</el-table-column>
-						<el-table-column
-							prop="remark"
-							label="备注"
-							align="center"
-							show-overflow-tooltip
-						></el-table-column>
-						<el-table-column label="操作" align="center" width="150">
-							<template slot-scope="scope">
-								<el-dropdown split-button type="primary" size="small">
-									<p
-										@click="handleEdit(scope.row)"
-										v-if="
-											$permission(
-												'/workspace/project/assign_participants/modify'
-											) && $r(projectId, [2])
-										"
-									>
-										编辑
-									</p>
-									<p v-else :disabled="true">编辑</p>
-									<el-dropdown-menu slot="dropdown" class="text-align_center">
-										<el-dropdown-item
-											class="color-red"
-											@click.native="handleDelete(scope.row)"
-											:disabled="
-												!(
-													$permission(
-														'/workspace/project/assign_participants/remove'
-													) && $r(projectId, [2])
-												)
-											"
-											>移除</el-dropdown-item
-										>
-									</el-dropdown-menu>
-								</el-dropdown>
-							</template>
-						</el-table-column>
-					</el-table>
-					<div class="pagination">
-						<el-pagination
-							:current-page.sync="queryParams.current"
-							:page-size="queryParams.size"
-							:total="total"
-							@current-change="handleCurrentChange"
-							layout="total, prev, pager, next, jumper"
-							background
-						></el-pagination>
-					</div>
-				</el-main>
-				<el-footer class="footer-common">
-					<el-button @click="close">关 闭</el-button>
-				</el-footer>
-			</el-container>
-		</el-drawer>
+								"></span>
+          </div>
 
-		<el-dialog
-			:title="title"
-			:visible.sync="dialogVisible"
-			width="400px"
-			append-to-body
-			destroy-on-close
-			:before-close="cancel"
-		>
-			<el-form
-				:model="ruleForm"
-				:rules="rules"
-				ref="ruleForm"
-				label-width="80px"
-				label-position="left"
-			>
-				<el-form-item label="类型" prop="type">
-					<el-select
-						v-model="ruleForm.type"
-						placeholder="请选择"
-						style="width: 100%"
-					>
-						<el-option
-							v-for="(item, key) in typeObj"
-							:label="item"
-							:value="parseInt(key)"
-						></el-option>
-					</el-select>
-				</el-form-item>
-				<el-form-item label="备注" prop="remark">
-					<el-input
-						v-model="ruleForm.remark"
-						placeholder="请输入备注"
-						type="textarea"
-					></el-input>
-				</el-form-item>
-			</el-form>
-			<div slot="footer" class="dialog-footer">
-				<el-button @click="cancel">取 消</el-button>
-				<el-button type="primary" @click="submit" :loading="btnLoading"
-					>确 定</el-button
-				>
-			</div>
-		</el-dialog>
+        </el-header>
+        <el-main class="project-user-main">
+          <el-table v-loading="loading" :data="tableData" border header-row-class-name="custom-table-header">
+            <el-table-column type="index" label="#" width="55" align="center"></el-table-column>
+            <el-table-column prop="username" label="账号" align="center" show-overflow-tooltip></el-table-column>
+            <el-table-column prop="name" label="名称" align="center" show-overflow-tooltip></el-table-column>
+            <el-table-column label="类型" align="center" show-overflow-tooltip>
+              <template slot-scope="scope">
+                <span>{{ typeObj[scope.row.type] }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="createTime" label="加入时间" align="center" show-overflow-tooltip>
+              <template slot-scope="scope">
+                <span>{{ $d(scope.row.createTime) }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="remark" label="备注" align="center" show-overflow-tooltip></el-table-column>
+            <el-table-column label="操作" align="center" width="150">
+              <template slot-scope="scope">
+                <el-dropdown split-button type="primary" size="small">
+                  <p @click="handleEdit(scope.row)" v-if="$permission(
+                    '/workspace/project/assign_participants/modify'
+                  ) && $r(projectId, [2])
+                    ">
+                    编辑
+                  </p>
+                  <p v-else :disabled="true">编辑</p>
+                  <el-dropdown-menu slot="dropdown" class="text-align_center">
+                    <el-dropdown-item class="color-red" @click.native="handleDelete(scope.row)" :disabled="!(
+                      $permission(
+                        '/workspace/project/assign_participants/remove'
+                      ) && $r(projectId, [2])
+                    )
+                      ">移除</el-dropdown-item>
+                  </el-dropdown-menu>
+                </el-dropdown>
+              </template>
+            </el-table-column>
+          </el-table>
+          <div class="pagination">
+            <el-pagination :current-page.sync="queryParams.current" :page-size="queryParams.size" :total="total"
+              @current-change="handleCurrentChange" layout="total, prev, pager, next, jumper" background></el-pagination>
+          </div>
+        </el-main>
+        <el-footer class="footer-common">
+          <el-button @click="close">关 闭</el-button>
+        </el-footer>
+      </el-container>
+    </el-drawer>
 
-		<select-user-dialog @confirm="confirmUser" ref="selectUserDialog" />
+    <el-dialog :title="title" :visible.sync="dialogVisible" width="400px" append-to-body destroy-on-close
+      :before-close="cancel">
+      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" label-position="left">
+        <el-form-item label="类型" prop="type">
+          <el-select v-model="ruleForm.type" placeholder="请选择" style="width: 100%">
+            <el-option v-for="(item, key) in typeObj" :label="item" :value="parseInt(key)"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="ruleForm.remark" placeholder="请输入备注" type="textarea"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="cancel">取 消</el-button>
+        <el-button type="primary" @click="submit" :loading="btnLoading">确 定</el-button>
+      </div>
+    </el-dialog>
 
-		<user-type-explain-dialog ref="userTypeExplainDialog" />
-	</div>
+    <select-user-dialog @confirm="confirmUser" ref="selectUserDialog" />
+
+    <user-type-explain-dialog ref="userTypeExplainDialog" />
+  </div>
 </template>
 
 <script>
-	import SelectUserDialog from "../dialog/SelectUser";
-	import UserTypeExplainDialog from "../dialog/UserTypeExplain";
+import SelectUserDialog from "../dialog/SelectUser";
+import UserTypeExplainDialog from "../dialog/UserTypeExplain";
 
-	export default {
-		components: {
-			SelectUserDialog,
-			UserTypeExplainDialog,
-		},
-		data() {
-			return {
-				drawer: false,
-				loading: false,
-				btnLoading: false,
-				projectId: 0,
-				total: 0,
-				tableData: [],
-				queryParams: {
-					name: "",
-					username: "",
-					size: 10,
-					current: 1,
-					projectId: 0,
-					type: null,
-				},
-				typeObj: {
-					1: "分类人",
-					2: "管理员",
-					3: "查阅人",
-					4: "查阅人(图表)",
-				},
-				title: "",
-				dialogVisible: false,
-				ruleForm: {},
-				rules: {
-					type: [{ required: true, message: "请选择类型", trigger: "change" }],
-				},
-			};
-		},
-		computed: {},
-		mounted() {},
-		methods: {
-			close() {
-				this.drawer = false;
-				this.$emit("close");
-			},
-			open(id) {
-				this.projectId = id;
-				this.queryParams.projectId = id;
-				this.getList();
-				this.drawer = true;
-			},
-			close2() {
-				this.$refs.selectUserDialog.close();
-				this.getList();
-			},
-			getList() {
-				this.loading = true;
-				this.$api
-					.getProjectUserList(this.queryParams)
-					.then((response) => {
-						this.tableData = response.data.records;
-						this.total = response.data.total;
-						this.loading = false;
-					})
-					.catch((error) => {
-						this.loading = false;
-					});
-			},
-			handleCurrentChange(val) {
-				this.queryParams.current = val;
-				this.getList();
-			},
-			cancel() {
-				this.dialogVisible = false;
-			},
-			handleClick() {
-				this.$refs.userTypeExplainDialog.open();
-			},
-			handleAdd() {
-				this.$refs.selectUserDialog.open(this.projectId);
-			},
-			handleEdit(row) {
-				this.title = "编辑成员";
-				this.dialogVisible = true;
-				this.ruleForm = { ...row };
-			},
-			confirmUser(userIds, users) {
-				this.ruleForm = {
-					userIds: userIds,
-					projectId: this.projectId,
-					users: users,
-				};
-				this.title = "新增成员";
-				this.dialogVisible = true;
-			},
-			submit() {
-				this.$refs.ruleForm.validate((valid) => {
-					if (valid) {
-						this.btnLoading = true;
-						if (this.ruleForm.id) {
-							this.$api
-								.editProjectUser(this.ruleForm)
-								.then((response) => {
-									this.$message.success("编辑成功");
-									this.btnLoading = false;
-									this.cancel();
-									this.close2();
-								})
-								.catch((error) => {
-									this.btnLoading = false;
-								});
-						} else {
-							this.$api
-								.addProjectUser(this.ruleForm)
-								.then((response) => {
-									this.$message.success("新增成功");
-									this.btnLoading = false;
-									this.cancel();
-									this.close2();
-								})
-								.catch((error) => {
-									this.btnLoading = false;
-								});
-						}
-					}
-				});
-			},
-			handleDelete(row) {
-				this.$confirm("确认删除本条数据吗?", "提示", {
-					confirmButtonText: "确定",
-					cancelButtonText: "取消",
-					type: "warning",
-				}).then(() => {
-					this.loading = true;
-					this.$api
-						.deleteProjectUser({ id: row.id })
-						.then((response) => {
-							this.$message.success("删除成功");
-							this.loading = false;
-							this.getList();
-						})
-						.catch((error) => {
-							this.loading = false;
-						});
-				});
-			},
-		},
-	};
+export default {
+  components: {
+    SelectUserDialog,
+    UserTypeExplainDialog,
+  },
+  data() {
+    return {
+      drawer: false,
+      loading: false,
+      btnLoading: false,
+      projectId: 0,
+      total: 0,
+      tableData: [],
+      queryOption: [
+        { value: 'username', label: '账号' },
+        { value: 'name', label: '姓名' },
+        { value: 'type', label: '类型' },
+      ],
+      query: 'username',
+      queryParams: {
+        name: "",
+        username: "",
+        size: 10,
+        current: 1,
+        projectId: 0,
+        type: null,
+      },
+      typeObj: {
+        1: "分类人",
+        2: "管理员",
+        3: "查阅人",
+        4: "查阅人(图表)",
+      },
+      title: "",
+      dialogVisible: false,
+      ruleForm: {},
+      rules: {
+        type: [{ required: true, message: "请选择类型", trigger: "change" }],
+      },
+    };
+  },
+  computed: {},
+  mounted() { },
+  methods: {
+    close() {
+      this.drawer = false;
+      this.$emit("close");
+    },
+    open(id) {
+      this.projectId = id;
+      this.queryParams.projectId = id;
+      this.getList();
+      this.drawer = true;
+    },
+    close2() {
+      this.$refs.selectUserDialog.close();
+      this.getList();
+    },
+    getList() {
+      this.loading = true;
+      this.$api
+        .getProjectUserList(this.queryParams)
+        .then((response) => {
+          this.tableData = response.data.records;
+          this.total = response.data.total;
+          this.loading = false;
+        })
+        .catch((error) => {
+          this.loading = false;
+        });
+    },
+    handleCurrentChange(val) {
+      this.queryParams.current = val;
+      this.getList();
+    },
+    cancel() {
+      this.dialogVisible = false;
+    },
+    handleClick() {
+      this.$refs.userTypeExplainDialog.open();
+    },
+    handleAdd() {
+      this.$refs.selectUserDialog.open(this.projectId);
+    },
+    handleEdit(row) {
+      this.title = "编辑成员";
+      this.dialogVisible = true;
+      this.ruleForm = { ...row };
+    },
+    confirmUser(userIds, users) {
+      this.ruleForm = {
+        userIds: userIds,
+        projectId: this.projectId,
+        users: users,
+      };
+      this.title = "新增成员";
+      this.dialogVisible = true;
+    },
+    submit() {
+      this.$refs.ruleForm.validate((valid) => {
+        if (valid) {
+          this.btnLoading = true;
+          if (this.ruleForm.id) {
+            this.$api
+              .editProjectUser(this.ruleForm)
+              .then((response) => {
+                this.$message.success("编辑成功");
+                this.btnLoading = false;
+                this.cancel();
+                this.close2();
+              })
+              .catch((error) => {
+                this.btnLoading = false;
+              });
+          } else {
+            this.$api
+              .addProjectUser(this.ruleForm)
+              .then((response) => {
+                this.$message.success("新增成功");
+                this.btnLoading = false;
+                this.cancel();
+                this.close2();
+              })
+              .catch((error) => {
+                this.btnLoading = false;
+              });
+          }
+        }
+      });
+    },
+    handleDelete(row) {
+      this.$confirm("确认删除本条数据吗?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      }).then(() => {
+        this.loading = true;
+        this.$api
+          .deleteProjectUser({ id: row.id })
+          .then((response) => {
+            this.$message.success("删除成功");
+            this.loading = false;
+            this.getList();
+          })
+          .catch((error) => {
+            this.loading = false;
+          });
+      });
+    },
+  },
+};
 </script>
 
 <style lang="scss">
-	.project-user {
-		.pagination {
-			text-align: center;
-			margin: 20px 0;
-		}
-		.project-user-header-form {
-			margin-left: 20px;
-		}
-		.project-user-main {
-			background: #fff;
-			padding: 5px 20px;
-			margin-top: 20px;
-		}
-	}
+.project-user {
+  .pagination {
+    text-align: center;
+    margin: 20px 0;
+  }
+
+  .project-user-header-form {
+    margin-left: 20px;
+  }
+
+  .project-user-main {
+    background: #fff;
+    padding: 5px 20px;
+    margin-top: 20px;
+  }
+}
 </style>