人员分配弹窗 - 项目实施方案管理系统

<p><template>  &lt;el-dialog :visible.sync='personOpen' :title=''人员分配'' append-to-body @close='taskCancel'&gt;     <el-header>       <el-form v-show='operation.showSearch' :model='queryParams' ref='queryForm'>         <el-row>           <el-col :span='8'>             <el-form-item label='姓名' prop='userName'>               &lt;el-input v-model='queryParams.userName' placeholder='请输入姓名' clearable @keyup.enter.native.prevent='handleQueryPerson'/&gt;             </el-form-item>           </el-col> <!--          <el-col :span='8'>             <el-form-item label='手机号' prop='phone'>               <el-input v-model='queryParams.phone' placeholder='请输入手机号' @clear='handleQueryPerson'                         clearable @keyup.enter.native='handleQueryPerson'/>             </el-form-item>           </el-col>-->           <el-col :span='6' style='margin-left: 10px'>             <el-form-item>               &lt;el-button type='primary' icon='el-icon-search' size='small' @click='handleQueryPerson'&gt;搜索</el-button>               &lt;el-button icon='el-icon-refresh' size='small' @click='resetQueryPerson'&gt;重置</el-button>             </el-form-item>           </el-col>         </el-row>       </el-form>       <el-row>         <!-- table工具栏 -->         &lt;Toolbar @add='handleAddPerson' :hasPermi='{  add: ['person:add'] }' :columns='operation.columns'                  :showSearch.sync='operation.showSearch' @queryTable='personList'/&gt;       </el-row>     </el-header>     <el-main>       <el-table ref='table' v-loading='loading' :data='personDataList' border>         <el-table-column label='序号' type='index' width='70' align='center' :index='indexMethod'/>         <el-table-column label='姓名' align='center' prop='userName' disableHide :show-overflow-tooltip='true'/>         <el-table-column label='手机号' align='center' prop='phone' disableHide :show-overflow-tooltip='true'/> <!--        <el-table-column label='身份证号' align='center' prop='cardNo' v-if='$isVisibleColumn('cardNo')' :show-overflow-tooltip='true'/>-->         &lt;el-table-column label='所属单位' align='center' prop='orgName' v-if='$isVisibleColumn('orgName')' :show-overflow-tooltip='true'/&gt; <!--        <el-table-column label='所属部门' align='center' prop='departmentName' v-if='$isVisibleColumn('departmentName')' :show-overflow-tooltip='true'/>-->         <el-table-column label='操作' align='center' class-name='small-padding fixed-width' width='140'>           <template slot-scope='scope'>             &lt;el-button size='mini' type='text' icon='el-icon-delete' @click='handleDeletePerson(scope.row)'                        v-hasPermi='['person:remove']' class='delete'&gt;删除</el-button>           </template>         </el-table-column>       </el-table>        <!-- 人员分配-->       &lt;person-list :visible.sync='personFlag' v-if='personFlag' :form='forms' :personDataList='personDataList'                    @submit='submitPersonForm' @on-success='onSuccessPerson'/&gt;      </el-main>     <el-footer slot='footer'>       &lt;pagination v-show='operation.total&gt;0' :total='operation.total' :page.sync='operation.pageNum'                   :limit.sync='operation.pageSize' @pagination='personList'/&gt;     </el-footer>   </el-dialog> </template>  <script> import operation from '@/mixins/operation'; import {queryProjectPersonPage, removeProjectPerson} from '@/api/project/proImpl/implscheme'; import Toolbar from '@/views/components/crud/Toolbar'; import PersonList from '@/views/project/proImpl/implScheme/personList';  export default {   name: 'personAllotmentDialog',   mixins: [operation('table')],   components: { Toolbar, PersonList },   props: {     value: {       required: true,       type: Object,       default: function () {         return {};       },     },   },   watch: {     value: {       handler(data) {         if (data) {           this.queryParams = data;           this.personList()         }       },       immediate: true,     },   },   data() {     return {       // 弹框页面是否显示       personOpen: true,       personFlag: false,       loading: false,       queryParams: {         userName: null,         // phone: null,       },       personDataList : [],       forms : {}     };   },   methods : {     personList(){       this.loading = true       queryProjectPersonPage(this.$getReqParams(this.queryParams, true)).then(res =&gt; {         this.personDataList = res.data.records;         this.operation.total = res.data.total;         this.loading = false;       })     },     /** 搜索按钮操作 <em>/     handleQueryPerson() {       this.operation.pageNum = 1;       this.personList();     },     /</em>* 重置按钮操作 <em>/     resetQueryPerson() {       this.resetForm('queryForm');       this.handleQueryPerson();     },     handleDeletePerson(row) {       let that = this       that.$modal.confirm('是否确认删除名称为'' + row.userName + ''的数据项？').then(function () {         return removeProjectPerson(row.id);       }).then(() =&gt; {         that.personList();         that.$modal.msgSuccess('删除成功');       }).catch(() =&gt; { });     },     /</em>* 排序*/     indexMethod(index) {       return index + this.operation.pageSize * (this.operation.pageNum - 1) + 1     },     /** 取消 <em>/     taskCancel() {       this.$emit('update:visible', false);       this.personOpen = false     },     /</em>* 提交按钮 */     submitPersonForm() {       this.handleQueryPerson();     },     onSuccessPerson() {       this.personList()     },     handleAddPerson() {       this.forms = this.queryParams       this.personFlag = true     },   } } </script>  <style scoped>  </style></p>