新增页面

马宇豪

2025-01-23 e735896a68d8c1742859a06d7bc1c7c1bb61f57d

新增页面

 package.json

@@ -43,6 +43,7 @@
    "dayjs": "^1.11.12",
    "echarts": "5.4.0",
    "element-ui": "2.15.13",
    "file-loader": "^6.2.0",
    "file-saver": "2.0.5",
    "fuse.js": "6.4.3",
    "highlight.js": "9.18.5",

 src/api/specialOperationsPay/coalPay.js

对比新文件
@@ -0,0 +1,143 @@
import request from '@/utils/request'

// 数据分页
export function getCoalPayCategory(data) {
  return request({
    url: '/pay/coalCategory/list',
    method: 'post',
    data: data
  })
}

// 新增数据
export function addCoalPayCategory(data) {
  return request({
    url: '/pay/coalCategory/insert',
    method: 'post',
    data: data
  })
}

// 修改数据
export function updateCoalPayCategory(data) {
  return request({
    url: '/pay/coalCategory/update',
    method: 'post',
    data: data
  })
}

// 删除数据
export function delCoalPayCategory(data) {
  return request({
    url: '/pay/coalCategory/delete',
    method: 'post',
    data: data
  })
}

// 缴费列表
export function getCoalPayList(data) {
  return request({
    url: '/pay/coalPay/list',
    method: 'post',
    data: data
  })
}

export function addCoalPay(data) {
  return request({
    url: '/pay/coalPay/insert',
    method: 'post',
    data: data
  })
}

export function editCoalPay(data) {
  return request({
    url: '/pay/coalPay/update',
    method: 'post',
    data: data
  })
}

export function delCoalPay(data) {
  return request({
    url: '/pay/coalPay/delete',
    method: 'post',
    data: data
  })
}

export function updateCoalPayType(data) {
  return request({
    url: '/pay/coalPay/updateType',
    method: 'post',
    data: data
  })
}

// 学员列表
export function getCoalPayStudentList(id) {
  return request({
    url: '/pay/coalPayStudent/studentList/' + id,
    method: 'get',
  })
}

export function addCoalPayStu(data) {
  return request({
    url: '/pay/coalPayStudent/insert',
    method: 'post',
    data: data
  })
}

export function editCoalPayStu(data) {
  return request({
    url: '/pay/coalPayStudent/update',
    method: 'post',
    data: data
  })
}

export function delCoalPayStu(data) {
  return request({
    url: '/pay/coalPayStudent/delete',
    method: 'post',
    data: data
  })
}

// 查询开票信息
export function getTicketList(data) {
  return request({
    url: '/pay/coalCategory/ticketList',
    method: 'post',
    data: data
  })
}

export function addTicket(data) {
  return request({
    url: '/pay/coalCategory/saveTicket',
    method: 'post',
    data: data
  })
}

export function editTicket(data) {
  return request({
    url: '/pay/coalCategory/updateTicket',
    method: 'post',
    data: data
  })
}

export function findStudent(query) {
  return request({
    url: '/pay/coalPay/findStudent',
    method: 'get',
    params: query
  })
}

 src/api/specialOperationsPay/notCoalPay.js

对比新文件
@@ -0,0 +1,122 @@
import request from '@/utils/request'

// 数据分页
export function getNotCoalPayCategory(query) {
  return request({
    url: '/pay/nonCoalCategory/list',
    method: 'get',
    params: query
  })
}

// 新增数据
export function addNotCoalPayCategory(data) {
  return request({
    url: '/pay/nonCoalCategory/add',
    method: 'post',
    data: data
  })
}

// 修改数据
export function updateNotCoalPayCategory(data) {
  return request({
    url: '/pay/nonCoalCategory/edit',
    method: 'post',
    data: data
  })
}

// 删除数据
export function delNotCoalPayCategory(ids) {
  return request({
    url: '/pay/nonCoalCategory/' + ids,
    method: 'delete'
  })
}

// 查询缴费
export function getNonCoalPayList(query) {
  return request({
    url: '/pay/nonCoalPay/list',
    method: 'get',
    params: query
  })
}

// 新增缴费
export function addNonCoalPay(data) {
  return request({
    url: '/pay/nonCoalPay/add',
    method: 'post',
    data: data
  })
}

// 修改缴费类型
export function editPayTypeInfo(query) {
  return request({
    url: '/pay/nonCoalPay/editPayTypeStatus',
    method: 'get',
    params: query
  })
}

// 获取详情
export function getPayTypeInfo(id) {
  return request({
    url: '/pay/nonCoalPay/getInfo/' + id,
    method: 'get'
  })
}

// 删除数据
export function delNonCoalPay(ids) {
  return request({
    url: '/pay/nonCoalPay/' + ids,
    method: 'delete'
  })
}

// 获取学员
export function getNonCoalPayStudents(id) {
  return request({
    url: '/pay/nonCoalPay/getNonCoalPayStudentByPayId/' + id,
    method: 'get'
  })
}

// 新增学员
export function addNonCoalStu(data) {
  return request({
    url: '/pay/nonCoalPay/addNonCoalStu',
    method: 'post',
    data: data
  })
}

// 修改学员
export function editNonCoalStu(data) {
  return request({
    url: '/pay/nonCoalPay/editNonCoalStu',
    method: 'post',
    data: data
  })
}

// 删除学员
export function delNonCalStu(ids) {
  return request({
    url: '/pay/nonCoalPay/delNonCalStu/' + ids,
    method: 'delete'
  })
}

// 查询
export function nonCoalSelectH5(data) {
  return request({
    url: '/pay/nonCoalPay/nonCoalSelectH5',
    method: 'get',
    params: data
  })
}

 src/assets/images/noData.png

 src/assets/studentInfo.xlsx

Binary files differ

 src/permission.js

@@ -8,7 +8,7 @@

NProgress.configure({ showSpinner: false })

const whiteList = ['/login', '/register']
const whiteList = ['/login', '/register','/singlePage']

router.beforeEach((to, from, next) => {
  NProgress.start()

 src/router/index.js

@@ -61,6 +61,16 @@
    component: () => import('@/views/error/401'),
    hidden: true
  },
  {
    path: '/cert',
    component: () => import('@/views/onlineEducation/classCertManage/index'),
    hidden: true
  },
  {
    path: '/singlePage',
    component: () => import('@/views/specialOperationsPay/singlePage/index'),
    hidden: true
  },
  // {
  //   path: '',
  //   component: Layout,

 src/utils/request.js

@@ -92,9 +92,8 @@
        MessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', { confirmButtonText: '重新登录', cancelButtonText: '取消', type: 'warning' }).then(() => {
          isRelogin.show = false;
          store.dispatch('LogOut').then(() => {
            // location.href = '/index';
            let indexUrl = this.$store.state.permission.indexPage
            location.href = indexUrl;
            // let indexUrl = this.$store.state.permission.indexPage
            location.href = '/index';
          })
      }).catch(() => {
        isRelogin.show = false;

 src/views/specialOperationsPay/coalPay/components/addDialog.vue

对比新文件
@@ -0,0 +1,293 @@
<template>
  <el-dialog
    :title="dialogStatus==='add'?'新增':'编辑'"
    :visible.sync="dialogVisible"
    :modal-append-to-body="false"
    :close-on-click-modal="false"
    width="700px"
    :before-close="handleClose"
  >
    <div class="infoTitle">
      <div>组织架构名称：<span style="font-weight: bolder">{{deptName}}</span></div>
<!--      <div style="margin-left: 15px">管辖行政区划：<span style="font-weight: bolder">{{districtName}}</span></div>-->
    </div>
    <el-form ref="dataForm" :model="dataForm"  :rules="rules" label-position="right" label-width="150px" style="padding-right: 50px" element-loading-text="保存中...">
      <el-form-item label="批次名称:" prop="batchName">
        <el-input v-model.trim="dataForm.batchName"/>
      </el-form-item>
<!--      <el-form-item label="所属区划:" prop="districtCode">-->
<!--        <el-select v-model="dataForm.districtCode" placeholder="行政区划" @change="getNewCategoryList">-->
<!--          <el-option-->
<!--            v-for="item in areaList"-->
<!--            :key="item.id"-->
<!--            :label="item.name"-->
<!--            :value="item.code">-->
<!--          </el-option>-->
<!--        </el-select>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="考试点:" prop="deptId">-->
<!--        <el-select v-model="dataForm.deptId" size="small" placeholder="请选择考试点">-->
<!--          <el-option-->
<!--            v-for="item in examList"-->
<!--            :key="item.siteId"-->
<!--            :label="item.siteName"-->
<!--            :value="item.siteId">-->
<!--          </el-option>-->
<!--        </el-select>-->
<!--      </el-form-item>-->
      <el-form-item label="所属缴费周期：" prop="year">
        <div style="display: flex">
          <el-date-picker
            v-model="dataForm.year"
            type="year"
            value-format="yyyy"
            placeholder="选择年">
          </el-date-picker>
          <el-select v-model="dataForm.quarter" placeholder="请选择季度" style="width: 150px;margin-left: 5px" clearable>
            <el-option
              v-for="item in quarterList"
              :key="item.id"
              :label="item.label"
              :value="item.id">
            </el-option>
          </el-select>
        </div>
      </el-form-item>
      <el-form-item label="缴费类型:" prop="payType">
        <el-radio-group v-model="dataForm.payType" @change="changeRadio" v-removeAriaHidden>
          <el-radio
            v-for="item in payTypeList"
            :key="item.id"
            :label="item.id"
          >{{item.label}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="dataForm.payType === 1 || dataForm.payType === 3 || dataForm.payType === 4"  label="理论类别:" prop="dealId">
          <el-select v-model="dataForm.dealId" placeholder="请选择" style="width: 100%" clearable>
            <el-option
              v-for="item in dealList"
              :key="item.id"
              :label="item.subjectName"
              :value="item.id">
            </el-option>
          </el-select>
      </el-form-item>
      <el-form-item v-if="dataForm.payType === 2 || dataForm.payType === 3" label="实操类别:" prop="operateId">
          <el-select v-model="dataForm.operateId" placeholder="请选择" style="width: 100%" clearable>
            <el-option
              v-for="item in operationList"
              :key="item.id"
              :label="item.subjectName"
              :value="item.id">
            </el-option>
          </el-select>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="onSubmit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script >
import { addPlat, updatePlat } from '@/api/onlineEducation/plat'
import {addNonCoalPay, getNotCoalPayCategory} from "@/api/specialOperationsPay/notCoalPay";
import store from "@/store";
import {addCoalPay, getCoalPayCategory} from "@/api/specialOperationsPay/coalPay";

export default {
  name: 'addUser',
  components: {
  },
  data() {
    return {
      dialogVisible: false,
      dialogStatus: '',
      deptName: '',
      districtName: '',
      rules: {
        batchName: [{ required: true, message: '请输入批次名称', trigger: 'blur' }],
        year: [{ required: true, message: '请选择缴费周期', trigger: 'blur' }],
        quarter: [{ required: true, message: '请选择缴费周期', trigger: 'blur' }],
        payType: [{ required: true, message: '请选择季度', trigger: 'blur' }],
        operateId: [{ required: true, message: '请选择实操类别', trigger: 'blur' }],
        dealId: [{ required: true, message: '请选择理论类别', trigger: 'blur' }],
      },
      dataForm: {},
      areaList: [],
      examList: [],
      quarterList: [
        {
          id: 1,
          label: '第一季度'
        },
        {
          id: 2,
          label: '第二季度'
        },
        {
          id: 3,
          label: '第三季度'
        },
        {
          id: 4,
          label: '第四季度'
        },
      ],
      payTypeList: [
        {
          id: 1,
          label: '初训理论'
        },
        {
          id: 2,
          label: '初训实操'
        },
        {
          id: 3,
          label: '初训理论与实操'
        },
        {
          id: 4,
          label: '复训理论'
        },
      ],
      dealList: [],
      operationList: []
    }
  },
  created() {

  },
  methods: {
    openDialog (type, data, areaList, examList) {
      const userInfo = store.getters && store.getters.userInfo
      this.deptName = userInfo.dept.deptName
      this.districtName = userInfo.district.districtName
      this.resetDataForm(userInfo)
      this.areaList = areaList
      this.examList = examList
      this.dialogVisible = true
      this.dialogStatus = type
      if(this.dialogStatus == 'edit') {
        this.dataForm = data;
      }
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    getCateGoryList(type) {
      getCoalPayCategory({categoryType: type,pageNum: 1, pageSize: 999}).then((res) => {
        if (res.code == 200) {
          if(type == 1){
            this.dealList = res.rows
          }else{
            this.operationList = res.rows
          }
        }
      })
    },

    // getNewCategoryList(val){
    //   if(this.dataForm.payType){
    //     this.changeRadio(this.dataForm.payType)
    //   }
    // },

    changeRadio(val){
      if(val ==3){
        this.getCateGoryList(1)
        this.getCateGoryList(2)
      }else if(val == 1 || val == 4){
        this.getCateGoryList(1)
      }else{
        this.getCateGoryList(2)
      }
      this.dataForm.dealId = null
      this.dataForm.operateId = null
    },
    handleClose() {
      this.dialogVisible = false;
      this.$emit("getList");
    },
    onSubmit() {
      this.$refs["dataForm"].validate( async valid => {
        if (valid) {
          if(this.dialogStatus == 'add'){
            if(this.dataForm.payType == 3){
              this.dataForm.coalPayCategoryies = [this.transFormObj(this.dealList.find(i=>i.id == this.dataForm.dealId)),this.transFormObj(this.operationList.find(i=>i.id == this.dataForm.operateId))]
            }else if(this.dataForm.payType == 1 || this.dataForm.payType == 4){
              this.dataForm.coalPayCategoryies = [this.transFormObj(this.dealList.find(i=>i.id == this.dataForm.dealId))]
            }else{
              this.dataForm.coalPayCategoryies = [this.transFormObj(this.operationList.find(i=>i.id == this.dataForm.operateId))]
            }
            this.dataForm.amount = this.dataForm.coalPayCategoryies.map(i=>i.categoryAmount).reduce((acc, current) => acc + current, 0)
            this.dataForm.coalPayCategoryies = this.dataForm.coalPayCategoryies.map(({categoryType,coalCategoryId})=>{return {categoryType,coalCategoryId}})
            console.log(this.dataForm.coalPayCategoryies)
            const {dealId, operateId,payPersonType,...data} = this.dataForm
            const res = await addCoalPay(data);
            if(res.code == 200) {
              this.$emit("getList");
              this.dialogVisible = false;
              this.$message({
                type:'success',
                message: '新增成功'
              })
            }else{
              this.$message({
                type:'warning',
                message: res.msg
              })
            }
          }else {
            // const res = await updatePlat(this.dataForm);
            // if(res.code == 200) {
            //   this.$emit("getList");
            //   this.dialogVisible = false;
            //   this.$message({
            //     type:'success',
            //     message: '编辑成功'
            //   })
            // }else{
            //   this.$message({
            //     type:'warning',
            //     message: res.msg
            //   })
            // }
          }
        }
      })

    },

    transFormObj(obj){
      return {
        categoryAmount: obj.amount,
        categoryType: obj.categoryType,
        coalCategoryId: obj.id
      }
    },

    resetDataForm(info) {
      this.dataForm = {
        payPersonType: 1,
        deptId: info.dept.deptId,
        dealId: null,
        operateId: null
      }
    },
  }
}

</script>
<style scoped>
.infoTitle{
  margin-top:-10px;
  margin-bottom:20px;
  display: flex;
  justify-content: space-around;
  font-size: 16px
}

</style>

 src/views/specialOperationsPay/coalPay/components/batchPay.vue

文件名从 src/views/specialOperationsPay/notCoalPay/components/addStuDialog.vue 修改
@@ -1,6 +1,6 @@
<template>
  <el-dialog
    :title="dialogStatus==='add'?'新增':'编辑'"
    title="批量缴费"
    :visible.sync="dialogVisible"
    :modal-append-to-body="false"
    :close-on-click-modal="false"
@@ -8,28 +8,18 @@
    :before-close="handleClose"
  >
    <el-form ref="dataForm" :model="dataForm"  :rules="rules" label-position="right" label-width="150px" style="padding-right: 50px" element-loading-text="保存中...">
      <el-form-item label="姓名:" prop="name">
        <el-input v-model.trim="dataForm.name"/>
      </el-form-item>
      <el-form-item label="性别:" prop="sex">
        <el-radio-group v-model="dataForm.sex">
          <el-radio label="0">男</el-radio>
          <el-radio label="1">女</el-radio>
      <el-form-item label="缴款人类型:" prop="type">
        <el-radio-group v-model="dataForm.type">
          <el-radio label="0">团体</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="身份证号:" prop="idCard">
        <el-input v-model.trim="dataForm.idCard"/>
      <el-form-item label="缴款单位名称:" prop="name">
        <el-input v-model.trim="dataForm.name"/>
      </el-form-item>
      <el-form-item label="手机号:" prop="phone">
        <el-input v-model.trim="dataForm.phone"/>
      <el-form-item label="缴款单位证件号:" prop="cardNo">
        <el-input v-model.trim="dataForm.cardNo"/>
      </el-form-item>
    </el-form>
    <el-alert

      :closable="false"
      title="提示：请务必填写准确，将用于个人缴费查询。"
      type="warning">
    </el-alert>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="onSubmit">确 定</el-button>
@@ -42,30 +32,16 @@
import { verifySimplePhone } from '@/utils/validate'

export default {
  name: 'addUser',
  name: 'batchPay',
  components: {
  },
  data() {
    let validatePhone = (rule, value, callback)=>{
      if(value === ''){
        callback(new Error('请输入手机号'))
      }else{
        if(!verifySimplePhone(value)){
          callback(new Error('手机号格式有误'))
        }else{
          callback()
        }
      }
    }
    return {
      dialogVisible: false,
      dialogStatus: '',

      rules: {
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        idCard: [{ required: true, message: '请输入身份证号', trigger: 'blur' }],
        phone:[{ required: true, validator: validatePhone, trigger: 'blur' }],
        sex: [{ required: true, message: '请选择性别', trigger: 'blur' }],
        name: [{ required: true, message: '请输入单位名称', trigger: 'blur' }],
        cardNo: [{ required: true, message: '请输入单位证件号', trigger: 'blur' }]
      },
      dataForm: {},


 src/views/specialOperationsPay/coalPay/components/studentDialog.vue

对比新文件
@@ -0,0 +1,453 @@
<template>
  <div>
    <el-dialog :visible.sync="dialogVisible" width="800px" append-to-body class="stu">
      <div class="infoTitle">
        <div>批次名称：<span>{{stuInfo.batchName}}</span></div>
<!--        <div style="margin-left: 35px">所属区划：<span>{{stuInfo.districtName}}</span></div>-->
      </div>
      <div class="infoTitle">
        <div>组织架构：<span>{{stuInfo.deptName}}</span></div>
      </div>
      <el-form :model="stuInfo" label-width="125px">
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="缴费周期：">
              <span><span>{{stuInfo.year}}</span></span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="缴费类型：">
              <span>{{stuInfo.payType == 1?'初训理论':stuInfo.payType == 2?'初训实操':stuInfo.payType == 3?'初训理论与实操':stuInfo.payType == 4?'复训理论':''}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12" v-if="stuInfo.payType === 1 || stuInfo.payType === 3 || stuInfo.payType === 4">
            <el-form-item label="理论类别：">
              <span>{{stuInfo.coalCategoryList.find(i=>i.categoryType == 1).subjectName}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="stuInfo.payType === 2 || stuInfo.payType === 3">
            <el-form-item label="实操类别：">
              <span>{{stuInfo.coalCategoryList.find(i=>i.categoryType == 2).subjectName}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item label="单人应缴：" prop="timeRange">
              <span>{{stuInfo.amount}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="总计应缴费：" prop="timeRange">
              <span>{{ stuInfo.totalCountFee }}元</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="已完成缴费：" prop="timeRange">
              <span>{{stuInfo.payCountFee}}元</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="剩余未缴费：" prop="timeRange">
              <span>{{stuInfo.unPayCountFee}}元</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item label="当前总计应缴：" prop="timeRange">
              <span>{{stuInfo.totalCount}}人</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="已完成缴费：" prop="timeRange">
              <span>{{stuInfo.payCount}}人</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="当前未完成缴费：" prop="timeRange">
              <span>{{stuInfo.unPayCount}}人</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

  <!--    表格-->
      <div style="margin: 20px 15px;display: flex">
        <el-button size="small"  type="primary" @click="handleAddStu('add',{})">添加学员</el-button>
        <el-button size="small"  type="primary" @click="importDialog = true">批量导入</el-button>
      </div>
      <el-table v-loading="loading" :data="stuList">
        <el-table-column label="序号" align="center" type="index" />
        <el-table-column label="姓名" align="center" prop="name" />
        <el-table-column label="身份证号" align="center" prop="idCard" />
        <el-table-column label="手机号" align="center" prop="phone" />
        <el-table-column label="性别" align="center" prop="sex">
          <template #default="scope">
            {{scope.row.sex == 0?'男':scope.row.sex == 1?'女':'未知'}}
          </template>
        </el-table-column>
        <el-table-column label="财政缴款码" align="center" prop="payCode">
          <template #default="scope">
            {{scope.row.payCode?scope.row.payCode:'--'}}
          </template>
        </el-table-column>
        <el-table-column label="是否已缴" align="center" prop="payStatus">
          <template #default="scope">
            {{scope.row.payStatus == 0?'未缴':scope.row.payStatus == 1?'已缴':'未缴'}}
          </template>
        </el-table-column>
        <el-table-column label="类别" align="center" prop="payType">
          <template #default="scope">
            {{scope.row.payType == 1?'个人':scope.row.payType == 2?'集体':'个人'}}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button size="mini" type="text" v-if="scope.row.payStatus == 1" style="color: #1890ff">查看票据</el-button>
            <el-button size="mini" type="text" style="color: #1890ff" @click="handleAddStu('edit',scope.row)">修改</el-button>
            <el-button size="mini" type="text" style="color:lightcoral" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getStuList"
      />
    </el-dialog>
    <el-dialog
      :title="dialogStatus==='add'?'新增':'编辑'"
      :visible.sync="addDialog"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      width="450px"
      :before-close="handleClose"
    >
      <el-form ref="dataForm" :model="dataForm" :rules="addRules" label-position="right" label-width="150px" style="padding-right: 50px" element-loading-text="保存中...">
        <el-form-item label="姓名:" prop="name">
          <el-input v-model.trim="dataForm.name"/>
        </el-form-item>
        <el-form-item label="性别:" prop="sex">
          <el-radio-group v-model="dataForm.sex">
            <el-radio :label="0">男</el-radio>
            <el-radio :label="1">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="身份证号:" prop="idCard">
          <el-input v-model.trim="dataForm.idCard"/>
        </el-form-item>
        <el-form-item label="手机号:" prop="phone">
          <el-input v-model.trim="dataForm.phone"/>
        </el-form-item>
      </el-form>
      <el-alert
        :closable="false"
        title="提示：请务必填写准确，将用于个人缴费查询。"
        type="warning">
      </el-alert>
      <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="onSubmit">确 定</el-button>
    </span>
    </el-dialog>
    <el-dialog
      :visible.sync="importDialog"
      append-to-body
      title="批量导入"
      :close-on-click-modal="false"
    >
      <el-form
        ref="importForm"
        label-position="right"
        label-width="120px"
        style="margin-left:50px;width:500px;"
        element-loading-text="导入中..."
      >
        <el-form-item label="导入文件:">
          <el-upload
            :action="uploadUrl"
            :auto-upload="false"
            :on-error="onError"
            :on-success="onSuccess"
            accept=".xlsx,.xls"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :before-upload="picSize"
            ref="upload"
            :limit="1"
            :data={coalPayId:stuInfo.id}
            :headers="header"
            :on-exceed="handleExceed"
            :file-list="fileList">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传excel(.xlsx、.xls后缀)文件，且不超过2M</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="excel参考模板:">
          <el-button type="text" @click="viewHandle">下载模板</el-button>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="importDialog = false">取消</el-button>
        <el-button  type="primary" @click="importHandle()">导入</el-button>
      </div>
    </el-dialog>
 </div>
</template>
<script>
import {verifyIdCard, verifySimplePhone} from "@/utils/validate";
import {addCoalPayStu, delCoalPayStu, editCoalPayStu, getCoalPayStudentList} from "@/api/specialOperationsPay/coalPay";
import exampleFile from '@/assets/studentInfo.xlsx'
import {getToken} from "@/utils/auth";
export default {
  name: 'addStu',
  components: {},
  data() {
    let validatePhone = (rule, value, callback)=>{
      if(value === ''){
        callback(new Error('请输入手机号'))
      }else{
        if(!verifySimplePhone(value)){
          callback(new Error('手机号格式有误'))
        }else{
          callback()
        }
      }
    }
    let verifyId = (rule, value, callback)=>{
      if(value === ''){
        callback(new Error('请输入身份证号'))
      }else{
        if(!verifyIdCard(value)){
          callback(new Error('身份证号格式有误'))
        }else{
          callback()
        }
      }
    }
    return {
      open: false,
      id: null,
      dialogVisible: false,
      importDialog: false,
      loading: false,
      stuInfo: {},
      stuList: [],
      fileList: [],
      uploadUrl: process.env.VUE_APP_BASE_API + '/pay/coalPayStudent/import',
      header: {
        Authorization: "Bearer " + getToken()
      },
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      addDialog: false,
      dialogStatus: '',
      dataForm: {},
      addRules: {
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        idCard: [{ required: true, validator: verifyId, trigger: 'blur' }],
        phone:[{ required: true, validator: validatePhone, trigger: 'blur' }],
        sex: [{ required: true, message: '请选择性别', trigger: 'blur' }]
      },
      exampleFile
    };
  },
  methods: {
    openDialog(val) {
      this.stuInfo = val
      this.getStuList(this.stuInfo.id)
      this.dialogVisible = true;
    },

    getStuList(id) {
      getCoalPayStudentList(id).then(res=>{
        if(res.code == 200){
          this.stuList = res.rows
          this.total = res.total
          this.stuInfo.totalCountFee = this.stuInfo.amount * this.total
          this.stuInfo.totalCount = this.total
          if(this.total == 0){
            this.stuInfo.payCount = 0
            this.stuInfo.payCountFee = 0
          }else{
            this.stuInfo.payCount = this.stuList.filter(i=>i.payStatus == 1).length
            this.stuInfo.payCountFee = this.stuInfo.payCount * this.stuInfo.amount
          }
          this.stuInfo.unPayCount = this.stuInfo.totalCount - this.stuInfo.payCount
          this.stuInfo.unPayCountFee = this.stuInfo.totalCountFee - this.stuInfo.payCountFee
        }
      })
    },

    handleAddStu(type,data){
      this.addDialog = true
      this.resetDataForm()
      if(type == 'add'){
        this.dataForm.coalPayId = this.stuInfo.id
      }else{
        const {id,coalPayId,name,idCard,sex,phone} = data
        this.dataForm = {id,coalPayId,name,idCard,sex,phone}
      }
      this.dialogStatus = type
    },

    viewHandle() {
      const link = document.createElement('a')
      link.href = exampleFile
      link.target = '_blank'
      link.download = '学员批量导入模版.xlsx'
      link.click()
    },

    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    picSize(rawFile){
      console.log(rawFile,'file')
      if(rawFile.size / 1024 / 1024 > 2){
        this.$message({
          type: 'warning',
          message: '文件大小不能超过2M'
        });
        return false
      }
    },

    async importHandle(){
      const t = this
      await t.$refs.upload.submit()
      t.importDialog = false
      setTimeout(()=>{
        t.getStuList(this.stuInfo.id)
        t.fileList = []
        t.$refs.upload.clearFiles()
      },800)
    },

    onError(){
      console.log("文件上传失败")
    },

    onSuccess(res, file, fileList){
      if(res.code == 200){
        this.$message({
          type:'success',
          message: res.msg
        })
      }else{
        this.$message({
          type:'warning',
          message: res.msg
        })
      }
    },

    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    },

    handleClose() {
      this.addDialog = false
    },
    onSubmit() {
      this.$refs["dataForm"].validate( async valid => {
        if (valid) {
          if(this.dialogStatus == 'add'){
            const res = await addCoalPayStu(this.dataForm)
            if(res.code == 200) {
              this.getStuList(this.stuInfo.id)
              this.addDialog = false
              this.$message({
                type:'success',
                message: '新增成功'
              })
            }else{
              this.$message({
                type:'warning',
                message: res.msg
              })
            }
          }else {
            const res = await editCoalPayStu(this.dataForm)
            if(res.code == 200) {
              this.getStuList(this.stuInfo.id)
              this.addDialog = false
              this.$message({
                type:'success',
                message: '修改成功'
              })
            }else{
              this.$message({
                type:'warning',
                message: res.msg
              })
            }
          }
        }
      })
    },
    handleDelete(row){
      this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await delCoalPayStu([row.id])
        if(res.code == 200){
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          await this.getStuList(this.stuInfo.id)
        }else{
          this.$message({
            type: 'warning',
            message: res.msg
          });
        }
      }).catch(() => {

      });
    },
    resetDataForm() {
      this.dataForm = {
      }
    },
  }
}

</script>

<style scoped lang="scss">
.stu{
  ::v-deep .el-form-item {
   margin-bottom: 5px;
  }
  .infoTitle{
    margin-bottom:10px;
    margin-left: 40px;
    display: flex;
    font-size: 16px;
    span{
      font-weight: bolder;
    }
  }

}

</style>

 src/views/specialOperationsPay/coalPay/index.vue

对比新文件
@@ -0,0 +1,237 @@
<template>
  <div class="app-container">
    <div>
      <el-button
        size="medium"
        style="margin-bottom: 10px;background-color: #0FC7F0;color: white"
        @click="handleAdd('add',{})"
        v-if="isAhthority"
      >录入批次
      </el-button>
      <el-date-picker
        style="margin-left: 30px;width: 300px"
        size="small"
        v-model="dateValue"
        @change="changeDate"
        type="daterange"
        format="yyyy-MM-dd"
        value-format="yyyy-MM-dd"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
      <el-cascader v-model="queryParams.deptId" size="small" style="margin-left: 15px" :options="deptOptions" placeholder="组织架构" :props="{ expandTrigger: 'hover',checkStrictly: true,emitPath: false,value: 'id' }"></el-cascader>
      <el-button
        size="small"
        type="primary"
        style="margin-bottom: 10px;margin-left: 20px"
        @click="handleQuery()"
      >查询
      </el-button>
      <el-button
        size="small"
        type="primary"
        style="margin-bottom: 10px"
        @click="resetQuery()"
      >重置
      </el-button>
    </div>
    <el-table v-loading="loading" :data="payList" style="margin-top: 10px">
      <el-table-column label="序号" align="center" type="index"/>
      <el-table-column label="提交时间" align="center" prop="createTime"/>
      <el-table-column label="批次名称" align="center" prop="batchName"/>
      <el-table-column label="组织架构" align="center" prop="deptName"/>
<!--      <el-table-column label="所属地州" align="center" prop="districtName"/>-->
      <el-table-column label="缴费类型" align="center" prop="payType">
        <template #default="scope">
          {{scope.row.payType == 1?'初训理论':scope.row.payType == 2?'初训实操':scope.row.payType == 3?'初训理论与实操':scope.row.payType == 4?'复训理论':''}}
        </template>
      </el-table-column>
      <el-table-column label="单人（元）" align="center" prop="amount"/>
      <el-table-column label="人数" align="center">
        <template #default="scope">
          <span>{{scope.row.havePayNum}}</span>/{{scope.row.totalNum}}
        </template>
      </el-table-column>
      <el-table-column label="学员个人缴费" align="center" prop="batchName">
        <template #default="scope">
          <span v-if="scope.row.payPersonType == 1">已开启</span>
          <span v-if="scope.row.payPersonType == 2" style="color:red">已关闭</span>
          <el-button type="text" style="color:lightcoral" @click="updatePayType(scope.row)" v-if="scope.row.payPersonType == 1">关闭</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180px">
        <template #default="scope">
          <el-button v-if="isAhthority" size="mini" type="text" style="color: #1890ff" @click="handleViewStu(scope.row)">学员管理</el-button>
<!--          <el-button v-if="isAhthority" size="mini" type="text" style="color: #1890ff" @click="handleBatchPay(scope.row,'')">批量缴费</el-button>-->
          <el-button v-if="isAhthority" size="mini" type="text" style="color:lightcoral" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <add-dialog ref="addDialogRef" @getList="getList"></add-dialog>
    <stu-dialog ref="stuDialogRef" @getList="getList"></stu-dialog>
    <batch-pay ref="batchPayRef" @getList="getList"></batch-pay>
  </div>
</template>

<script>

import addDialog from './components/addDialog.vue'
import stuDialog from './components/studentDialog.vue'
import batchPay from "./components/batchPay.vue"
import {getExamPage} from "@/api/coalMine/placeManage/exam";
import {getAreaList} from "@/api/coalMine/placeManage/train";
import {delCoalPay, getCoalPayList, updateCoalPayType} from "@/api/specialOperationsPay/coalPay";
import store from "@/store";
import {deptTreeSelect} from "@/api/system/user";

export default {
  name: "nCoalPay",
  dicts: [],
  components: {addDialog, stuDialog, batchPay},
  data() {
    return {
      isDark: true,
      loading: false,
      single: true,
      multiple: true,
      showSearch: true,
      addForm: false,
      total: 0,
      areaList: [],
      deptOptions: [],
      dateValue: [],
      payList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        deptId: '',
        minDate: '',
        maxDate: ''
      },
      isAhthority: false
    };
  },
  created() {
    this.getDistrict()
    this.getList()
    this.getDeptList()
    const roles = store.getters && store.getters.roles
    if (roles.includes('admin') || roles.includes('mkexam') || roles.includes('feimeiexam')  ) {
      this.isAhthority = true
    } else {
      this.isAhthority = false
    }
  },
  methods: {
    getList() {
      this.queryParams.minDate = this.dateValue[0]?this.dateValue[0] + ' 00:00:00':''
      this.queryParams.maxDate = this.dateValue[1]?this.dateValue[1] + ' 23:59:59':''
      getCoalPayList( this.queryParams).then((res) => {
        if (res.code == 200) {
          this.payList = res.rows
          this.total = res.total
        }
      })
    },

    getDeptList() {
      deptTreeSelect().then(response => {
        this.deptOptions = response.data
      })
    },

    openUrl(url) {
      window.open(url, '_blank')
    },
    //行政区划
    async getDistrict() {
      const res = await getAreaList()
      if (res.code == 200) {
        this.areaList = res.data
      }
    },

    changeDate(val) {
      console.log('val', val)
    },
    handleAdd(type, data) {
      this.$refs.addDialogRef.openDialog(type, data, this.areaList,this.deptOptions);
    },
    handleViewStu(val) {
      this.$refs.stuDialogRef.openDialog(val)
    },
    handleBatchPay(val) {
      this.$refs.batchPayRef.openDialog(val);
    },
    handleQuery() {
      this.getList();
    },
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        deptId: '',
        minDate: '',
        maxDate: ''
      }
      this.dateValue = []
      this.getList()
    },
    updatePayType(row){
      this.$confirm('一旦关闭则无法重新开启个人缴费，必须批量缴完剩余所有学员。是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await updateCoalPayType({coalPayId: row.id,payPersonType: 2})
        if(res.code == 200){
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          await this.getList()
        }else{
          this.$message({
            type: 'warning',
            message: res.msg
          });
        }
      }).catch(() => {

      });
    },

    handleDelete(row){
      this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await delCoalPay([row.id])
        if(res.code == 200){
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          await this.getList()
        }else{
          this.$message({
            type: 'warning',
            message: res.msg
          });
        }
      }).catch(() => {

      });
    }
  }
};
</script>

 src/views/specialOperationsPay/coalWorkType/components/detailDialog.vue

对比新文件
@@ -0,0 +1,138 @@
<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    :modal-append-to-body="false"
    :close-on-click-modal="false"
    width="450px"
    :before-close="handleClose"
  >
    <el-form ref="dataForm" :model="dataForm"  :rules="rules" label-position="right" label-width="150px" style="padding-right: 50px" element-loading-text="保存中...">
      <el-form-item label="类别:" prop="categoryType">
        <el-radio-group v-model="dataForm.categoryType">
          <el-radio :label="1">理论</el-radio>
          <el-radio :label="2">实操</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="科目名称:" prop="subjectName">
        <el-input v-model.trim="dataForm.subjectName"/>
      </el-form-item>
      <el-form-item label="金额:" prop="amount">
        <el-input v-model.trim.number="dataForm.amount">
          <template #append>元</template>
        </el-input>
      </el-form-item>
      <el-form-item label="业务代码:" prop="businessCode">
        <el-input v-model.trim="dataForm.businessCode"/>
      </el-form-item>
      <el-form-item label="描述:" prop="describe">
        <el-input v-model.trim="dataForm.describe"/>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="onSubmit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script >
import { addPlat, updatePlat } from '@/api/onlineEducation/plat'
import { verifySimplePhone } from '@/utils/validate'
import {addCoalPayCategory, updateCoalPayCategory} from "@/api/specialOperationsPay/coalPay";

export default {
  name: 'detailDialog',
  components: {
  },
  data() {
    return {
      dialogVisible: false,
      title: '',
      rules: {
        categoryType: [{ required: true, message: '请选择类别', trigger: 'blur' }],
        subjectName: [{ required: true, message: '请输入科目名称', trigger: 'blur' }],
        amount: [{ required: true, message: '请输入金额', trigger: 'blur' }]
      },
      dataForm: {},

    }
  },
  created() {

  },
  methods: {
    openDialog (type, data) {
      this.resetDataForm()
      this.dialogVisible = true
      this.title = type == 'add'?'新增':'编辑'
      if(this.title == '编辑') {
        const {id,categoryType,subjectName,amount,describe} = data
        this.dataForm = {id,categoryType,subjectName,amount,describe}
      }
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    handleClose() {
      this.dialogVisible = false;
      this.$emit("getList");
    },
    onSubmit() {
      this.$refs["dataForm"].validate( async valid => {
        if (valid) {
          if(this.title == '新增'){
            console.log("this.dataForm",this.dataForm)
            const res = await addCoalPayCategory(this.dataForm);
            if(res.code == 200) {
              this.$emit("getList");
              this.dialogVisible = false;
              this.$message({
                type:'success',
                message: '新增成功'
              })
            }else{
              this.$message({
                type:'warning',
                message: res.msg
              })
            }
          }else {
            const res = await updateCoalPayCategory(this.dataForm);
            if(res.code == 200) {
              this.$emit("getList");
              this.dialogVisible = false;
              this.$message({
                type:'success',
                message: '编辑成功'
              })
            }else{
              this.$message({
                type:'warning',
                message: res.msg
              })
            }
          }
        }
      })

    },
    resetDataForm() {
      this.dataForm = {
      }
    },
  }
}

</script>
<style scoped>
.infoTitle{
  margin-top:-10px;
  margin-bottom:20px;
  display: flex;
  justify-content: space-around;
  font-weight: 800;
  font-size: 16px
}

</style>

 src/views/specialOperationsPay/coalWorkType/index.vue

对比新文件
@@ -0,0 +1,251 @@
<template>
  <div class="app-container">
    <div>
      <el-button
        type="primary"
        plain
        icon="el-icon-plus"
        @click="handleView('add')"
        v-hasPermi="['system:experts:add']"
      >新增</el-button>
      <el-button
        type="primary"
        plain
        icon="el-icon-plus"
        @click="openTicket()"
        v-hasPermi="['system:experts:add']"
      >开票信息维护</el-button>
      <el-radio-group v-model="queryParams.categoryType" style="margin-left: 10px;" @change="changeStatus">
        <el-radio-button>全部</el-radio-button>
        <el-radio-button :label="1">理论</el-radio-button>
        <el-radio-button :label="2">实操</el-radio-button>
      </el-radio-group>
    </div>

    <el-table v-loading="loading" :data="dataList" style="margin-top: 20px" :row-class-name="tableAddClass">
      <el-table-column label="类别" align="center" prop="categoryType">
        <template #default="scope">
          {{scope.row.categoryType == 1?'理论':scope.row.categoryType == 2?'实操':''}}
        </template>
      </el-table-column>
      <el-table-column label="科目名称" align="center" prop="subjectName" :show-overflow-tooltip="true" />
      <el-table-column label="金额（元）" align="center" prop="amount" />
      <el-table-column label="业务代码" align="center" prop="businessCode" />
      <el-table-column label="描述" align="center" prop="describe" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleView('edit',scope.row)"
          >编辑</el-button>
          <el-button
            size="mini"
            type="text"
            style="color: #f56c6c"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['system:experts:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="开票信息"
      :visible.sync="ticketDialog"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      width="50%"
    >
      <el-form ref="dataForm" :model="ticketForm"  :rules="ticketRules" label-position="right" label-width="150px" style="padding-right: 50px" element-loading-text="保存中...">
        <el-form-item label="开票单位名称:" prop="ticketCompanyName">
          <el-input v-model.trim="ticketForm.ticketCompanyName"/>
        </el-form-item>
        <el-form-item label="开票单位社会信用代码:" prop="ticketCompanyCode">
          <el-input v-model.trim="ticketForm.ticketCompanyCode"/>
        </el-form-item>
        <el-form-item label="开票人:" prop="drawer">
          <el-input v-model.trim="ticketForm.drawer"/>
        </el-form-item>
        <el-form-item label="复核人:" prop="check">
          <el-input v-model.trim="ticketForm.check"/>
        </el-form-item>
        <el-form-item label="单位编码:" prop="companyCode">
          <el-input v-model.trim="ticketForm.companyCode"/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
      <el-button @click="ticketDialog = false">取 消</el-button>
      <el-button type="primary" @click="onSubmit">确 定</el-button>
    </span>
    </el-dialog>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <detail-dialog ref="detailDialogRef" @getList = "getList"></detail-dialog>
  </div>
</template>

<script>
import detailDialog from './components/detailDialog.vue'
import {
  addCoalPayStu, addTicket,
  delCoalPayCategory,
  editCoalPayStu, editTicket,
  getCoalPayCategory,
  getTicketList
} from '@/api/specialOperationsPay/coalPay'
import Cookies from 'js-cookie'
import {delNotCoalPayCategory} from "@/api/specialOperationsPay/notCoalPay";
export default {
  name: "coalWorkType",
  dicts: [],
  components: { detailDialog},
  data() {
    return {
      loading: false,
      single: true,
      multiple: true,
      showSearch: true,
      addForm: false,
      total: 0,
      expertTypes: [],
      dataList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        categoryType: null,
      },
      ticketDialog: false,
      ticketForm: {},
      ticketRules:{
        ticketCompanyName: [{ required: true, message: '请输入开票单位名称', trigger: 'blur' }],
        ticketCompanyCode: [{ required: true, message: '请输入开票单位社会信用代码', trigger: 'blur' }],
        drawer:[{ required: true, message: '请输入开票人', trigger: 'blur' }],
        check: [{ required: true, message: '请输入复核人', trigger: 'blur' }],
        companyCode: [{ required: true, message: '请输入单位编码', trigger: 'blur' }]
      },
      ticketStatus: ''
    };
  },
  created() {
      this.getList();
  },
  methods: {
    getList(){
      this.loading = true;
      getCoalPayCategory(this.queryParams).then((res) => {
        if (res.code == 200) {
          this.dataList = res.rows
          this.total = res.total
          this.loading = false
        }
      })
    },
    changeStatus(val) {
      this.getList()
    },
    tableAddClass({ row, rowIndex }) {
      if (row.difference < row.duration) {
        return "tr-red";
      }
      return "";
    },
    async openTicket(){
      const res = await getTicketList()
      if(res.code == 200){
        if(res.data){
          this.ticketForm = res.data
          this.ticketStatus = 'edit'
        }else{
          this.ticketForm = {}
          this.ticketStatus = 'add'
        }
      }
      this.ticketDialog = true
    },

    onSubmit() {
      this.$refs["dataForm"].validate( async valid => {
        if (valid) {
          if(this.ticketStatus == 'add'){
            const res = await addTicket(this.ticketForm)
            if(res.code == 200) {
              this.getList()
              this.ticketDialog = false
              this.$message({
                type:'success',
                message: '新增成功'
              })
            }else{
              this.$message({
                type:'warning',
                message: res.msg
              })
            }
          }else {
            const res = await editTicket(this.ticketForm)
            if(res.code == 200) {
              this.getList()
              this.ticketDialog = false
              this.$message({
                type:'success',
                message: '修改成功'
              })
            }else{
              this.$message({
                type:'warning',
                message: res.msg
              })
            }
          }
        }
      })
    },

    handleQuery(){

    },
    resetQuery(){

    },
    handleDelete(row){
      this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await delCoalPayCategory([row.id])
        if(res.code == 200){
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          await this.getList()
        }else{
          this.$message({
            type: 'warning',
            message: res.msg
          });
        }
      }).catch(() => {

      });
    },
    handleView(type,data){
      this.$refs.detailDialogRef.openDialog(type,data);
    }
  }
};
</script>

<style scoped>
.app-container /deep/ .el-table .tr-red {
  color: red !important;
}
</style>

 src/views/specialOperationsPay/notCoalPay/components/addDialog.vue

@@ -8,58 +8,76 @@
    :before-close="handleClose"
  >
    <div class="infoTitle">
      <div>考试点名称：XXXXX</div>
      <div style="margin-left: 15px">管辖行政区划：XXXxxxx</div>
      <div>组织架构名称：<span style="font-weight: bolder">{{deptName}}</span></div>
      <div style="margin-left: 15px">管辖行政区划：<span style="font-weight: bolder">{{districtName}}</span></div>
    </div>
    <el-form ref="dataForm" :model="dataForm"  :rules="rules" label-position="right" label-width="150px" style="padding-right: 50px" element-loading-text="保存中...">
      <el-form-item label="批次名称:" prop="batchName">
        <el-input v-model.trim="dataForm.batchName"/>
      </el-form-item>
<!--      <el-form-item label="所属区划:" prop="districtCode">-->
<!--        <el-select v-model="dataForm.districtCode" placeholder="行政区划" @change="getNewCategoryList">-->
<!--          <el-option-->
<!--            v-for="item in areaList"-->
<!--            :key="item.id"-->
<!--            :label="item.name"-->
<!--            :value="item.code">-->
<!--          </el-option>-->
<!--        </el-select>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="考试点:" prop="deptId">-->
<!--        <el-select v-model="dataForm.deptId" size="small" placeholder="请选择考试点">-->
<!--          <el-option-->
<!--            v-for="item in examList"-->
<!--            :key="item.siteId"-->
<!--            :label="item.siteName"-->
<!--            :value="item.siteId">-->
<!--          </el-option>-->
<!--        </el-select>-->
<!--      </el-form-item>-->
      <el-form-item label="所属缴费周期：" prop="year">
        <div style="display: flex">
          <el-select v-model="dataForm.year" placeholder="请选择年份" style="width: 150px" clearable>
            <el-option
              v-for="item in yearList"
              :key="item.id"
              :label="item.label"
              :value="item.label">
            </el-option>
          </el-select>
          <el-date-picker
            v-model="dataForm.year"
            type="year"
            value-format="yyyy"
            placeholder="选择年">
          </el-date-picker>
          <el-select v-model="dataForm.quarter" placeholder="请选择季度" style="width: 150px;margin-left: 5px" clearable>
            <el-option
              v-for="item in quarterList"
              :key="item.id"
              :label="item.label"
              :value="item.label">
              :value="item.id">
            </el-option>
          </el-select>
        </div>
      </el-form-item>
      <el-form-item label="缴费类型:" prop="type">
        <el-radio-group v-model="dataForm.type" @change="changeRadio" v-removeAriaHidden>
      <el-form-item label="缴费类型:" prop="payType">
        <el-radio-group v-model="dataForm.payType" @change="changeRadio" v-removeAriaHidden>
          <el-radio
            v-for="item in payType"
            v-for="item in payTypeList"
            :key="item.id"
            :label="item.id"
          >{{item.label}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="dataForm.type === 1 || dataForm.type === 3 || dataForm.type === 4 "  label="理论类别:"  prop="deal" style="margin-left: 85px">
          <el-select v-model="dataForm.deal" placeholder="请选择" style="width: 84%" clearable>
      <el-form-item v-if="dataForm.payType === 1 || dataForm.payType === 3 || dataForm.payType === 4"  label="理论类别:" prop="dealId">
          <el-select v-model="dataForm.dealId" placeholder="请选择" style="width: 100%" clearable>
            <el-option
              v-for="item in dealList"
              :key="item.id"
              :label="item.label"
              :label="item.subjectName"
              :value="item.id">
            </el-option>
          </el-select>
      </el-form-item>
      <el-form-item v-if="dataForm.type === 2 || dataForm.type === 3" label="实操类别:" prop="operation" style="margin-left: 85px">
          <el-select v-model="dataForm.operation" placeholder="请选择" style="width: 84%" clearable>
      <el-form-item v-if="dataForm.payType === 2 || dataForm.payType === 3" label="实操类别:" prop="operateId">
          <el-select v-model="dataForm.operateId" placeholder="请选择" style="width: 100%" clearable>
            <el-option
              v-for="item in operationList"
              :key="item.id"
              :label="item.label"
              :label="item.subjectName"
              :value="item.id">
            </el-option>
          </el-select>
@@ -74,6 +92,8 @@

<script >
import { addPlat, updatePlat } from '@/api/onlineEducation/plat'
import {addNonCoalPay, getNotCoalPayCategory} from "@/api/specialOperationsPay/notCoalPay";
import store from "@/store";

export default {
  name: 'addUser',
@@ -83,45 +103,19 @@
    return {
      dialogVisible: false,
      dialogStatus: '',

      deptName: '',
      districtName: '',
      rules: {
        batchName: [{ required: true, message: '请输入批次名称', trigger: 'blur' }],
        year: [{ required: true, message: '请选择缴费周期', trigger: 'blur' }],
        type: [{ required: true, message: '请选择缴费类型', trigger: 'blur' }],
        operation: [{ required: true, message: '请选择实操类别', trigger: 'blur' }],
        deal: [{ required: true, message: '请选择理论类别', trigger: 'blur' }],
        quarter: [{ required: true, message: '请选择缴费周期', trigger: 'blur' }],
        payType: [{ required: true, message: '请选择季度', trigger: 'blur' }],
        operateId: [{ required: true, message: '请选择实操类别', trigger: 'blur' }],
        dealId: [{ required: true, message: '请选择理论类别', trigger: 'blur' }],
      },
      dataForm: {},
      yearList: [
        {
          id: 0,
          label: '2024年'
        },
        {
          id: 1,
          label: '2025年'
        },
        {
          id: 2,
          label: '2026年'
        },
        {
          id: 3,
          label: '2027年'
        },
        {
          id: 4,
          label: '2028年'
        },
        {
          id: 5,
          label: '2029年'
        },
        {
          id: 6,
          label: '2030年'
        },
      ],
      areaList: [],
      examList: [],
      quarterList: [
        {
          id: 1,
@@ -140,7 +134,7 @@
          label: '第四季度'
        },
      ],
      payType: [
      payTypeList: [
        {
          id: 1,
          label: '初训理论'
@@ -166,10 +160,15 @@

  },
  methods: {
    openDialog (type, data) {
      this.resetDataForm();
      this.dialogVisible = true;
      this.dialogStatus = type;
    openDialog (type, data, areaList, examList) {
      const userInfo = store.getters && store.getters.userInfo
      this.deptName = userInfo.dept.deptName
      this.districtName = userInfo.district.districtName
      this.resetDataForm(userInfo)
      this.areaList = areaList
      this.examList = examList
      this.dialogVisible = true
      this.dialogStatus = type
      if(this.dialogStatus == 'edit') {
        this.dataForm = data;
      }
@@ -177,10 +176,35 @@
        this.$refs['dataForm'].clearValidate()
      })
    },
    getCateGoryList(type) {
      getNotCoalPayCategory({categoryType: type,districtCode: this.dataForm.districtCode?this.dataForm.districtCode:''}).then((res) => {
        if (res.code == 200) {
          if(type == 1){
            this.dealList = res.rows
          }else{
            this.operationList = res.rows
          }
        }
      })
    },

    // getNewCategoryList(val){
    //   if(this.dataForm.payType){
    //     this.changeRadio(this.dataForm.payType)
    //   }
    // },

    changeRadio(val){
      console.log('val',val)
      this.dataForm.deal = null
      this.dataForm.operation = null
      if(val ==3){
        this.getCateGoryList(1)
        this.getCateGoryList(2)
      }else if(val == 1 || val == 4){
        this.getCateGoryList(1)
      }else{
        this.getCateGoryList(2)
      }
      this.dataForm.dealId = null
      this.dataForm.operateId = null
    },
    handleClose() {
      this.dialogVisible = false;
@@ -190,21 +214,29 @@
      this.$refs["dataForm"].validate( async valid => {
        if (valid) {
          if(this.dialogStatus == 'add'){
            console.log("this.dataForm",this.dataForm)
            // const res = await addPlat(this.dataForm);
            // if(res.code == 200) {
            //   this.$emit("getList");
            //   this.dialogVisible = false;
            //   this.$message({
            //     type:'success',
            //     message: '新增成功'
            //   })
            // }else{
            //   this.$message({
            //     type:'warning',
            //     message: res.msg
            //   })
            // }
            if(this.dataForm.payType == 3){
              this.dataForm.nonCoalPayCategoryList = [this.transFormObj(this.dealList.find(i=>i.id == this.dataForm.dealId)),this.transFormObj(this.operationList.find(i=>i.id == this.dataForm.operateId))]
            }else if(this.dataForm.payType == 1 || this.dataForm.payType == 4){
              this.dataForm.nonCoalPayCategoryList = [this.transFormObj(this.dealList.find(i=>i.id == this.dataForm.dealId))]
            }else{
              this.dataForm.nonCoalPayCategoryList = [this.transFormObj(this.operationList.find(i=>i.id == this.dataForm.operateId))]
            }
            this.dataForm.amount = this.dataForm.nonCoalPayCategoryList.map(i=>i.categoryAmount).reduce((acc, current) => acc + current, 0)
            const {dealId, operateId, ...data} = this.dataForm
            const res = await addNonCoalPay(data);
            if(res.code == 200) {
              this.$emit("getList");
              this.dialogVisible = false;
              this.$message({
                type:'success',
                message: '新增成功'
              })
            }else{
              this.$message({
                type:'warning',
                message: res.msg
              })
            }
          }else {
            // const res = await updatePlat(this.dataForm);
            // if(res.code == 200) {
@@ -225,8 +257,22 @@
      })

    },
    resetDataForm() {

    transFormObj(obj){
      return {
        categoryAmount: obj.amount,
        categoryType: obj.categoryType,
        categoryId: obj.id
      }
    },

    resetDataForm(info) {
      this.dataForm = {
        payPersonType: 1,
        districtCode: info.district.districtCode,
        deptId: info.dept.deptId,
        dealId: null,
        operateId: null
      }
    },
  }
@@ -239,7 +285,6 @@
  margin-bottom:20px;
  display: flex;
  justify-content: space-around;
  font-weight: 800;
  font-size: 16px
}


 src/views/specialOperationsPay/notCoalPay/components/batchPay.vue

copy from src/views/specialOperationsPay/notCoalPay/components/addStuDialog.vue
copy to src/views/specialOperationsPay/notCoalPay/components/batchPay.vue
文件从 src/views/specialOperationsPay/notCoalPay/components/addStuDialog.vue 复制
@@ -1,6 +1,6 @@
<template>
  <el-dialog
    :title="dialogStatus==='add'?'新增':'编辑'"
    title="批量缴费"
    :visible.sync="dialogVisible"
    :modal-append-to-body="false"
    :close-on-click-modal="false"
@@ -8,28 +8,18 @@
    :before-close="handleClose"
  >
    <el-form ref="dataForm" :model="dataForm"  :rules="rules" label-position="right" label-width="150px" style="padding-right: 50px" element-loading-text="保存中...">
      <el-form-item label="姓名:" prop="name">
        <el-input v-model.trim="dataForm.name"/>
      </el-form-item>
      <el-form-item label="性别:" prop="sex">
        <el-radio-group v-model="dataForm.sex">
          <el-radio label="0">男</el-radio>
          <el-radio label="1">女</el-radio>
      <el-form-item label="缴款人类型:" prop="type">
        <el-radio-group v-model="dataForm.type">
          <el-radio label="0">团体</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="身份证号:" prop="idCard">
        <el-input v-model.trim="dataForm.idCard"/>
      <el-form-item label="缴款单位名称:" prop="name">
        <el-input v-model.trim="dataForm.name"/>
      </el-form-item>
      <el-form-item label="手机号:" prop="phone">
        <el-input v-model.trim="dataForm.phone"/>
      <el-form-item label="缴款单位证件号:" prop="cardNo">
        <el-input v-model.trim="dataForm.cardNo"/>
      </el-form-item>
    </el-form>
    <el-alert

      :closable="false"
      title="提示：请务必填写准确，将用于个人缴费查询。"
      type="warning">
    </el-alert>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="onSubmit">确 定</el-button>
@@ -42,30 +32,16 @@
import { verifySimplePhone } from '@/utils/validate'

export default {
  name: 'addUser',
  name: 'batchPay',
  components: {
  },
  data() {
    let validatePhone = (rule, value, callback)=>{
      if(value === ''){
        callback(new Error('请输入手机号'))
      }else{
        if(!verifySimplePhone(value)){
          callback(new Error('手机号格式有误'))
        }else{
          callback()
        }
      }
    }
    return {
      dialogVisible: false,
      dialogStatus: '',

      rules: {
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        idCard: [{ required: true, message: '请输入身份证号', trigger: 'blur' }],
        phone:[{ required: true, validator: validatePhone, trigger: 'blur' }],
        sex: [{ required: true, message: '请选择性别', trigger: 'blur' }],
        name: [{ required: true, message: '请输入单位名称', trigger: 'blur' }],
        cardNo: [{ required: true, message: '请输入单位证件号', trigger: 'blur' }]
      },
      dataForm: {},


 src/views/specialOperationsPay/notCoalPay/components/studentDialog.vue

@@ -2,73 +2,73 @@
  <div>
    <el-dialog :visible.sync="dialogVisible" width="800px" append-to-body class="stu">
      <div class="infoTitle">
        <div>批次名称：XXXXX</div>
        <div style="margin-left: 35px">管辖行政区划：XXXxxxx</div>
        <div>批次名称：<span>{{stuInfo.batchName}}</span></div>
        <div style="margin-left: 35px">所属区划：<span>{{stuInfo.districtName}}</span></div>
      </div>
      <div class="infoTitle">
        <div>考试点名称：XXXXX</div>
        <div>组织架构：<span>{{stuInfo.deptName}}</span></div>
      </div>
      <el-form :model="form"  ref="ruleForm" label-width="125px">
      <el-form :model="stuInfo" label-width="125px">
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="缴费周期：" prop="timeRange">
              <span>xxxx</span>
          <el-col :span="12">
            <el-form-item label="缴费周期：">
              <span><span>{{stuInfo.year}}</span></span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="缴费类型：" prop="timeRange">
              <span>xxxx</span>
            <el-form-item label="缴费类型：">
              <span>{{stuInfo.payType == 1?'初训理论':stuInfo.payType == 2?'初训实操':stuInfo.payType == 3?'初训理论与实操':stuInfo.payType == 4?'复训理论':''}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="理论类别：" prop="timeRange">
              <span>xxxx</span>
          <el-col :span="12" v-if="stuInfo.payType === 1 || stuInfo.payType === 3 || stuInfo.payType === 4">
            <el-form-item label="理论类别：">
              <span>{{stuInfo.nonCoalPayCategoryList.find(i=>i.categoryType == 1).subjectName}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="实操类别：" prop="timeRange">
              <span>xxxx</span>
          <el-col :span="12" v-if="stuInfo.payType === 2 || stuInfo.payType === 3">
            <el-form-item label="实操类别：">
              <span>{{stuInfo.nonCoalPayCategoryList.find(i=>i.categoryType == 2).subjectName}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item label="单人应缴：" prop="timeRange">
              <span>xxxx</span>
              <span>{{stuInfo.amount}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="总计应缴费：" prop="timeRange">
              <span>xxxx</span>
              <span>{{ stuInfo.totalCountFee }}元</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="已完成缴费：" prop="timeRange">
              <span>xxxx</span>
              <span>{{stuInfo.payCountFee}}元</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="剩余未缴费：" prop="timeRange">
              <span>xxxx</span>
              <span>{{stuInfo.unPayCountFee}}元</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item label="当前总计应缴：" prop="timeRange">
              <span>xxxx人</span>
              <span>{{stuInfo.totalCount}}人</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="已完成缴费：" prop="timeRange">
              <span>xxxx人</span>
              <span>{{stuInfo.payCount}}人</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="当前未完成缴费：" prop="timeRange">
              <span>xxxx人</span>
              <span>{{stuInfo.unPayCount}}人</span>
            </el-form-item>
          </el-col>
        </el-row>
@@ -77,16 +77,40 @@
  <!--    表格-->
      <div style="margin: 20px 15px;display: flex">
        <el-button size="small"  type="primary" @click="handleAddStu('add',{})">添加学员</el-button>
        <el-button size="small"  type="primary" >批量导入</el-button>
        <el-button size="small"  type="primary" @click="importDialog = true">批量导入</el-button>
      </div>
      <el-table v-loading="loading" :data="stuList">
        <el-table-column label="序号" align="center" type="index" />
        <el-table-column label="姓名" align="center" prop="createTime" />
        <el-table-column label="身份证号" align="center" prop="batchName" />
        <el-table-column label="手机号" align="center" prop="batchName" />
        <el-table-column label="性别" align="center" prop="batchName" />
        <el-table-column label="财政缴款码" align="center" prop="batchName" />
        <el-table-column label="是否已缴" align="center" prop="batchName" />
        <el-table-column label="姓名" align="center" prop="name" />
        <el-table-column label="身份证号" align="center" prop="idCard" />
        <el-table-column label="手机号" align="center" prop="phone" />
        <el-table-column label="性别" align="center" prop="sex">
          <template #default="scope">
            {{scope.row.sex == 0?'男':scope.row.sex == 1?'女':'未知'}}
          </template>
        </el-table-column>
        <el-table-column label="财政缴款码" align="center" prop="payCode">
          <template #default="scope">
            {{scope.row.payCode?scope.row.payCode:'--'}}
          </template>
        </el-table-column>
        <el-table-column label="是否已缴" align="center" prop="payStatus">
          <template #default="scope">
            {{scope.row.payStatus == 0?'未缴':scope.row.payStatus == 1?'已缴':''}}
          </template>
        </el-table-column>
        <el-table-column label="类别" align="center" prop="payType">
          <template #default="scope">
            {{scope.row.payType == 1?'个人':scope.row.payType == 2?'集体':''}}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button size="mini" type="text" v-if="scope.row.payStatus == 1" style="color: #1890ff">查看票据</el-button>
            <el-button size="mini" type="text" style="color: #1890ff" @click="handleAddStu('edit',scope.row)">修改</el-button>
            <el-button size="mini" type="text" style="color:lightcoral" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
@@ -96,49 +120,306 @@
        @pagination="getStuList"
      />
    </el-dialog>
    <add-stu-dialog ref="addStuDialogRef" @getList = "getStuList"></add-stu-dialog>
    <el-dialog
      :title="dialogStatus==='add'?'新增':'编辑'"
      :visible.sync="addDialog"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      width="450px"
      :before-close="handleClose"
    >
      <el-form ref="dataForm" :model="dataForm"  :rules="addRules" label-position="right" label-width="150px" style="padding-right: 50px" element-loading-text="保存中...">
        <el-form-item label="姓名:" prop="name">
          <el-input v-model.trim="dataForm.name"/>
        </el-form-item>
        <el-form-item label="性别:" prop="sex">
          <el-radio-group v-model="dataForm.sex">
            <el-radio :label="0">男</el-radio>
            <el-radio :label="1">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="身份证号:" prop="idCard">
          <el-input v-model.trim="dataForm.idCard"/>
        </el-form-item>
        <el-form-item label="手机号:" prop="phone">
          <el-input v-model.trim="dataForm.phone"/>
        </el-form-item>
      </el-form>
      <el-alert
        :closable="false"
        title="提示：请务必填写准确，将用于个人缴费查询。"
        type="warning">
      </el-alert>
      <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="onSubmit">确 定</el-button>
    </span>
    </el-dialog>
    <el-dialog
      :visible.sync="importDialog"
      append-to-body
      title="批量导入"
      :close-on-click-modal="false"
    >
      <el-form
        ref="importForm"
        label-position="right"
        label-width="120px"
        style="margin-left:50px;width:500px;"
        element-loading-text="导入中..."
      >
        <el-form-item label="导入文件:">
          <el-upload
            :action="uploadUrl"
            :on-error="onError"
            :on-success="onSuccess"
            :auto-upload="false"
            accept=".xlsx,.xls"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :before-upload="picSize"
            ref="upload"
            :limit="1"
            :data={nonCoalPayId:id}
            :headers="header"
            :on-exceed="handleExceed"
            :file-list="fileList">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传excel(.xlsx、.xls后缀)文件，且不超过2M</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="excel参考模板:">
          <el-button type="text" @click="viewHandle">下载模板</el-button>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="importDialog = false">取消</el-button>
        <el-button  type="primary" @click="importHandle()">导入</el-button>
      </div>
    </el-dialog>
 </div>
</template>
<script>
import addStuDialog from './addStuDialog.vue'


import {verifyIdCard, verifySimplePhone} from "@/utils/validate";
import {
  addNonCoalStu, delNonCalStu, delNonCoalPay,
  editNonCoalStu,
  getNonCoalPayStudents,
  getPayTypeInfo
} from "@/api/specialOperationsPay/notCoalPay";
import exampleFile from '@/assets/studentInfo.xlsx'
import {getToken} from "@/utils/auth";
export default {
  name: 'addStu',
  components: {
    addStuDialog
  },
  components: {},
  data() {
    let validatePhone = (rule, value, callback)=>{
      if(value === ''){
        callback(new Error('请输入手机号'))
      }else{
        if(!verifySimplePhone(value)){
          callback(new Error('手机号格式有误'))
        }else{
          callback()
        }
      }
    }
    let verifyId = (rule, value, callback)=>{
      if(value === ''){
        callback(new Error('请输入身份证号'))
      }else{
        if(!verifyIdCard(value)){
          callback(new Error('身份证号格式有误'))
        }else{
          callback()
        }
      }
    }
    return {
      open: false,
      id: null,
      dialogVisible: false,
      importDialog: false,
      loading: false,
      stuInfo: {},
      stuList: [],
      form: {
        id: null,
        staffId: null,
        timeRange: [],
        startTime: '',
        endTime: '',
        unit: ''
      fileList: [],
      uploadUrl: process.env.VUE_APP_BASE_API + '/pay/nonCoalPay/stuImportData',
      header: {
        Authorization: "Bearer " + getToken()
      },
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      addDialog: false,
      dialogStatus: '',
      dataForm: {},
      addRules: {
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        idCard: [{ required: true, validator: verifyId, trigger: 'blur' }],
        phone:[{ required: true, validator: validatePhone, trigger: 'blur' }],
        sex: [{ required: true, message: '请选择性别', trigger: 'blur' }]
      }
    };
  },
  methods: {
    openDialog(val) {
    openDialog(id) {
      this.getStuList(id)
      this.id = id
      this.dialogVisible = true;
    },
    getStuList () {

    getStuList(id) {
      getNonCoalPayStudents(id).then(res=>{
        if(res.code == 200){
          this.stuInfo = res.data
          this.stuList = res.data.nonCoalPayStudentList
        }
      })
    },
    handleAddStu(type,data){
      this.$refs.addStuDialogRef.openDialog(type, data);
    }
      this.addDialog = true
      this.resetDataForm()
      if(type == 'add'){
        this.dataForm.nonCoalPayId = this.id
      }else{
        const {id,nonCoalPayId,name,idCard,sex,phone} = data
        this.dataForm = {id,nonCoalPayId,name,idCard,sex,phone}
      }
      console.log(this.dataForm,'form')
      this.dialogStatus = type
    },

    viewHandle() {
      const link = document.createElement('a')
      link.href = exampleFile
      link.target = '_blank'
      link.download = '学员批量导入模版.xlsx'
      link.click()
    },

    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    picSize(rawFile){
      if(rawFile.size / 1024 / 1024 > 2){
        this.$message({
          type: 'warning',
          message: '文件大小不能超过2M'
        });
        return false
      }
    },
    async importHandle(){
      const t = this
      await t.$refs.upload.submit()
      t.importDialog = false
      setTimeout(()=>{
        t.getStuList(this.stuInfo.id)
        t.fileList = []
        t.$refs.upload.clearFiles()
      },800)
    },

    onError(){
      console.log("文件上传失败")
    },

    onSuccess(res, file, fileList){
      if(res.code == 200){
        this.$message({
          type:'success',
          message: res.msg
        })
      }else{
        this.$message({
          type:'warning',
          message: res.msg
        })
      }
    },

    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    },

    handleClose() {
      this.addDialog = false
    },
    onSubmit() {
      this.$refs["dataForm"].validate( async valid => {
        if (valid) {
          if(this.dialogStatus == 'add'){
            const res = await addNonCoalStu(this.dataForm)
            if(res.code == 200) {
              this.getStuList(this.id)
              this.addDialog = false
              this.$message({
                type:'success',
                message: '新增成功'
              })
            }else{
              this.$message({
                type:'warning',
                message: res.msg
              })
            }
          }else {
            const res = await editNonCoalStu(this.dataForm)
            if(res.code == 200) {
              this.getStuList(this.id)
              this.addDialog = false
              this.$message({
                type:'success',
                message: '修改成功'
              })
            }else{
              this.$message({
                type:'warning',
                message: res.msg
              })
            }
          }
        }
      })
    },
    handleDelete(row){
      this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await delNonCalStu(row.id)
        if(res.code == 200){
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          await this.getStuList(this.id)
        }else{
          this.$message({
            type: 'warning',
            message: res.msg
          });
        }
      }).catch(() => {

      });
    },
    resetDataForm() {
      this.dataForm = {
      }
    },
  }
}

@@ -153,8 +434,10 @@
    margin-bottom:10px;
    margin-left: 40px;
    display: flex;
    font-weight: 800;
    font-size: 16px
    font-size: 16px;
    span{
      font-weight: bolder;
    }
  }

}

 src/views/specialOperationsPay/notCoalPay/index.vue

@@ -5,7 +5,9 @@
        size="medium"
        style="margin-bottom: 10px;background-color: #0FC7F0;color: white"
        @click="handleAdd('add',{})"
      >录入批次</el-button>
        v-if="isAhthority"
      >录入批次
      </el-button>
      <el-date-picker
        style="margin-left: 30px;width: 300px"
        size="small"
@@ -18,49 +20,68 @@
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
      <el-select v-model="queryParams.institutionId"  size="small" style="margin-left: 15px;" placeholder="请选择行政区划">
      <el-select v-model="queryParams.districtCode" size="small" style="margin-left: 15px;margin-right: 15px" placeholder="行政区划">
        <el-option
          v-for="item in districtList"
          v-for="item in areaList"
          :key="item.id"
          :label="item.institutionalName"
          :value="item.id">
          :label="item.name"
          :value="item.code">
        </el-option>
      </el-select>
      <el-select v-model="queryParams.institutionId"  size="small" style="margin-left: 15px;" placeholder="请选择考试点">
        <el-option
          v-for="item in examList"
          :key="item.id"
          :label="item.institutionalName"
          :value="item.id">
        </el-option>
      </el-select>
<!--      <el-select v-model="queryParams.deptId" size="small" style="margin-left: 15px;" placeholder="请选择考试点">-->
<!--        <el-option-->
<!--          v-for="item in examList"-->
<!--          :key="item.siteId"-->
<!--          :label="item.siteName"-->
<!--          :value="item.siteId">-->
<!--        </el-option>-->
<!--      </el-select>-->
<!--      <treeselect v-model="queryParams.deptId" :options="deptOptions" :show-count="true" placeholder="请选择组织架构" />-->
      <el-cascader v-model="queryParams.deptId" size="small" :options="deptOptions" placeholder="组织架构" :props="{ expandTrigger: 'hover',checkStrictly: true,emitPath: false,value: 'id' }"></el-cascader>
      <el-button
        size="small"
        type="primary"
        style="margin-bottom: 10px;margin-left: 20px"
        @click="handleQuery()"
      >查询</el-button>
      >查询
      </el-button>
      <el-button
        size="small"
        type="primary"
        style="margin-bottom: 10px"
        @click="resetQuery()"
      >重置</el-button>
      >重置
      </el-button>
    </div>
    <el-table v-loading="loading" :data="expertList" style="margin-top: 10px">
      <el-table-column label="序号" align="center" type="index" />
      <el-table-column label="提交时间" align="center" prop="createTime" />
      <el-table-column label="批次名称" align="center" prop="batchName" />
      <el-table-column label="考试点" align="center" prop="batchName" />
      <el-table-column label="所属地州" align="center" prop="batchName" />
      <el-table-column label="缴费类型" align="center" prop="batchName" />
      <el-table-column label="单人（元）" align="center" prop="batchName" />
      <el-table-column label="人数" align="center" prop="batchName" />
    <el-table v-loading="loading" :data="payList" style="margin-top: 10px">
      <el-table-column label="序号" align="center" type="index"/>
      <el-table-column label="提交时间" align="center" prop="createTime"/>
      <el-table-column label="批次名称" align="center" prop="batchName"/>
      <el-table-column label="组织架构" align="center" prop="deptName"/>
      <el-table-column label="所属地州" align="center" prop="districtName"/>
      <el-table-column label="缴费类型" align="center" prop="payType">
        <template #default="scope">
          {{scope.row.payType == 1?'初训理论':scope.row.payType == 2?'初训实操':scope.row.payType == 3?'初训理论与实操':scope.row.payType == 4?'复训理论':''}}
        </template>
      </el-table-column>
      <el-table-column label="单人（元）" align="center" prop="amount"/>
      <el-table-column label="人数" align="center">
        <template #default="scope">
          <span>{{scope.row.havePayNum}}</span>/{{scope.row.totalNum}}
        </template>
      </el-table-column>
      <el-table-column label="学员个人缴费" align="center" prop="batchName">
        <template #default="scope">
          <span v-if="scope.row.payPersonType == 1">已开启</span>
          <span v-if="scope.row.payPersonType == 2" style="color:red">已关闭</span>
          <el-button type="text" style="color:lightcoral" @click="updatePayType(scope.row)" v-if="scope.row.payPersonType == 1">关闭</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180px">
        <template #default="scope" >
          <el-button size="mini" type="text" style="color: #1890ff" @click="handleViewStu(scope.row)">学员管理</el-button>
          <el-button size="mini" type="text" style="color: #1890ff" @click="handleViewCourse(scope.row,'')">批量缴费</el-button>
          <el-button size="mini" type="text" style="color:lightcoral" @click="handleViewCourse(scope.row,'')">删除</el-button>
        <template #default="scope">
          <el-button v-if="isAhthority" size="mini" type="text" style="color: #1890ff" @click="handleViewStu(scope.row)">学员管理</el-button>
<!--          <el-button v-if="isAhthority" size="mini" type="text" style="color: #1890ff" @click="handleBatchPay(scope.row,'')">批量缴费</el-button>-->
          <el-button v-if="isAhthority" size="mini" type="text" style="color:lightcoral" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
@@ -71,108 +92,170 @@
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <add-dialog ref="addDialogRef" @getList = "getList"></add-dialog>
    <stu-dialog ref="stuDialogRef" @getList = "getList"></stu-dialog>
    <add-dialog ref="addDialogRef" @getList="getList"></add-dialog>
    <stu-dialog ref="stuDialogRef" @getList="getList"></stu-dialog>
    <batch-pay ref="batchPayRef" @getList="getList"></batch-pay>
  </div>
</template>

<script>
import { delJobRegist } from '@/api/coalMine/jobRegist'
import { listPlat, listPlatSelect } from '@/api/onlineEducation/plat'
import { listCourse } from '@/api/onlineEducation/course'
import {delJobRegist} from '@/api/coalMine/jobRegist'
import {listPlat, listPlatSelect} from '@/api/onlineEducation/plat'
import {listCourse} from '@/api/onlineEducation/course'
import addDialog from './components/addDialog.vue'
import stuDialog from './components/studentDialog.vue'
import batchPay from "./components/batchPay.vue"
import {getExamPage} from "@/api/coalMine/placeManage/exam";
import {getAreaList} from "@/api/coalMine/placeManage/train";
import {delNonCoalPay, editPayTypeInfo, getNonCoalPayList} from "@/api/specialOperationsPay/notCoalPay";
import store from "@/store";
import {deptTreeSelect} from "@/api/system/user";

export default {
  name: "nPeopleManage",
  name: "nCoalPay",
  dicts: [],
  components: { addDialog,stuDialog },
  components: {addDialog, stuDialog, batchPay},
  data() {
    return {
      isDark:true,
      isDark: true,
      loading: false,
      single: true,
      multiple: true,
      showSearch: true,
      addForm: false,
      total: 0,
      districtList: [],
      examList: [],
      areaList: [],
      deptOptions: [],
      dateValue: [],
      expertList: [],
      payList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        institutionId: ''
        districtCode: '',
        deptId: '',
        params: {
          startTime: '',
          endTime: ''
        }
      },
      isAhthority: false
    };
  },
  created() {
    this.getDistrict();
    this.getList();
    this.getExam();
    this.getDistrict()
    this.getList()
    this.getDeptList()
    const roles = store.getters && store.getters.roles
    if (roles.includes('admin') || roles.includes('mkexam') || roles.includes('feimeiexam')  ) {
      this.isAhthority = true
    } else {
      this.isAhthority = false
    }
  },
  methods: {
    getList(){
    getList() {
      this.loading = true;
      this.expertList = [
        {
          id: 1,

        }
      ]
          this.total = 1
      this.loading = false;
      this.queryParams.params.startTime = this.dateValue[0]?this.dateValue[0]:''
      this.queryParams.params.endTime = this.dateValue[1]?this.dateValue[1]:''
      getNonCoalPayList( this.queryParams).then((res) => {
        if (res.code == 200) {
          this.payList = res.rows
          this.total = res.total
          this.loading = false;
      // this.loading = true;
      // listCourse( this.queryParams).then((res) => {
      //   if (res.code == 200) {
      //     this.expertList = res.rows.map(item => {
      //       return {
      //         ...item,
      //         courseNum: item.outline ? item.outline.length : '',
      //       }
      //     })
      //     this.total = res.total
      //     this.loading = false;
      //   }
      // })
        }
      })
    },

    getDeptList() {
      deptTreeSelect().then(response => {
        this.deptOptions = response.data
      })
    },

    openUrl(url) {
      window.open(url,'_blank')
      window.open(url, '_blank')
    },
    //行政区划
    getDistrict() {
    async getDistrict() {
      const res = await getAreaList()
      if (res.code == 200) {
        this.areaList = res.data
      }
    },

    changeDate(val) {
      console.log('val', val)
    },
    //考试点
    getExam() {

    handleAdd(type, data) {
      this.$refs.addDialogRef.openDialog(type, data, this.areaList,this.deptOptions);
    },
    changeDate(val){
      console.log('val',val)
    handleViewStu(val) {
      this.$refs.stuDialogRef.openDialog(val.id);
    },
    handleAdd(type,data) {
      this.$refs.addDialogRef.openDialog(type, data);
    handleBatchPay(val) {
      this.$refs.batchPayRef.openDialog(val);
    },
    handleViewStu(val){
      this.$refs.stuDialogRef.openDialog(val);
    },
    handleQuery(){
    handleQuery() {
      this.getList();
    },
    resetQuery(){
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        institutionId: ''
        districtCode: '',
        deptId: '',
        params: {
          startTime: '',
          endTime: ''
        }
      }
      this.dateValue = []
      this.getList();
    },
    check(val){
      this.$confirm('此操作将审核该条数据, 是否继续?', '提示', {
    updatePayType(row){
      this.$confirm('一旦关闭则无法重新开启个人缴费，必须批量缴完剩余所有学员。是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await editPayTypeInfo({id: row.id,payPersonType: 2})
        if(res.code == 200){
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          await this.getList()
        }else{
          this.$message({
            type: 'warning',
            message: res.msg
          });
        }
      }).catch(() => {

      });
    },

    handleDelete(row){
      this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await delNonCoalPay(row.id)
        if(res.code == 200){
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          await this.getList()
        }else{
          this.$message({
            type: 'warning',
            message: res.msg
          });
        }
      }).catch(() => {

      });

 src/views/specialOperationsPay/notCoalWorkType/components/detailDialog.vue

对比新文件
@@ -0,0 +1,199 @@
<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    :modal-append-to-body="false"
    :close-on-click-modal="false"
    width="50%"
    :before-close="handleClose"
  >
    <el-form ref="dataForm" :model="dataForm"  :rules="rules" label-position="right" label-width="150px" style="padding-right: 50px" element-loading-text="保存中...">
      <el-form-item label="所属区划:" prop="districtCode">
        <el-select v-model="dataForm.districtCode" style="margin-left: 15px" placeholder="行政区划">
          <el-option
            v-for="item in areaList"
            :key="item.id"
            :label="item.name"
            :value="item.code">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="类别:" prop="categoryType">
        <el-radio-group v-model="dataForm.categoryType">
          <el-radio :label="1">理论</el-radio>
          <el-radio :label="2">实操</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="科目名称:" prop="subjectName">
        <el-input v-model.trim="dataForm.subjectName"/>
      </el-form-item>
      <el-form-item label="资格类型:" prop="operateTypeId">
        <el-cascader
          v-model="dataForm.operateTypeId"
          :options="typeList"
          style="width: 100%"
          :props="{ expandTrigger: 'hover', value: 'id',label: 'name',emitPath: false}"></el-cascader>
      </el-form-item>
      <el-form-item label="金额:" prop="amount">
        <el-input v-model.trim.number="dataForm.amount">
          <template #append>元</template>
        </el-input>
      </el-form-item>
      <el-form-item label="业务代码:" prop="businessCode">
        <el-input v-model.trim="dataForm.businessCode"/>
      </el-form-item>
      <el-form-item label="单位编码:" prop="companyCode">
        <el-input v-model.trim="dataForm.companyCode"/>
      </el-form-item>
      <el-form-item label="开票人:" prop="drawer">
        <el-input v-model.trim="dataForm.drawer"/>
      </el-form-item>
      <el-form-item label="复核人:" prop="reviewer">
        <el-input v-model.trim="dataForm.reviewer"/>
      </el-form-item>
      <el-form-item label="开票单位社会信用代码:" prop="invoicingCompanyCode">
        <el-input v-model.trim="dataForm.invoicingCompanyCode"/>
      </el-form-item>
      <el-form-item label="描述:" prop="describe">
        <el-input v-model.trim="dataForm.describe"/>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="onSubmit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script >
import { addPlat, updatePlat } from '@/api/onlineEducation/plat'
import { verifySimplePhone } from '@/utils/validate'
import {getAreaList} from "@/api/coalMine/placeManage/train";
import {getOperatePage} from "@/api/coalMine/operateType";
import {addNotCoalPayCategory, getNotCoalPayCategory, updateNotCoalPayCategory} from "@/api/specialOperationsPay/notCoalPay";

export default {
  name: 'detailDialog',
  components: {
  },
  data() {
    return {
      dialogVisible: false,
      title: '',
      areaList: [],
      typeList: [],
      rules: {
        districtCode: [{ required: true, message: '请选择所属区划', trigger: 'blur' }],
        categoryType: [{ required: true, message: '请选择类别', trigger: 'blur' }],
        subjectName: [{ required: true, message: '请输入科目名称', trigger: 'blur' }],
        operateTypeId: [{ required: true, message: '请选择资格类型', trigger: 'blur' }],
        amount: [{ required: true, message: '请输入金额', trigger: 'blur' }],
        businessCode: [{ required: true, message: '请输入业务代码', trigger: 'blur' }],
        companyCode: [{ required: true, message: '请输入单位编码', trigger: 'blur' }],
        drawer: [{ required: true, message: '请输入开票人', trigger: 'blur' }],
        reviewer: [{ required: true, message: '请输入复核人', trigger: 'blur' }],
        invoicingCompanyCode: [{ required: true, message: '请输入开票单位社会信用代码', trigger: 'blur' }]
      },
      dataForm: {},

    }
  },
  created() {

  },
  methods: {
    openDialog (type, data) {
      this.getArea()
      this.getTypeList()
      this.resetDataForm()
      this.dialogVisible = true
      this.title = type == 'add'?'新增':'编辑'
      if(this.title == '编辑') {
        console.log(data,'data')
        this.dataForm = data
      }
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    async getArea() {
      const res = await getAreaList();
      if (res.code == 200) {
        this.areaList = res.data
      }
    },
    async getTypeList() {
      this.loading = true;
      const res = await getOperatePage({name: ''})
      if(res.code == 200){
        this.typeList = this.handleTree(res.data, "id");
      }else{
        this.$message({
          type: 'warning',
          message: res.msg
        });
      }
      this.loading = false;
    },
    handleClose() {
      this.dialogVisible = false;
      this.$emit("getList");
    },
    onSubmit() {
      this.$refs["dataForm"].validate( async valid => {
        if (valid) {
          if(this.title == '新增'){
            console.log("this.dataForm",this.dataForm)
            const res = await addNotCoalPayCategory(this.dataForm);
            if(res.code == 200) {
              this.$emit("getList");
              this.dialogVisible = false;
              this.$message({
                type:'success',
                message: '新增成功'
              })
            }else{
              this.$message({
                type:'warning',
                message: res.msg
              })
            }
          }else {
            const res = await updateNotCoalPayCategory(this.dataForm);
            if(res.code == 200) {
              this.$emit("getList");
              this.dialogVisible = false;
              this.$message({
                type:'success',
                message: '编辑成功'
              })
            }else{
              this.$message({
                type:'warning',
                message: res.msg
              })
            }
          }
        }
      })

    },
    resetDataForm() {
      this.dataForm = {
      }
    },
  }
}

</script>
<style scoped>
.infoTitle{
  margin-top:-10px;
  margin-bottom:20px;
  display: flex;
  justify-content: space-around;
  font-weight: 800;
  font-size: 16px
}

</style>

 src/views/specialOperationsPay/notCoalWorkType/index.vue

对比新文件
@@ -0,0 +1,226 @@
<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-radio-group v-model="queryParams.categoryType" @change="changeTimeStatus">
        <el-radio-button>全部</el-radio-button>
        <el-radio-button :label="1">理论</el-radio-button>
        <el-radio-button :label="2">实操</el-radio-button>
      </el-radio-group>
      <el-select v-model="queryParams.districtCode" style="margin-left: 15px" placeholder="行政区划">
        <el-option
          v-for="item in areaList"
          :key="item.id"
          :label="item.name"
          :value="item.code">
        </el-option>
      </el-select>
      <el-button
        size="small"
        type="primary"
        style="margin-bottom: 10px;margin-left: 20px"
        @click="handleQuery()"
      >查询
      </el-button>
      <el-button
        size="small"
        type="primary"
        style="margin-bottom: 10px"
        @click="resetQuery()"
      >重置
      </el-button>
    </el-row>
    <el-row :gutter="10" class="mb8">
      <el-button
        type="primary"
        plain
        icon="el-icon-plus"
        size="mini"
        @click="handleView('add',{})"
        v-hasPermi="['system:experts:add']"
      >新增
      </el-button>
    </el-row>

    <el-table
      :data="cateGoryList"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column label="地州" align="center" prop="districtName"/>
      <el-table-column label="类别" align="center" prop="categoryType">
        <template #default="scope">
          {{scope.row.categoryType == 1?'理论':scope.row.categoryType == 2?'实操':''}}
        </template>
      </el-table-column>
      <el-table-column label="科目名称" align="center" prop="subjectName" :show-overflow-tooltip="true"/>
      <el-table-column label="关联资格类型" align="center" prop="operateTypeName" :show-overflow-tooltip="true"/>
      <el-table-column label="金额（元）" align="center" prop="amount"/>
      <el-table-column label="业务代码" align="center" prop="businessCode"/>
      <el-table-column label="单位编码" align="center" prop="companyCode"/>
      <el-table-column label="开票人" align="center" prop="drawer"/>
      <el-table-column label="复核人" align="center" prop="reviewer"/>
      <el-table-column label="开票单位社会信用代码" align="center" prop="invoicingCompanyCode"/>
      <el-table-column label="描述" align="center" prop="describe"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button
            v-if="scope.row.subjectName"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleView('edit',scope.row)"
          >编辑
          </el-button>
          <el-button
            v-if="scope.row.subjectName"
            size="mini"
            type="text"
            style="color: #f56c6c"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['system:experts:remove']"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
<!--    <pagination-->
<!--      v-show="total>0"-->
<!--      :total="total"-->
<!--      :page.sync="queryParams.pageNum"-->
<!--      :limit.sync="queryParams.pageSize"-->
<!--      @pagination="getList"-->
<!--    />-->
    <detail-dialog ref="detailDialogRef" @getList="getList"></detail-dialog>
  </div>
</template>

<script>
import detailDialog from './components/detailDialog.vue'
import {delNotCoalPayCategory, getNotCoalPayCategory} from '@/api/specialOperationsPay/notCoalPay'
import Cookies from 'js-cookie'
import {getAreaList} from "@/api/coalMine/placeManage/train";
import {delTeacher} from "@/api/coalMine/teacher";

export default {
  name: "coalWorkType",
  dicts: [],
  components: {detailDialog},
  data() {
    return {
      loading: false,
      single: true,
      multiple: true,
      showSearch: true,
      addForm: false,
      total: 0,
      expertTypes: [],
      areaList: [],
      cateGoryList: [],
      queryParams: {
        categoryType: null,
        districtCode: ''
      },
    };
  },
  created() {
    this.getList()
    this.getArea()
  },
  methods: {
    getList() {
      this.loading = true;
      getNotCoalPayCategory(this.queryParams).then((res) => {
        if (res.code == 200) {
          let totalList = []
          if(Array.isArray(res.rows) && res.rows.length>0){
            for(let item of res.rows){
              if(!totalList.find(i=>i.districtName == item.districtName)){
                totalList.push({
                  districtName: item.districtName,
                  id: '100' + item.id,
                  children: [item]
                })
              }else{
                for(let i of totalList){
                  if(i.districtName == item.districtName){
                    i.children.push(item)
                  }
                }
              }
            }
            totalList.map(i=>{
              if(i.children.length == 1){
                for(let key in i.children[0]){
                  i[key] = i.children[0][key]
                }
                delete i.children
              }
              return i
            })
          }
          this.cateGoryList = JSON.parse(JSON.stringify(totalList))
          console.log(this.cateGoryList,'666')
          this.total = res.total
          this.loading = false;
        }
      })
    },
    async getArea() {
      const res = await getAreaList();
      if (res.code == 200) {
        this.areaList = res.data;
      }
    },
    changeTimeStatus(val) {
      this.getList()
    },

    handleChange() {

    },
    handleQuery() {
      this.getList()
    },
    resetQuery() {
      this.queryParams = {
        categoryType: null,
        districtCode: ''
      }
      this.getList()
    },
    handleView(type,data) {
      this.$refs.detailDialogRef.openDialog(type,data);
    },
    handleDelete(row){
      this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await delNotCoalPayCategory(row.id)
        if(res.code == 200){
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          await this.getList()
        }else{
          this.$message({
            type: 'warning',
            message: res.msg
          });
        }
      }).catch(() => {

      });
    }
  }
};
</script>

<style scoped>
.app-container /deep/ .el-table .tr-red {
  color: red !important;
}
</style>

 src/views/specialOperationsPay/singlePage/index.vue

对比新文件
@@ -0,0 +1,477 @@
<template>
  <div class="container">
    <div class="loginTop">
      <div>新疆维吾尔自治区</div>
      <div>特种作业缴费助手</div>
    </div>
    <div class="loginForm">
      <el-form ref="dataForm" :model="dataForm"  :rules="rules" label-position="right" label-width="80px">
        <el-form-item label="身份证号" prop="idCard">
          <el-input v-model.trim="dataForm.idCard"/>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model.trim="dataForm.phone"/>
        </el-form-item>
        <el-form-item label="类别" prop="type">
          <el-select v-model="dataForm.type" placeholder="请选择">
            <el-option key="1" label="非煤" :value="1"></el-option>
            <el-option key="2" label="煤矿" :value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="tipBox">
        <span>提示：请使用报名时预留的手机号进行查询，如查询不到待缴费信息，请联系报名机构进行信息核实。</span>
      </div>
      <div class="btnBox">
        <div @click="onSubmit">查询缴费项目</div>
      </div>
    </div>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="listVisible"
      :modal-append-to-body="false"
      fullscreen
      class="myCustomDialog"
      :before-close="handleClose"
    >
      <div v-if="hasInfo">
        <div class="topInfo">
          <el-row style="margin-bottom: 0">
            <el-col :span="12">
              <div><i class="el-icon-user-solid" style="font-size: 20px;color: #0fc7f0;margin-right: 6px"></i>{{info.name}}</div>
            </el-col>
            <el-col :span="12">
              <div><i class="el-icon-phone" style="font-size: 20px;color: #0fc7f0;margin-right: 6px"></i>{{info.phone}}</div>
            </el-col>
          </el-row>
          <div><i class="el-icon-s-finance" style="font-size: 20px;color: #0fc7f0;margin-right: 6px"></i>{{info.idCard}}</div>
        </div>
        <div v-if="this.dataForm.type == 1" class="feeList">
          <div v-for="(item,index) in info.list" class="infoCard" :key="index">
            <div>批次名称：<span class="cardCont">{{item.batchName }}</span></div>
            <div>所属地区：<span class="cardCont">{{item.districtName }}</span></div>
            <div>填报时间：<span class="cardCont">{{item.createTime}}</span></div>
            <div>状态状态：
              <el-tag v-if="item.payStatus == 0" type="danger" size="small">待缴费</el-tag>
              <el-tag v-if="item.payStatus == 1" type="success" size="small">已缴费</el-tag>
            </div>
            <div v-if="item.nonCoalPayCategoryList && item.nonCoalPayCategoryList.find(i=>i.categoryType == 1)">
              理论应缴：
              <span class="cardCont">{{item.nonCoalPayCategoryList.find(i=>i.categoryType == 1).categoryAmount }}元</span>
            </div>
            <div v-if="item.nonCoalPayCategoryList && item.nonCoalPayCategoryList.find(i=>i.categoryType == 2)">
              实操应缴：
              <span class="cardCont">{{item.nonCoalPayCategoryList.find(i=>i.categoryType == 2).categoryAmount }}元</span>
            </div>
            <div>总计应缴：<span class="cardCont">{{ item.amount }}元</span></div>
            <el-button style="margin-top: 5px" type="primary" size="small" v-if="item.payStatus == 0" @click="goPay(item)">去缴费</el-button>
            <el-button style="margin-top: 5px" type="success" size="small" v-if="item.payStatus == 1" @click="checkTicket(item)">查看票据</el-button>
          </div>
        </div>
        <div v-else class="feeList">
          <div v-for="(item,index) in info.list" class="infoCard" :key="index">
            <div>批次名称：<span class="cardCont" v-if="item.coalPays">{{item.coalPays.batchName }}</span></div>
<!--            <div>所属地区：<span class="cardCont">{{item.districtName }}</span></div>-->
            <div>填报时间：<span class="cardCont" v-if="item.coalPays">{{item.coalPays.createTime}}</span></div>
            <div>状态状态：
              <el-tag v-if="item.payStatus == 0" type="danger" size="small">待缴费</el-tag>
              <el-tag v-if="item.payStatus == 1" type="success" size="small">已缴费</el-tag>
            </div>
            <div v-if="item.coalPays && item.coalPays.coalCategoryList && item.coalPays.coalCategoryList.find(i=>i.categoryType == 1)">
              理论应缴：
              <span class="cardCont">{{item.coalPays.coalCategoryList.find(i=>i.categoryType == 1).amount }}元</span>
            </div>
            <div v-if="item.coalPays && item.coalPays.coalCategoryList && item.coalPays.coalCategoryList.find(i=>i.categoryType == 2)">
              实操应缴：
              <span class="cardCont">{{item.coalPays.coalCategoryList.find(i=>i.categoryType == 2).amount }}元</span>
            </div>
            <div>总计应缴：<span class="cardCont" v-if="item.coalPays">{{ item.coalPays.amount }}元</span></div>
            <el-button style="margin-top: 5px" type="primary" size="small" v-if="item.payStatus == 0" @click="goPay(item)">去缴费</el-button>
            <el-button style="margin-top: 5px" type="success" size="small" v-if="item.payStatus == 1" @click="checkTicket(item)">查看票据</el-button>
          </div>
        </div>
      </div>
      <div class="noData" v-else>
        <el-image style="width: 150px; height: 150px" :src="noData" fit="contain"></el-image>
        <span>该用户暂无数据</span>
      </div>
    </el-dialog>
    <el-dialog
      title="缴费"
      :visible.sync="detailVisible"
      :modal-append-to-body="false"
      fullscreen
      class="myCustomDialog"
    >
      <div class="topInfo">
        <el-row style="margin-bottom: 0">
          <el-col :span="12">
            <div><i class="el-icon-user-solid" style="font-size: 20px;color: #0fc7f0;margin-right: 6px"></i>{{info.name}}</div>
          </el-col>
          <el-col :span="12">
            <div><i class="el-icon-phone" style="font-size: 20px;color: #0fc7f0;margin-right: 6px"></i>{{info.phone}}</div>
          </el-col>
        </el-row>
        <div><i class="el-icon-s-finance" style="font-size: 20px;color: #0fc7f0;margin-right: 6px"></i>{{info.idCard}}</div>
      </div>
      <div v-if="this.dataForm.type == 1" class="feeDetail">
        <div class="topDetail">
          <div>批次名称：<span class="cardCont">{{detailInfo.batchName }}</span></div>
          <div>所属地区：<span class="cardCont">{{detailInfo.districtName }}</span></div>
        </div>
        <div class="midDetail">
          <div>类别：<span>{{ detailInfo.payType == 1?'初训理论':detailInfo.payType == 2?'初训实操':detailInfo.payType == 3?'初训理论与实操':detailInfo.payType == 4?'复训理论':'' }}</span></div>
          <div>组织架构：<span>{{detailInfo.deptName }}</span></div>
          <div v-if="detailInfo.nonCoalPayCategoryList && detailInfo.nonCoalPayCategoryList.find(i=>i.categoryType == 1)">
            理论：
            <span>{{detailInfo.nonCoalPayCategoryList.find(i=>i.categoryType == 1).subjectName }}<span> {{detailInfo.nonCoalPayCategoryList.find(i=>i.categoryType == 1).categoryAmount }} </span>元</span>
          </div>
          <div v-if="detailInfo.nonCoalPayCategoryList && detailInfo.nonCoalPayCategoryList.find(i=>i.categoryType == 2)">
            实操：
            <span>{{detailInfo.nonCoalPayCategoryList.find(i=>i.categoryType == 2).subjectName }}<span> {{detailInfo.nonCoalPayCategoryList.find(i=>i.categoryType == 2).categoryAmount }} </span>元</span>
          </div>
        </div>
        <div class="bottomDetail">
          应缴费金额：<span>{{detailInfo.amount}}</span>元
        </div>
        <div class="goPayBtn" @click="payBill()">立即缴费</div>
      </div>
      <div v-else class="feeDetail">
        <div class="topDetail">
          <div>批次名称：<span class="cardCont" v-if="detailInfo.coalPays">{{detailInfo.coalPays.batchName }}</span></div>
          <!--          <div>所属地区：<span class="cardCont">{{detailInfo.districtName }}</span></div>-->
        </div>
        <div class="midDetail">
          <div>类别：<span v-if="detailInfo.coalPays">{{ detailInfo.coalPays.payType == 1?'初训理论':detailInfo.coalPays.payType == 2?'初训实操':detailInfo.coalPays.payType == 3?'初训理论与实操':detailInfo.coalPays.payType == 4?'复训理论':'' }}</span></div>
          <div>组织架构：<span v-if="detailInfo.coalPays">{{detailInfo.coalPays.deptName }}</span></div>
          <div v-if="detailInfo.coalPays && detailInfo.coalPays.coalCategoryList && detailInfo.coalPays.coalCategoryList.find(i=>i.categoryType == 1)">
            理论：
            <span>{{detailInfo.coalPays.coalCategoryList.find(i=>i.categoryType == 1).subjectName }}<span> {{detailInfo.coalPays.coalCategoryList.find(i=>i.categoryType == 1).amount }} </span>元</span>
          </div>
          <div v-if="detailInfo.coalPays && detailInfo.coalPays.coalCategoryList && detailInfo.coalPays.coalCategoryList.find(i=>i.categoryType == 2)">
            实操：
            <span>{{detailInfo.coalPays.coalCategoryList.find(i=>i.categoryType == 2).subjectName }}<span> {{detailInfo.coalPays.coalCategoryList.find(i=>i.categoryType == 2).amount }} </span>元</span>
          </div>
        </div>
        <div class="bottomDetail">
          应缴费金额：<span v-if="detailInfo.coalPays">{{detailInfo.coalPays.amount}}</span>元
        </div>
        <div class="goPayBtn" @click="payBill()">立即缴费</div>
      </div>
    </el-dialog>
  </div>
</template>

<script >
import {verifyIdCard, verifySimplePhone} from "@/utils/validate";
import {nonCoalSelectH5} from "@/api/specialOperationsPay/notCoalPay";
import {findStudent} from "@/api/specialOperationsPay/coalPay";
import noData from '@/assets/images/noData.png'

export default {
  name: 'singlePage',
  components: {
  },
  data() {
    let validatePhone = (rule, value, callback)=>{
      if(value === ''){
        callback(new Error('请输入手机号'))
      }else{
        if(!verifySimplePhone(value)){
          callback(new Error('手机号格式有误'))
        }else{
          callback()
        }
      }
    }
    let verifyId = (rule, value, callback)=>{
      if(value === ''){
        callback(new Error('请输入身份证号'))
      }else{
        if(!verifyIdCard(value)){
          callback(new Error('身份证号格式有误'))
        }else{
          callback()
        }
      }
    }
    return {
      dataForm: {
        idCard: '320322199509262810',
        phone: '15261806176',
        type: 1
      },
      rules: {
        idCard: [{ required: true, validator: verifyId, trigger: 'blur' }],
        phone:[{ required: true, validator: validatePhone, trigger: 'blur' }],
      },
      dialogTitle: '',
      listVisible: false,
      info: {},
      hasInfo: true,
      detailVisible: false,
      detailInfo: {},
      noData
    }
  },
  created() {

  },
  methods: {
    onSubmit() {
      this.$refs["dataForm"].validate( async valid => {
        if (valid) {
          if(this.dataForm.type == 1){
            this.dialogTitle = '缴费项目查询--非煤'
            const {type,...data} = this.dataForm
            this.info = data
            const res = await nonCoalSelectH5(data);
            if(res.code == 200) {
              if(res.data && Array.isArray(res.data) && res.data.length>0){
                this.info.list = res.data
                this.info.name = res.data[0].studentName
                this.hasInfo = true
              }else{
                this.hasInfo = false
              }
              this.listVisible = true
            }else{
              this.$message({
                type:'warning',
                message: res.msg
              })
            }
          }else {
            this.dialogTitle = '缴费项目查询--煤矿'
            const {type,...data} = this.dataForm
            this.info = data
            const res = await findStudent(data);
            if(res.code == 200) {
              if(res.data && Array.isArray(res.data) && res.data.length>0){
                this.info.list = res.data
                this.info.name = res.data[0].name
                this.hasInfo = true
              }else{
                this.hasInfo = false
              }
              this.listVisible = true
            }else{
              this.$message({
                type:'warning',
                message: res.msg
              })
            }
          }
        }
      })

    },
    goPay(item){
      this.detailInfo = item
      this.detailVisible = true
    },
    payBill(){
      console.log('立即付款')
    },
    resetDataForm() {
      this.dataForm = {
      }
    },
    handleClose(){
      this.info = {}
      this.listVisible = false
    }
  }
}

</script>
<style lang="scss" scoped>
  .container{
    width: 100%;
    height: 100%;
  }

  .loginTop{
    width: 100%;
    height: 20%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: rgb(15,199,240);
    color: #fff;
    text-align: center;

    div:first-of-type{
      font-size: clamp(1.25rem, 1rem + 1.25vw, 2.5rem);
      margin-bottom: 1rem;
    }
    div:last-of-type{
      font-size: clamp(1.75rem, 1.1rem + 3.25vw, 5rem);
      font-weight: 800;
    }
  }

  .loginForm{
    width: 100%;
    height: 80%;
    padding: 2rem 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: left;

    .el-form{
      width: 100%;

      .el-select{
        width: 100%;
      }
    }

    .tipBox{
      width: 100%;
      padding: 20px;
      font-size: 14px;
      background: rgb(236,251,253);
      color: rgb(15,199,240);
      border-radius: 10px;
      margin-top: 18px;
      margin-bottom: 40px;
    }
    .btnBox{
      width: 100%;

      div{
        background: rgb(15,199,240);
        color: #fff;
        border-radius: 10px;
        padding: 10px 0;
        text-align: center;
        cursor: pointer;
        font-size: clamp(1rem, 0.85rem + 0.75vw, 1.75rem);
      }
    }
  }
</style>
<style lang="scss">
  .myCustomDialog{
    .el-dialog .el-dialog__header{
      height: 60px;
      padding: 0;
      line-height: 60px;
      background-color: rgb(15,199,240);
      text-align: center;
      .el-dialog__title{
        color: #FFF;
      }
      .el-dialog__close{
        color: #fff;
      }
    }
    .el-dialog__body{
      padding: 20px;
      height: calc(100% - 60px);
      .noData{
        display: flex;
        flex-direction: column;
        align-items: center;
        span{
          color: #999;
          margin-top: 10px;
        }
      }

      .topInfo{
        width: 100%;
        height: 90px;
        font-size: 18px;
        padding-bottom: 10px;
        border-bottom: 1px solid #ccc;
        background: #fff;
        &>div{
          margin-top: 10px;
        }
      }
      .feeList{
        width: 100%;
        height: calc(100% - 90px);
        overflow: hidden;
        overflow-y: auto;

        .infoCard{
          padding: 15px 0;
          border-bottom: 1px solid #e6e6e6;
          &:last-of-type{
            border-bottom: none;
          }
          &>div{
            color: #999;
            margin-bottom: 6px;
            .cardCont{
              color: #333;
            }
          }
        }
      }
      .feeDetail{
        .topDetail{
          width: 100%;
          padding: 20px;
          font-size: 14px;
          background: rgb(236,251,253);
          color: #333;
          border-radius: 10px;
          margin: 20px 0;
          div{
            margin-bottom: 10px;
            &:last-of-type{
              margin-bottom: 0;
            };
          }
        }
        .midDetail{
          width: 100%;
          padding: 20px;
          font-size: 14px;
          background: rgb(251,248,231);
          color: #333;
          border-radius: 10px;
          margin: 20px 0;
          div{
            margin-bottom: 10px;
            &:last-of-type{
              margin-bottom: 0;
            };
            &>span{
              color: #0fc7f0;
              span{
                font-size: 18px;
                font-weight: bolder;
                color: rgb(219,120,14)
              }
            }
          }
        }
        .bottomDetail{
          width: 100%;
          text-align: right;
          span{
            font-size: 40px;
            color: rgb(240,69,2);
            font-weight: bolder;
          }
        }
        .goPayBtn{
          margin-top: 20px;
          background: rgb(5,185,23);
          color: #fff;
          border-radius: 10px;
          padding: 10px 0;
          text-align: center;
          cursor: pointer;
          font-size: clamp(1rem, 0.85rem + 0.75vw, 1.75rem);
        }
      }
    }
  }
</style>

 src/views/system/dept/index.vue

@@ -133,6 +133,20 @@
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="所辖行政区划" prop="districtCode">
              <el-select v-model="form.districtCode" placeholder="请选择" style="width: 100%;" :disabled="disableChange">
                <el-option
                  v-for="item in areaList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
            </el-form-item>
@@ -162,6 +176,7 @@
import { listDept, getDept, delDept, addDept, updateDept, listDeptExcludeChild } from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {getAreaList} from "@/api/coalMine/placeManage/train";

export default {
  name: "Dept",
@@ -175,6 +190,7 @@
      showSearch: true,
      // 表格树数据
      deptList: [],
      areaList: [],
      // 部门树选项
      deptOptions: [],
      // 弹出层标题
@@ -192,6 +208,7 @@
      },
      // 表单参数
      form: {},
      disableChange: false,
      // 表单校验
      rules: {
        parentId: [
@@ -203,6 +220,7 @@
        orderNum: [
          { required: true, message: "显示排序不能为空", trigger: "blur" }
        ],
        districtCode: [{ required: true, message: "所属地区不能为空", trigger: "blur" }],
        email: [
          {
            type: "email",
@@ -222,6 +240,7 @@
  },
  created() {
    this.getList();
    this.getArea()
  },
  methods: {
    /** 查询部门列表 */
@@ -232,6 +251,14 @@
        this.loading = false;
      });
    },

    async getArea() {
      const res = await getAreaList();
      if(res.code == 200) {
        this.areaList = res.data;
      }
    },

    /** 转换部门数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
@@ -273,7 +300,18 @@
    },
    /** 新增按钮操作 */
    handleAdd(row) {
      console.log(row,'新增row')
      this.reset();
      if(row.deptId || row.districtCode){
        if(row.districtCode && row.districtCode !== '65'){
          this.form.districtCode = row.districtCode
          this.disableChange = true
        }else{
          this.disableChange = false
        }
      }else{
        this.disableChange = false
      }
      if (row != undefined) {
        this.form.parentId = row.deptId;
      }
@@ -296,6 +334,7 @@
      this.reset();
      getDept(row.deptId).then(response => {
        this.form = response.data;
        console.log(this.form,'form')
        this.open = true;
        this.title = "修改组织架构";
        listDeptExcludeChild(row.deptId).then(response => {

 src/views/system/user/index.vue

@@ -212,11 +212,6 @@
              <el-input v-model="form.nickName" placeholder="请输入真实姓名" maxlength="30" />
            </el-form-item>
          </el-col>
<!--          <el-col :span="12">-->
<!--            <el-form-item label="归属部门" prop="deptId">-->
<!--              <treeselect v-model="form.deptId" :options="deptOptions" :show-count="true" placeholder="请选择归属部门" />-->
<!--            </el-form-item>-->
<!--          </el-col>-->
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
@@ -303,16 +298,21 @@
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="所属地区">
              <el-select v-model="form.districtId" placeholder="请选择" style="width: 100%;">
                <el-option
                  v-for="item in areaList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
<!--          <el-col :span="12">-->
<!--            <el-form-item label="所属地区">-->
<!--              <el-select v-model="form.districtId" placeholder="请选择" style="width: 100%;">-->
<!--                <el-option-->
<!--                  v-for="item in areaList"-->
<!--                  :key="item.id"-->
<!--                  :label="item.name"-->
<!--                  :value="item.id">-->
<!--                </el-option>-->
<!--              </el-select>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
          <el-col :span="12" v-if="showDeptList">
            <el-form-item label="组织架构" prop="deptId">
              <treeselect v-model="form.deptId" :options="deptOptions" :show-count="true" placeholder="请选择组织架构" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
@@ -449,6 +449,7 @@
        deptId: undefined
      },
      showInstitutuion: false,
      showDeptList: false,
      // 列信息
      columns: [
        { key: 0, label: `用户编号`, visible: true },
@@ -473,6 +474,9 @@
        ],
        institutionIds: [
          { required: true, message: "所属机构不能为空", trigger: "blur" }
        ],
        deptId: [
          { required: true, message: "组织架构不能为空", trigger: "blur" }
        ],
        password: [
          { required: true, message: "用户密码不能为空", trigger: "blur" },
@@ -588,6 +592,11 @@
    },
    getSections(val){
      this.sectionOptions = []
      if(val.indexOf(101)>-1){
        this.showDeptList = true
      }else{
        this.showDeptList = false
      }
      if(val.indexOf(100)>-1 && val.indexOf(102)>-1){
        this.getSectionList()
        this.showInstitutuion = true
@@ -677,6 +686,9 @@
          this.showInstitutuion = true
          this.form.institutionIds = response.data.institutions.map(i=>i.institutionId.toString())
        }
        if(response.roleIds.indexOf(101)>-1){
          this.showDeptList = true
        }
      });
    },
    /** 重置密码按钮操作 */

 vue.config.js

@@ -36,7 +36,7 @@
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      [process.env.VUE_APP_BASE_API]: {
        // target: `http://localhost:8080`,
        target: `http://192.168.0.41:8085`,
        target: `http://192.168.2.42:8085`,
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
@@ -69,6 +69,22 @@
        minRatio: 0.8                   // 压缩率小于1才会压缩
      })
    ],
    module: {
      rules: [
        {
          test: /\.(xlsx|xls)$/,
          use: [
            {
              loader: 'file-loader',
              options: {
                name: '[name].[ext]', // 保留原始文件名和扩展名
                outputPath: 'assets', // 输出文件的文件夹路径，可以根据需要更改
              },
            },
          ],
        },
      ],
    }
  },
  chainWebpack(config) {
    config.plugins.delete('preload') // TODO: need test