|
|
@@ -0,0 +1,337 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <div class="header">
|
|
|
+ <div class="title">{{title}}</div>
|
|
|
+ <el-button type="primary" size="small" @click="add">添加</el-button>
|
|
|
+ </div>
|
|
|
+ <el-table
|
|
|
+ ref="table"
|
|
|
+ border
|
|
|
+ :data="tableData"
|
|
|
+ row-key="id"
|
|
|
+ style="width: 100%"
|
|
|
+ v-loading="loading">
|
|
|
+ <el-table-column prop="name" label="姓名" min-width="220">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div>
|
|
|
+ <div v-if="scope.row.id && editMessage.id!=scope.row.id">
|
|
|
+ {{ scope.row.name }}
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ <el-autocomplete
|
|
|
+ style="width: 100%;"
|
|
|
+ class="inline-input"
|
|
|
+ v-model="scope.row.name"
|
|
|
+ v-SelectLazyLoading="IPREmailLoad"
|
|
|
+ :fetch-suggestions="querySearchByName"
|
|
|
+ placeholder="请输入内容"
|
|
|
+ @input="handleInput"
|
|
|
+ @select="(item)=>handleSelect(item,scope.row,'name')"
|
|
|
+ :disabled="currentEditField && currentEditField!='name'"
|
|
|
+ >
|
|
|
+ <template slot-scope="{ item }">
|
|
|
+ <div style="padding: 5px 0;">
|
|
|
+ <div style="text-overflow: ellipsis;overflow: hidden;line-height: normal;">{{ item.name }}</div>
|
|
|
+ <div style="font-size: 12px;color: #b4b4b4;line-height: normal;">{{ item.email }}</div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-autocomplete>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="email" label="邮箱" min-width="220">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div>
|
|
|
+ <div v-if="scope.row.id && editMessage.id!=scope.row.id">
|
|
|
+ {{ scope.row.email }}
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ <el-autocomplete
|
|
|
+ style="width: 100%;"
|
|
|
+ class="inline-input"
|
|
|
+ v-model="scope.row.email"
|
|
|
+ v-SelectLazyLoading="IPREmailLoad"
|
|
|
+ :fetch-suggestions="querySearchByEmail"
|
|
|
+ placeholder="请输入内容"
|
|
|
+ @input="handleInput"
|
|
|
+ @select="(item)=>handleSelect(item,scope.row,'email')"
|
|
|
+ :disabled="currentEditField && currentEditField!='email'"
|
|
|
+ >
|
|
|
+ <template slot-scope="{ item }">
|
|
|
+ <div style="padding: 5px 0;">
|
|
|
+ <div style="text-overflow: ellipsis;overflow: hidden;line-height: normal;">{{ item.email }}</div>
|
|
|
+ <div style="font-size: 12px;color: #b4b4b4;line-height: normal;">{{ item.name }}</div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-autocomplete>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="email" label="账号" min-width="220">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div>
|
|
|
+ <div v-if="scope.row.id && editMessage.id!=scope.row.id">
|
|
|
+ {{ scope.row.assoAccountId }}
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ <el-select style="width:100%" v-model="scope.row.assoAccountId" placeholder="请选择账号" filterable remote @focus="focusPerson(scope.row.userName)"
|
|
|
+ :popper-append-to-body="false" :remote-method="remoteMethodPerson" v-SelectLazyLoading="lazyLoadingPerson" :disabled="currentEditField && currentEditField!='assoAccountId'"
|
|
|
+ :loading="personnelList.loading">
|
|
|
+ <el-option v-for="item in personnelList.data" :key="Number(item.id)" :label="item.name"
|
|
|
+ :value="Number(item.id)"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作" width="180px">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div>
|
|
|
+ <div v-if="scope.row.id && editMessage.id!=scope.row.id">
|
|
|
+ <el-button type="text" size="small" @click="edit(scope.row)">修改</el-button>
|
|
|
+ <el-button type="text" size="small" @click="remove(scope.row)">移除</el-button>
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ <el-button type="text" size="small" @click="save(scope.row)">保存</el-button>
|
|
|
+ <el-button type="text" size="small" @click="cancel(scope.row,scope.$index)">取消</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import personLazy from '@/utils/personLazy'
|
|
|
+export default {
|
|
|
+ components: {},
|
|
|
+ mixins:[personLazy],
|
|
|
+ props: {
|
|
|
+ reportId:{
|
|
|
+ type:[Number,String],
|
|
|
+ default:0
|
|
|
+ },
|
|
|
+ title:{
|
|
|
+ type:String,
|
|
|
+ default:'IPR'
|
|
|
+ },
|
|
|
+ type:{
|
|
|
+ type:[Number,String],
|
|
|
+ default:1
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ model:'list',
|
|
|
+ IPREmailList:{
|
|
|
+ queryParams:{
|
|
|
+ current:0,
|
|
|
+ size:10,
|
|
|
+ total:1,
|
|
|
+ name:null,
|
|
|
+ email:null,
|
|
|
+ type:this.type
|
|
|
+ },
|
|
|
+ data:[]
|
|
|
+ },
|
|
|
+ editMessage:{},
|
|
|
+ tableData:[],
|
|
|
+ loading:false,
|
|
|
+ currentEditField:null
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {},
|
|
|
+ computed: {},
|
|
|
+ created() {},
|
|
|
+ mounted() {
|
|
|
+ this.init()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ init(){
|
|
|
+ this.editMessage = {}
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ getList(){
|
|
|
+ var params = {
|
|
|
+ reportId:this.reportId,
|
|
|
+ type:this.type
|
|
|
+ }
|
|
|
+ this.model = 'list'
|
|
|
+ this.loading = true
|
|
|
+ var api = 'matchCasePersonQuery'
|
|
|
+ this.$api[api](params).then(response=>{
|
|
|
+ if(response.code == 200){
|
|
|
+ this.tableData = response.data
|
|
|
+ this.loading = false
|
|
|
+ }
|
|
|
+ }).catch(error=>{
|
|
|
+ this.tableData = []
|
|
|
+ this.loading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //添加
|
|
|
+ add(){
|
|
|
+
|
|
|
+ if(this.model != 'list' ){
|
|
|
+ this.$message.warning('已有数据正在编辑，请先保存修改的数据')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.currentEditField = null
|
|
|
+ this.tableData.push({})
|
|
|
+ this.model = 'add'
|
|
|
+ },
|
|
|
+ //编辑
|
|
|
+ edit(row){
|
|
|
+ if(this.model != 'list' ){
|
|
|
+ this.$message.warning('已有数据正在编辑，请先保存修改的数据')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.currentEditField = null
|
|
|
+ this.model = 'edit'
|
|
|
+ this.editMessage = JSON.parse(JSON.stringify(row))
|
|
|
+ },
|
|
|
+ //移除配案人员
|
|
|
+ remove(row){
|
|
|
+ this.$confirm('确认删除选择的数据吗？', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ this.loading = true
|
|
|
+ this.$api.matchCasePersonDelete([row.id]).then(response => {
|
|
|
+ this.$message.success('移除成功')
|
|
|
+ this.loading = false
|
|
|
+ this.getList()
|
|
|
+ this.IPREmailList={
|
|
|
+ queryParams:{
|
|
|
+ current:0,
|
|
|
+ size:10,
|
|
|
+ total:1,
|
|
|
+ name:null,
|
|
|
+ email:null,
|
|
|
+ type:this.type
|
|
|
+ },
|
|
|
+ data:[]
|
|
|
+ }
|
|
|
+ }).catch(error => {
|
|
|
+ this.loading = false
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //取消编辑
|
|
|
+ cancel(row,index){
|
|
|
+ if(this.model == 'add'){
|
|
|
+ this.tableData.splice(index,1)
|
|
|
+ }else{
|
|
|
+ row = JSON.parse(JSON.stringify(this.editMessage))
|
|
|
+ this.editMessage = {}
|
|
|
+ }
|
|
|
+ this.model = 'list'
|
|
|
+
|
|
|
+ },
|
|
|
+ //保存
|
|
|
+ save(row){
|
|
|
+ if(!row.name){
|
|
|
+ this.$message.warning('姓名不能为空')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if(!row.email){
|
|
|
+ this.$message.warning('邮箱不能为空')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ var regx = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9_\.\-])+\.)+([a-zA-Z0-9]{2,4})+$/
|
|
|
+ if(!regx.test(row.email)){
|
|
|
+ this.$message.warning('邮箱格式不正确')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ var a = '添加'
|
|
|
+ if(row.id){
|
|
|
+ a = '修改'
|
|
|
+ }
|
|
|
+ this.loading = true
|
|
|
+ row.reportId = this.reportId
|
|
|
+ this.$api.matchCasePersonUpdate(row).then(response=>{
|
|
|
+ if(response.code == 200){
|
|
|
+ this.$message.success(a+'成功')
|
|
|
+ this.loading = false
|
|
|
+ this.getList()
|
|
|
+ if(row.id){
|
|
|
+ this.editMessage = {}
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }).catch(error=>{
|
|
|
+ this.loading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * IPR邮箱
|
|
|
+ */
|
|
|
+ // 懒加载IPR邮箱方法
|
|
|
+ IPREmailLoad() {
|
|
|
+ if (this.IPREmailList.queryParams.current * this.IPREmailList.queryParams.size >= this.IPREmailList.queryParams.total) {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ this.IPREmailList.queryParams.current++
|
|
|
+ this.getIPREmailList()
|
|
|
+ },
|
|
|
+ // 查询IPR邮箱
|
|
|
+ async getIPREmailList() {
|
|
|
+ let params = {
|
|
|
+ ...this.IPREmailList.queryParams,
|
|
|
+ }
|
|
|
+ await this.$api.iprPersonQuery(params).then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.IPREmailList.data.push(...res.data.data)
|
|
|
+ this.IPREmailList.queryParams.total = res.data.total
|
|
|
+ this.IPREmailList.cb(this.IPREmailList.data);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //获取下拉建议IPR邮箱数据
|
|
|
+ async querySearchByEmail(queryString, cb) {
|
|
|
+ this.IPREmailList.queryParams.current = 1
|
|
|
+ this.IPREmailList.queryParams.email = queryString
|
|
|
+ this.IPREmailList.data = []
|
|
|
+ this.IPREmailList.cb = cb
|
|
|
+ await this.getIPREmailList()
|
|
|
+ },
|
|
|
+ async querySearchByName(queryString, cb) {
|
|
|
+ this.IPREmailList.queryParams.current = 1
|
|
|
+ this.IPREmailList.queryParams.name = queryString
|
|
|
+ this.IPREmailList.data = []
|
|
|
+ this.IPREmailList.cb = cb
|
|
|
+ await this.getIPREmailList()
|
|
|
+ },
|
|
|
+ handleSelect(item,row,field){
|
|
|
+ this.$set(row,'name',item.name)
|
|
|
+ this.$set(row,'email',item.email)
|
|
|
+ this.$set(row,'iprPersonId',item.id)
|
|
|
+ this.$set(row,'assoAccountId',item.assoAccountId)
|
|
|
+ this.currentEditField = field
|
|
|
+ },
|
|
|
+ handleInput(){
|
|
|
+ if(this.currentEditField){
|
|
|
+ this.currentEditField =null
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.header{
|
|
|
+ height: 50px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ .title{
|
|
|
+ font-family: 微软雅黑;
|
|
|
+ color: var(--color1);
|
|
|
+ // font-weight: bold;
|
|
|
+ font-size: 22px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
