soc_web/src/views/system/user/extend.vue

<template>
  <div class="app-container">
    <h3 class="title">编辑管理人员信息</h3>
    <div class="info-box">
      <el-descriptions >
        <el-descriptions-item v-for="v in dataInfo" :label="v.label" :key="v.key">{{ v.value }}</el-descriptions-item>
        <el-descriptions-item label="角色">{{ roleName }}</el-descriptions-item>
        <el-descriptions-item label="性别">{{ sex }}</el-descriptions-item>
        <el-descriptions-item label="状态">{{ status }}</el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="info-box">
      <el-form inline  :model="formData" :rules="rules" ref="form"  label-position="left" label-width="140px">
        <el-row>
          <el-col :xs="24" :sm="12" :md="8" :lg="6" >
            <el-form-item label="是否专职" prop="isFullTime">

              <el-switch
                v-model="formData.isFullTime"
          
                active-value="1"
                inactive-value="0"
              ></el-switch>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="6" >
            <el-form-item label="是否持证上岗" prop="certificateWork">
              <el-switch
                v-model="formData.certificateWork"
          
                active-value="1"
                inactive-value="0"
              ></el-switch>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row  >
  
          <el-col :xs="24" :sm="12" :md="8" :lg="6" >
            <el-form-item  label="所属部门"  prop="deptId">
              <el-select style="width: 217px;" v-model="formData.deptId" placeholder="请选择">
        <el-option
                v-for="dict in dict.type.sys_department_type"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="12" :md="8" :lg="6" >
            <el-form-item  label="责任职务"  prop="duties">
              <el-select style="width: 217px;" v-model="formData.duties" placeholder="请选择">
        <el-option
                v-for="dict in dict.type.sys_duties"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
              </el-select>
            </el-form-item>
          </el-col>
       
          <el-col :xs="24" :sm="12" :md="8" :lg="6" >
            <el-form-item  label="最高学历" prop="highestEducation">
              <el-select style="width: 217px;" v-model="formData.highestEducation" placeholder="请选择">
        <el-option
                v-for="dict in dict.type.sys_highest_education"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
              </el-select> 
              </el-form-item>
          </el-col>
        </el-row>
        <el-row>
      
          <el-col :xs="24" :sm="12" :md="8" :lg="6" >
            <el-form-item  label="用工形式" prop="workType">
              <el-select style="width: 217px;" v-model="formData.workType" placeholder="请选择">
        <el-option
                v-for="dict in dict.type.sys_work_type"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="6" >
            <el-form-item  label="学历取得方式" prop="educationType">
              <el-select style="width: 217px;" v-model="formData.educationType" placeholder="请选择">
        <el-option
                v-for="dict in dict.type.sys_education_type"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
              </el-select> 
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="12" :md="8" :lg="6" >
            <el-form-item  label="初级以上相关专业技术职业资格" prop="professionalQualifications">
              <el-input style="width: 217px;" v-model="formData.professionalQualifications" placeholder="请输入">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :xs="24" :sm="12" :md="8" :lg="6" >
            <el-form-item  label="持证上岗未通过原因" prop="certificateFailReason">
              <el-input style="width: 217px;" v-model="formData.certificateFailReason" placeholder="请输入">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="6" >
            <el-form-item style="width: 517px;" label="参加工作时间" prop="workTime">
              <el-date-picker
                clearable
                v-model="formData.workTime"
                type="date"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="请选择时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="6" >
            <el-form-item style="width: 517px;" label="现任职时间"  prop="workTime">
              <el-date-picker
                clearable
                v-model="formData.entryTime"
                type="date"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="请选择时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="6" >
            <el-form-item style="width: 517px;" label="出生日期" prop="bornTime">
              <el-date-picker
                clearable
                v-model="formData.bornTime"
                type="date"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="请选择时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="6" >
            <el-form-item  label="分管领导姓名" prop="responsibilitiesLeaderName">
              <el-input style="width: 217px;" v-model="formData.responsibilitiesLeaderName" placeholder="请输入">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="6" >
            <el-form-item  label="分管领导职务" prop="responsibilitiesLeaderDuties">
              <el-select style="width: 217px;" v-model="formData.responsibilitiesLeaderDuties" placeholder="请选择">
              <el-option
                v-for="dict in dict.type.sys_duties"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :sm="12" :md="8" :lg="6" >
            <el-form-item label="上传相关证书">
              <image-upload :limit="5" :value="formData.qualificationCertificateUrl" :fileSize="2" @input="getImgUrl"></image-upload>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="6" >
            <el-form-item label="示例图">
              <div style="width: 280px;">
                <el-image :src="uplp"></el-image>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div style="margin-top: 50px; margin-left: 42%">
      <el-button type="primary" @click="saveExtend" size="small">提交</el-button>
      <el-button type="primary" @click="nosaveExtend" size="small">取消</el-button>
    </div>

  </div>
</template>

<script>
import uploadpng from "@/assets/images/upload.png";
import uplpng from "@/assets/images/upl.png";
import {getUser} from "@/api/system/user";
import TreeSelect from '@riophae/vue-treeselect'
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { deptTreeList } from "@/api/system/public";

import {extendUserInformation} from "@/api/system/information";

export default {
  props: [],
  components: {TreeSelect},
  dicts:['sys_highest_education',"sys_work_type","sys_duties","sys_education_type",'sys_department_type'],
  data() {
    return {
      //基础信息key
      infoKeys:[
        {label:'用户名称',key:'username'},
        {label:'用户昵称',key:'name'},
        {label:'工号',key:'jobNumber'},
      //  {label:'部门',key:'orgName'},
        {label:'手机',key:'phone'},
        // {label:'性别',key:'gender'},
        // {label:'状态',key:'isLock'},
        {label:'机构',key:'orgName'},
      ],
      dataInfo:[],
      formData:{
        deptId: null,
        duties: null,
        workType: null,
        isFullTime: "1",
        highestEducation: null,
        educationType: null,
        certificateWork: "1",
        professionalQualifications: null,
        certificateFailReason: null,
        workTime: null,
        entryTime: null,
        bornTime: null,
        responsibilitiesLeaderName: null,
        responsibilitiesLeaderDuties: null,
        qualificationCertificateUrl: null,
        userId: null,
      },
      rules: {
         deptId: [
            { required: true,message: '请选择所属部门', trigger: 'blur' },
          ],
          duties:[
            { required: true,message: '请选择职务', trigger: 'blur' },
          ],
          workType:[
            { required: true, message: '请选择用工形式',trigger: 'blur' },
          ],
          isFullTime:[
            { required: true,message: '请选择是否专职', trigger: 'blur' },
          ],
          highestEducation:[
            { required: true,message: '请选择最高学历', trigger: 'blur' },
          ],
          educationType:[
            { required: true,message: '请选择学历取得形式', trigger: 'blur' },
          ],
          certificateWork:[
            { required: true,message: '请选择是否持证上岗', trigger: 'blur' },
          ],
          workTime:[
            { required: true,message: '请选择参加工作时间',trigger: 'blur' },
          ],
          entryTime: [
            { required: true,message: '请选择入职时间', trigger: 'change' }
          ],
          bornTime: [
            { required: true,message: '请选择出生时间', trigger: 'change' }
          ],
          responsibilitiesLeaderName: [
            { required: true,message: '请输入分管领导名字', trigger: 'change' }
          ],
          responsibilitiesLeaderDuties: [
            { required: true,message: '请选择分管领导职务', trigger: 'change' }
          ],
          qualificationCertificateUrl: [
            { required: true,message: '请选择上传资格证', trigger: 'change' }
          ],
          professionalQualifications:[
            { required: true,message: '请输入初级以上相关专业技术职业资格', trigger: 'change' }
          ],
          date1: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
          date2: [
            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
          ],
          type: [
            { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
          ],
          resource: [
            { required: true, message: '请选择活动资源', trigger: 'change' }
          ],
          desc: [
            { required: true, message: '请填写活动形式', trigger: 'blur' }
          ]
      },
      // 机构树选项
      deptList: undefined,
      // 遮罩层
      orgloading: true,
      // 选中数组
      orgids: [],
      // 选中数组
      Bankids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 机构物防建设表格数据
      constructionList: [],
      // 银行物防建设表格数据
      BankPhysicalDefenseConstructionList: [],
      // 弹出层标题
      orgtitle: "",
      // 弹出层标题
      Banktitle: "",
      // 是否显示弹出层
      Bankopen: false,
      // 表单参数
      Bankform: {},
      // 是否显示弹出层
      orgopen: false,
      roleName: null,
      sex: null,
      status: null,
      // 表单参数
      orgform: {},
      //2个图片信息
      uploadp: uploadpng,
      uplp: uplpng,
      //下拉框生成信息
      orgTypes: {
        orgTyp1: { label: "营业网点", value: 0 },
        orgTyp2: { label: "监控中心", value: 1 },
      },

      businessLibraryTypes: {
        businessLibraryTyp1: { label: "1类业务库", value: 1 },
        businessLibraryTyp2: { label: "2类业务库", value: 2 },
        businessLibraryTyp3: { label: "3类业务库", value: 3 },
      },
      platformBrands: {
        platformBrand1: { label: "品牌1", value: 0 },
        platformBrand2: { label: "品牌2", value: 1 },
      },
      platformSupplierBrands: {
        platformSupplierBrand1: { label: "品牌1", value: 0 },
        platformSupplierBrand2: { label: "品牌2", value: 1 },
      },
      prop: "",
      propItem: "",

      row: "",
      imgs:[]
    };
  },

  computed: {
    switchModel: {
      get() {
        return this.switchValue === 1; // 将0转换为false，1转换为true
      },
      set(value) {
        this.switchValue = value ? 1 : 0; // 将false转换为0，true转换为1
      },
    },
  },
  created() {
    this.getInfo();
    this.getDeptTreeList();
  },
  mounted() {},
  methods: {
    getImgUrl(img){
      
      this.imgs.push(img);
      console.log(this.imgs,'imgs')
    },
    handleChange(value) {},
    //自定义数据
    tenantIdnormalizer(node, instanceId) {
      if (node.children && !node.children.length) {
        delete node.children
      }
      return {
        id: node.deptId,
        label: node.deptName,
        children: node.children
      }
    },
    getInfo() {
      getUser(this.$route.params.userId).then((data) => {
        console.log(data,'userdata');
        if (!data.data ) return;
        let res = data.data;
        this.dataInfo = this.infoKeys.map((v,i)=> {
          v.value =  res[v.key];
          return v
        })
        this.roleName=data.roleName;
        this.sex=data.sex;
        this.status=data.status;
        
         this.formData=data.information;
       
       
        console.log(this.formData, 'formData')
      });
    },
    saveExtend(){
      this.formData.userId = this.$route.params.userId;
      this.formData.qualificationCertificateUrl = this.imgs.toString(',');
      this.$refs['form'].validate((valid) => {
          if (valid) {
            extendUserInformation(this.formData).then(res=>{
                this.$message.success('保存成功！')
                this.$router.go(-1)
            })
          }
        });

    },
    getExtendInfo() {
      getExtendByOrgId(this.$route.params.id).then((data) => {
        console.log(data.data);
        if (data.data != null) {
          this.orgType = data.data.orgType;
          this.weatherAreaCode = data.data.weatherAreaCode;
          this.premisesArea = data.data.premisesArea;
          this.ownership = data.data.ownership;
          this.outsideArea = data.data.outsideArea;
          this.askari = data.data.askari;
          this.remoteControl = data.data.remoteControl;
          this.selfServiceBank = data.data.selfServiceBank;
          this.lobbyEquipment = data.data.lobbyEquipment;
          this.wallPenetratingEquipment = data.data.wallPenetratingEquipment;
          this.extendId = data.data.id;
        }
      });
    },

        /** 查询机构下拉树结构 */
        getDeptTreeList() {
      deptTreeList().then(response => {
        this.deptList = response.data;
        this.defaultKeys = response.data[0];
      });
    },
    getOrgPhysicalDefenseConstructionInfo() {
      this.orgloading = true;
      let dat = { orgId: this.$route.params.id };
      listOrgPhysicalDefenseConstruction(dat).then((data) => {
        this.constructionList = data.rows;
        this.orgloading = false;
      });
    },
    getBankPhysicalDefenseConstructionInfo() {
      this.bankloading = true;
      let dat = { orgId: this.$route.params.id };
      listBankPhysicalDefenseConstruction(dat).then((data) => {
      
        this.BankPhysicalDefenseConstructionList = data.rows;
        this.bankloading = false;
      });
    },
    // 取消按钮
    Bankcancel() {
      this.Bankopen = false;
      this.Bankreset();
    },
    // 表单重置
    Bankreset() {
      this.Bankform = {
        id: null,
        standard: null,
        dateOfCompliance: null,
        certificateEvidence: null,
        certificate: null,
        evidence: null,
        createTime: null,
        updateTime: null,
        createBy: null,
        updateBy: null,
        orgId: null,
      };
      this.resetForm("Bankform");
    },
    // 多选框选中数据
    handleBankSelectionChange(selection) {
      this.Bankids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleBankAdd() {
      this.Bankreset();
      this.Bankopen = true;
      this.Banktitle = "添加银行物防建设";
    },
    /** 修改按钮操作 */
    handleBankUpdate(row) {
      this.Bankreset();
      const id = row.id || this.Bankids;
      getBankPhysicalDefenseConstruction(id).then((response) => {
        this.Bankform = response.data;
        this.Bankopen = true;
        this.Banktitle = "修改银行物防建设";
      });
    },
    /** 提交按钮 */
    submitBankForm() {
      this.Bankform.orgId = this.$route.params.id;
      this.$refs["Bankform"].validate((valid) => {
        if (valid) {
          if (this.Bankform.id != null) {
            updateBankPhysicalDefenseConstruction(this.Bankform).then(
              (response) => {
                this.$modal.msgSuccess("修改成功");
                this.Bankopen = false;
                this.getBankPhysicalDefenseConstructionInfo();
              }
            );
          } else {
            addBankPhysicalDefenseConstruction(this.Bankform).then(
              (response) => {
                this.$modal.msgSuccess("新增成功");
                this.Bankopen = false;
                this.getBankPhysicalDefenseConstructionInfo();
              }
            );
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleBankDelete(row) {
      const Bankids = row.id || this.Bankids;
      this.$modal
        .confirm('是否确认删除银行物防建设编号为"' + Bankids + '"的数据项？')
        .then(function () {
          return delBankPhysicalDefenseConstruction(Bankids);
        })
        .then(() => {
          this.getBankPhysicalDefenseConstructionInfo();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    // 表单重置
    orgreset() {
      this.orgform = {
        id: null,
        standard: null,
        dateOfCompliance: null,
        certificateEvidence: null,
        certificate: null,
        evidence: null,
        createTime: null,
        updateTime: null,
        createBy: null,
        updateBy: null,
        orgId: null,
      };
      this.resetForm("orgform");
    },
    // 取消按钮
    orgcancel() {
      this.orgopen = false;
      this.orgreset();
    },
    // 多选框选中数据
    handleOrgSelectionChange(selection) {
      this.orgids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleOrgAdd() {
      this.orgreset();
      this.orgopen = true;
      this.orgtitle = "添加机构物防建设";
    },
    /** 修改按钮操作 */
    handleOrgUpdate(row) {
      this.orgreset();
      const id = row.id || this.orgids;
      getOrgPhysicalDefenseConstruction(id).then((response) => {

        this.orgform = response.data;
        this.orgopen = true;
        this.orgtitle = "修改机构物防建设";
      });
    },
    /** 提交按钮 */
    submitOrgForm() {
      this.orgform.orgId = this.$route.params.id;
      this.$refs["orgform"].validate((valid) => {
        if (valid) {
          if (this.orgform.id != null) {
            updateOrgPhysicalDefenseConstruction(this.orgform).then(
              (response) => {
                this.$modal.msgSuccess("修改成功");
                this.orgopen = false;
                this.getOrgPhysicalDefenseConstructionInfo();
              }
            );
          } else {
            addOrgPhysicalDefenseConstruction(this.orgform).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.orgopen = false;
              this.getOrgPhysicalDefenseConstructionInfo();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleOrgDelete(row) {
      const orgids = row.id || this.orgids;
      this.$modal
        .confirm('是否确认删除机构物防建设编号为"' + orgids + '"的数据项？')
        .then(function () {
          return delOrgPhysicalDefenseConstruction(orgids);
        })
        .then(() => {
          this.getOrgPhysicalDefenseConstructionInfo();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },

    nosaveExtend() {
      this.$router.go(-1);
    },
    triggerFileInput() {
      this.$refs.fileInput.click();
    },
    async handleFileChange(event) {
      const file = event.target.files[0];
      if (!file) return;

      // 创建 FormData 对象并添加文件
      const formData = new FormData();
      formData.append('file', file);

      // // 发送文件到您的文件上传 API
      try {
        uploadFile(formData).then((res) => {
          console.log(res);
          // this.orgform.certificateEvidence = res.data;
        });
        // 处理上传成功的逻辑
        console.log('上传成功');
      } catch (error) {
        // 处理上传失败的逻辑
        console.log('上传失败');
      }
      // try {
      //   const response = await request.post('http://localhost:9527/dev-api/file/file/upload', formData, {
      //     headers: {
      //       'Content-Type': 'multipart/form-data',
      //     },
      //   });
      //   // 处理上传成功的逻辑
      //   console.log('上传成功', response);
      // } catch (error) {
      //   // 处理上传失败的逻辑
      //   console.log('上传失败', error);
      // }
      // 重置 input 元素，以便下次选择相同文件时仍能触发 change 事件
      event.target.value = '';
    },
  },
  fillter: {},
};
</script>

<style scoped lang="scss">

.title{
  font-size: 18px;
  text-align: left;
  background: #008CD6bd;
  color:#fff;
  height: 36px;
  line-height: 36px;
  padding-left: 8px;
  margin: 0;
}
.info-box{
  margin: 30px;
}
.demo-form-inline {
}
.dialog-footer {
}
.container {
}
.image-container {
  display: inline-block;
  width: 200px;
  margin-right: 20px; /* 设置与下一个div的水平间距 */
}
.zoom-image {
  transition: transform 0.3s ease;
}

.zoom-image:hover {
  transform: scale(1.02);
}
.border-color-change {
  border: 1px solid #ccc;
  transition: border-color 0.3s ease;
}

.border-color-change:hover {
  border-color: #1ea8e9; /* 您可以将此颜色更改为所需的颜色 */
}
</style>