EnterprisePersonnelManagement.vue

<template>
  <div class="enterprise-personnel-management">
    <!-- 操作栏 -->
    <div class="toolbar">
      <div class="toolbar-left">
        <div class="search-wrapper">
          <el-input
            v-model="formData.personnelCode"
            placeholder="请输入工号查询"
            class="search-input"
          />
        </div>
        <div class="search-wrapper">
          <el-input
            v-model="formData.phone"
            placeholder="请输入手机号查询"
            class="search-input"
          />
        </div>
        <div class="search-wrapper" style="width: auto;">
          <template v-if="addressStore.cityArr.length>0">
            <el-select 
              v-model="addressStore.city"
              class="filter-select"
              placeholder="选择地市"
              @change="cityChange"
              :disabled="getData.city!=''"
              style="margin-right: 20px;"
              clearable>
              <el-option 
                v-for="item in addressStore.cityArr" 
                :key="item.areaCode"
                :label="item.areaName"
                :value="item.areaCode"
              ></el-option>
            </el-select>
          </template>
          <template v-if="addressStore.countyArr.length>0"> 
            <el-select 
              v-model="addressStore.county"
              class="filter-select" 
              placeholder="选择区县"
              :disabled="getData.county!=''"
              clearable>
              <el-option 
                v-for="item in addressStore.countyArr" 
                :key="item.areaCode"
                :label="item.areaName"
                :value="item.areaCode"
              ></el-option>
            </el-select>
          </template>
        </div>
      </div>
      
      <div class="toolbar-right">
        <el-button size="small" @click="handleFilter">
          <i class="el-icon-search"></i>
          查询
        </el-button>
        <el-button @click="updatePerson" type="primary" size="small">
          <i class="el-icon-plus"></i>
          添加人员
        </el-button>
      </div>
    </div>

    <!-- 表格 -->
    <div class="personnel-table">
      <el-table :data="tableData" border>
        <el-table-column prop="personnelName" label="姓名" width="100"></el-table-column>
        <el-table-column prop="personnelCode" label="工号" width="100"></el-table-column>
        <el-table-column prop="phone" label="手机号" width="150"></el-table-column>
        <el-table-column prop="areaName" label="所属区域" width="250"></el-table-column>
        <el-table-column label="状态" width="120">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status == '1' ? 'success' : 'info'">
              {{ scope.row.status == '1' ? '启用' : '关闭' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="220" :formatter="timeRender"></el-table-column>
        <el-table-column label="操作" min-width="120">
          <template slot-scope="scope">
            <el-button 
              type="text" 
              size="small" 
              @click="editPersonnel(scope.row)"
              disabled
            >
              编辑
            </el-button>
            <el-button 
              type="text" 
              size="small" 
              @click="deletePersonnel(scope.row.id)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageStore.currentPage"
        :page-sizes="[20, 50, 100]"
        :page-size="pageStore.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageStore.total"
      >
      </el-pagination>
    </div>

    <!-- 添加/编辑人员对话框 -->
    <el-dialog
      :title="editingPersonnel ? '编辑政企业务支撑人员' : '新增政企业务支撑人员'"
      :visible.sync="updatePersonStore.isShow"
      width="800px">
      <el-form :model="updatePersonStore" :rules="personnelRules" ref="personnelForm" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="姓名" prop="personnelName">
              <el-input 
                v-model="updatePersonStore.personnelName" 
                placeholder="请输入姓名"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工号" prop="personnelCode">
              <el-input 
                v-model="updatePersonStore.personnelCode" 
                placeholder="请输入工号"
                :disabled="!!editingPersonnel"
              ></el-input>
              <p v-if="editingPersonnel" class="form-hint">工号添加后不可修改</p>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="手机号" prop="phone">
              <el-input 
                v-model="updatePersonStore.phone" 
                placeholder="请输入手机号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态" prop="status">
              <el-select v-model="updatePersonStore.status" style="width: 100%;">
                <el-option label="启用" value="1"></el-option>
                <el-option label="关闭" value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="30">
            <el-form-item label="所属区域" prop="grid">
              <template v-if="updatePersonStore.cityArr.length>0">
                <el-select 
                  v-model="updatePersonStore.city" 
                  placeholder="选择地市"
                  @change="(value)=>{cityChange(value,'person')}"
                  :disabled="getData.city!=''"
                  style="margin-right: 10px"
                  clearable>
                  <el-option 
                    v-for="item in updatePersonStore.cityArr" 
                    :key="item.areaCode"
                    :label="item.areaName"
                    :value="item.areaCode"
                  ></el-option>
                </el-select>
              </template>
              <template v-if="updatePersonStore.countyArr.length>0"> 
                <el-select 
                  v-model="updatePersonStore.county" 
                  placeholder="选择区县"
                  @change="(value)=>{countyChange(value,'person')}"
                  :disabled="getData.county!=''"
                  style="margin-right: 10px"
                  clearable>
                  <el-option 
                    v-for="item in updatePersonStore.countyArr" 
                    :key="item.areaCode"
                    :label="item.areaName"
                    :value="item.areaCode"
                  ></el-option>
                </el-select>
              </template>
            </el-form-item>
          </el-col>
        </el-row>
        
        
      </el-form>
      
      <div slot="footer" class="dialog-footer">
        <el-button @click="updatePersonStore.isShow = false">取消</el-button>
        <el-button type="primary" @click="submitPersonnelForm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

export default {
  name: 'EnterprisePersonnelManagement',
  data() {
    return {
      formData:{
        personnelCode: '',
        phone: '',
        personnelTypes: [3],
      },
      addressStore:{
        city: '',
        cityArr: [],
        county: '',
        countyArr: []
      },
      getData:{
        city: '',
        county: ''
      },
      tableData: [],
      pageStore:{
        currentPage: 1,
        pageSize: 20,
        total: 0
      },
      updatePersonStore:{
        isShow: false,
        row: {},

        personnelName: '',
        personnelCode: '',
        phone: '',
        status: '',

        city: '',
        cityArr: [],
        county: '',
        countyArr: []
      },
      personnelRules: {
        personnelName: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        personnelCode: [
          { required: true, message: '请输入工号', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '请选择状态', trigger: 'blur' }
        ],
        county: [
          { required: true, message: '请选择所属区域', trigger: 'blur' }
        ],
      },

      isAddDialogOpen: false,
      editingPersonnel: null,
      currentPage: 1,
      pageSize: 20,
      personnelForm: {
        name: '',
        workId: '',
        phone: '',
        region: [],
        status: 'enabled'
      }
    }
  },
  created(){
    let pa = JSON.parse(localStorage.getItem('accountInfo'))
    this.getData.city = pa.cityCode||''
    this.getData.county = pa.countyCode||''
    this.queryArea()

    this.handleFilter()
  },
  methods: {
    updatePerson(row){
      let ud = this.updatePersonStore
      
      if(row.id){
        ud.row =row
        ud.personnelName = row.personnelName
        ud.personnelCode = row.personnelCode
        ud.phone = row.phone
        ud.status = row.status
        ud.relatedMarketingCode = row.relatedMarketingCode

        
      }else{
        ud.row = {}
        ud.personnelName = ''
        ud.personnelCode = ''
        ud.phone = ''
        ud.status = ''
        ud.relatedMarketingCode = ''
        if(!this.getData.city){
          ud.city = ''
          ud.county = ''
          ud.countyArr = []
          ud.grid = ''
          ud.gridArr = []
        }else if(!this.getData.county){
          ud.county = ''
          ud.grid = ''
          ud.gridArr = []
        }
      }

      this.updatePersonStore.isShow = true
    },
    cityChange(value,type){
      let ad = type=='person'?this.updatePersonStore:this.addressStore
      ad.city = value
      ad.county = ''
      ad.grid = ''

      this.apiReq.queryLevelAllArea({
        areaLevel: 3,
        parentAreaCode: value
      }).then(res=>{
        if(res.code == 200){
          ad.countyArr = res.data

          if(type == 'all'){
            this.updatePersonStore.countyArr = res.data
          }
        }
      })
    },
    timeRender(row,column){
      return this.common.detailTime(new Date(row[column.property]).getTime())
    },
    handleFilter(){
      this.pageStore.currentPage = 1

      this.queryPersonList()
    },
    queryArea(){
      this.apiReq.queryLevelAllArea({
        areaLevel: 2,
        parentAreaCode: '320000'
      }).then(res=>{
        if(res.code == 200){
          this.updatePersonStore.cityArr = res.data
          this.addressStore.cityArr = res.data

          this.setAddressShow()
        }
      })
    },
    setAddressShow(){
      let ad = this.addressStore
      let pd = this.updatePersonStore
      let gd = this.getData

      if(gd.city){
        ad.city = gd.city
        this.cityChange(ad.city,'all')

        if(gd.county){
          ad.county = gd.county
        }
      }

      pd.city = ad.city
      pd.county = ad.county
    },
    handleSizeChange(size) {
      this.pageStore.pageSize = size
      
      this.handleFilter()
    },
    handleCurrentChange(page) {
      this.pageStore.currentPage = page

      this.queryPersonList()
    },
    queryPersonList(){
      this.apiReq.queryAllPerson({
        pageSize: this.pageStore.pageSize,
        pageNum: this.pageStore.currentPage,
        areaCode: this.addressStore.county || this.addressStore.city,
        ...this.formData
      }).then(res=>{
        if(res.code == 200){
          this.tableData = res.data.records

          this.pageStore.total = res.data.total
        }else{
          this.$message.error(res.message)
        }
      })
    },

    editPersonnel(person) {
      this.editingPersonnel = person
      // 分解区域路径为数组
      this.personnelForm = { 
        ...person,
        region: person.region.split('-')
      }
      this.isAddDialogOpen = true
    },
    deletePersonnel(id) {
      this.$confirm('确定要删除该人员吗？此操作不可撤销。', '确认删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.apiReq.deletePerson({
          id,
        }).then(res=>{
          if(res.code == '200'){
            this.handleFilter()
            this.$message.success('删除成功')
          }else{
            this.$message.error(res.message)
          }
        })
      })
    },
    submitPersonnelForm() {
      this.$refs.personnelForm.validate((valid) => {
        if (valid) {
          let ud = this.updatePersonStore
          this.apiReq.addNewPerson({
            personnelName: ud.personnelName,
            personnelCode: ud.personnelCode,
            phone: ud.phone,
            personnelType: '3',
            status: ud.status,
            areaCode: ud.county
          }).then(res=>{
            if(res.code == '200'){
              let __this = this
              this.$alert('添加成功', '温馨提示', {
                confirmButtonText: '确定',
                callback: () => {
                  __this.handleFilter()
                  __this.updatePersonStore.isShow = false
                }
              });
            }else{
              this.$message.error(res.message)
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.enterprise-personnel-management {
  .toolbar {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    
    .toolbar-left {
      display: flex;
      gap: 15px;
      
      .search-wrapper {
        position: relative;
        width: 220px;
        
        .search-icon {
          position: absolute;
          left: 10px;
          top: 50%;
          transform: translateY(-50%);
          color: #c0c4cc;
        }
        
        .search-input {
          padding-left: 30px;
        }
      }
      
      .region-cascader {
        width: 200px;
      }
      
      .region-select {
        width: 160px;
      }
    }
    
    .toolbar-right {
      display: flex;
      gap: 10px;
    }
  }
  
  .personnel-table {
    margin-bottom: 20px;
  }
  
  .form-hint {
    font-size: 12px;
    color: #909399;
    margin: 5px 0 0 0;
  }
}
</style>