xcx

src/pages/system/caseManager/caseInfo/index.vue

@@ -32,10 +32,10 @@
               size="mini"
               type="warning"
               @click="editItem(scope.$index, scope.row)">编辑</el-button>
-            <!-- <el-button
+            <el-button
               size="mini"
               type="success"
-              @click="keyManager(scope.$index, scope.row)">钥匙管理</el-button> -->
+              @click="pplConcerned(scope.$index, scope.row)">相关人员</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -76,6 +76,9 @@ export default {
     this.getList()
   },
   methods: {
+    pplConcerned (index, row) { // 相关人员
+      this.$router.push({name: 'pplConcerned', query: {id: row.CaseId}})
+    },
     getList () { // 获取列表
       this.$ajax(this.$api.caseManager.getCaseList.url, {
         method: this.$api.caseManager.getCaseList.method,

src/pages/system/caseManager/caseInfo/pplConcerned/editPPLConcerned/index.vue

@@ -0,0 +1,158 @@
+<template>
+  <div class="subPage">
+    <form class="mainForm">
+      <ul>
+        <li class="flex-h">
+          <span>用户类型：</span>
+          <div class="flex-item">
+            <el-select v-model="postData.UserType" placeholder="请选择">
+              <el-option
+                v-for="item in typeList"
+                :key="item.TypeId"
+                :label="item.TypeName"
+                :value="item.TypeId">
+              </el-option>
+            </el-select>
+          </div>
+        </li>
+        <li class="flex-h">
+          <span>用户姓名：</span>
+          <div class="flex-item">
+            <div style="width:50%">
+              <el-input
+                placeholder="请输入名称"
+                v-model="postData.UserName"
+                clearable>
+              </el-input>
+            </div>
+          </div>
+        </li>
+        <li class="flex-h">
+          <span>手机号码：</span>
+          <div class="flex-item">
+            <div style="width:50%">
+              <el-input
+                placeholder="请输入手机号码"
+                v-model="postData.Tel"
+                clearable>
+              </el-input>
+            </div>
+          </div>
+        </li>
+        <li style="text-align:center">
+          <el-button type="primary" size="mini" @click="submit">保存</el-button>
+          <el-button type="danger" size="mini" @click="cancel">取消</el-button>
+        </li>
+      </ul>
+    </form>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  name: '',
+  data () {
+    return {
+      postData: {
+        CaseUserId: '', // 主键id
+        OrgId: '', // 机构id
+        CaseId: this.$route.query.id, // 案场id
+        UserName: '', // 用户名称
+        Tel: '', // 电话
+        UserType: '', // 用户类型
+      },
+      typeList: [],
+    }
+  },
+  computed: {
+    ...mapState({
+      cases: x => x.app.cases.list,
+      defaultCaseId: x => x.app.cases.default,
+      OrgId: x => x.app.user.OrgId,
+    }),
+    CaseId: {
+      get () {
+        return this.postData.caseid || this.defaultCaseId
+      },
+      set (val) {
+        this.postData.caseid = val
+      }
+    }
+  },
+  created () {
+    this.getUserTypeList()
+    this.getCaseUserInfo()
+  },
+  components: {},
+  methods: {
+    getCaseUserInfo () {
+      if (this.$route.query.userid !== undefined) {
+        this.$ajax(this.$api.caseManager.getCaseUserInfo.url, {
+          method: this.$api.caseManager.getCaseUserInfo.method,
+          urlData: {id: this.$route.query.userid}
+        }).then(res => {
+          this.postData = res
+        })
+      }
+    },
+    getUserTypeList () { // 获取用户类型
+      this.$ajax(this.$api.caseManager.getUserTypeList.url, {
+        method: this.$api.caseManager.getUserTypeList.method,
+      }).then(res => {
+        this.typeList = res
+        this.postData.UserType = res[0].TypeId
+      })
+    },
+    submit () { // 提交数据
+      if (this.postData.UserName === '') {
+        this.$message({
+          type: 'error',
+          message: '用户名称不能为空'
+        })
+        return false
+      }
+      if (this.postData.Tel === '') {
+        this.$message({
+          type: 'error',
+          message: '手机号码不能为空'
+        })
+        return false
+      }
+      this.postData.OrgId = this.OrgId
+      if (this.$route.query.userid !== undefined) {
+        this.$ajax(this.$api.caseManager.editCaseUser.url, {
+          method: this.$api.caseManager.editCaseUser.method,
+          data: this.postData
+        }).then(res => {
+          this.$message({
+            type: 'success',
+            message: '操作成功'
+          })
+          this.$router.push({ name: 'pplConcerned', query: { id: this.$route.query.id } })
+        })
+      } else {
+        this.$ajax(this.$api.caseManager.addCaseUser.url, {
+          method: this.$api.caseManager.addCaseUser.method,
+          data: this.postData
+        }).then(res => {
+          this.$message({
+            type: 'success',
+            message: '操作成功'
+          })
+          this.$router.push({ name: 'pplConcerned', query: { id: this.$route.query.id } })
+        })
+      }
+    },
+    cancel () { // 取消
+      this.$router.push({ name: 'pplConcerned', query: { id: this.$route.query.id } })
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import "page.scss";
+</style>

src/pages/system/caseManager/caseInfo/pplConcerned/editPPLConcerned/page.scss

@@ -0,0 +1,56 @@
+span{
+  em{
+    color: red;
+  }
+}
+.map{
+  height: 500px;
+  background: #eee;
+  position: relative;
+  overflow: hidden;
+  box-sizing: border-box;
+  border: 1px solid #dcdfe6;
+
+  &>div.search{
+    display: inline-block;
+    position: absolute;
+  }
+
+  &>div.flex-item{
+    width: 100%;
+    &>div{
+      width: 100%;
+      height: 100%;
+      position: relative;
+      overflow: hidden;
+    }
+  }
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

src/pages/system/caseManager/caseInfo/pplConcerned/index.vue

@@ -0,0 +1,115 @@
+<template>
+  <div class="subPage">
+    <div class="system-table-search">
+      <div class="flex-h">
+        <div class="flex-item flex-h">
+          <el-button size="mini" type="success" @click="addPPLConcerned">新增相关人员</el-button>
+        </div>
+      </div>
+      <div class="moreFilter"></div>
+    </div>
+    <div class="system-table-box">
+      <el-table
+        :data="currentList"
+        stripe
+        style="width: 100%">
+        <el-table-column
+          prop="UserType"
+          label="用户类型">
+        </el-table-column>
+        <el-table-column
+          prop="UserName"
+          label="用户名称">
+        </el-table-column>
+        <el-table-column
+          prop="Tel"
+          label="手机号">
+        </el-table-column>
+        <el-table-column label="操作" width="200">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              type="warning"
+              @click="editItem(scope.$index, scope.row)">编辑</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <el-pagination
+      @current-change="handleCurrentChange"
+      :current-page.sync="postData.page"
+      :page-size="postData.pagesize"
+      layout="prev, pager, next, jumper"
+      :total="total">
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: '',
+  data () {
+    return {
+      total: 0,
+      postData: { // 表格搜索条件
+        caseid: this.$route.query.id, // 案场名称
+        page: 1, // 当前页码
+        pagesize: 10, // 请求数据量
+      },
+      currentList: [],
+      typeList: [],
+    }
+  },
+  created () {
+    this.getUserTypeList().then(() => {
+      this.getList()
+    })
+  },
+  methods: {
+    getUserTypeList () { // 获取用户类型
+      return new Promise((resolve) => {
+        this.$ajax(this.$api.caseManager.getUserTypeList.url, {
+          method: this.$api.caseManager.getUserTypeList.method,
+        }).then(res => {
+          this.typeList = res
+          resolve()
+        })
+      })
+    },
+    addPPLConcerned () { // 添加相关人员
+      this.$router.push({ name: 'editPPLConcerned', query: { id: this.$route.query.id } })
+    },
+    getList () { // 获取列表
+      this.$ajax(this.$api.caseManager.getCaseUserList.url, {
+        method: this.$api.caseManager.getCaseUserList.method,
+        queryData: this.postData
+      }).then(res => {
+        for (var n = 0; n < res.list.length; n++) {
+          res.list[n].UserType = this.typeList.filter(x => x.TypeId === res.list[n].UserType)[0].TypeName
+        }
+        this.currentList = res.list
+        this.postData.page = res.page
+        this.total = res.pagenum
+      })
+    },
+    handleCurrentChange (val) { // 跳转到分页
+      this.getList()
+    },
+    editItem (index, row) { // 修改
+      this.$router.push({ name: 'editPPLConcerned', query: { id: this.$route.query.id, userid: row.CaseUserId } })
+    },
+    searchList (key) { // 搜索列表
+      this.postData.name = key
+      this.currentList = []
+      this.postData.page = 1
+      this.getList()
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import "page.scss";
+</style>

src/pages/system/caseManager/caseInfo/pplConcerned/page.scss

@@ -0,0 +1,36 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

src/pages/system/page.js

@@ -12,6 +12,8 @@ import caseManager from './caseManager/index' // 案场管理
 import caseInfo from './caseManager/caseInfo/index' // 案场信息
 import addCase from './caseManager/caseInfo/addCase/index' // 新增案场
 import editCase from './caseManager/caseInfo/editCase/index' // 新增案场
+import pplConcerned from './caseManager/caseInfo/pplConcerned/index' // 相关人员
+import editPPLConcerned from './caseManager/caseInfo/pplConcerned/editPPLConcerned/index' // 编辑相关人员
 import keyManager from './caseManager/keyManager/index' // 钥匙管理
 import addKey from './caseManager/keyManager/add' // 新增钥匙
 import caseAreaManager from './caseManager/caseAreaManager/index' // 案场区域管理
@@ -116,6 +118,16 @@ export default {
             name: 'editCase',
             component: editCase,
             children: []
+          }, { // 相关人员
+            path: 'pplConcerned',
+            name: 'pplConcerned',
+            component: pplConcerned,
+            children: [{ // 编辑相关人员
+              path: 'editPPLConcerned',
+              name: 'editPPLConcerned',
+              component: editPPLConcerned,
+              children: []
+            }]
           }]
         }, { // 钥匙管理
           path: 'keyManager',

src/util/api.js

@@ -72,6 +72,22 @@ const $api = {
       method: 'put',
       url: `${baseUrl}${common}/case/info/:id`
     },
+    getCaseUserList: { // 获取案场相关人员列表
+      method: 'get',
+      url: `${baseUrl}${common}/case/user`
+    },
+    getCaseUserInfo: { // 获取案场相关人员信息
+      method: 'get',
+      url: `${baseUrl}${common}/case/user/:id`
+    },
+    addCaseUser: { // 新增案场相关人员
+      method: 'post',
+      url: `${baseUrl}${common}/case/user`
+    },
+    editCaseUser: { // 更新案场相关人员
+      method: 'put',
+      url: `${baseUrl}${common}/case/user`
+    },
     getKeyList: { // 获取钥匙列表
       method: 'get',
       url: `${baseUrl}${common}/case/key`