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.current_position" :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;" maxlength="50" 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-select style="width: 217px;" v-model="formData.certificateFailReason" placeholder="请选择">
                <el-option v-for="dict in dict.type.post_no_pass" :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 style="width: 517px;" label="参加工作时间" prop="workTime">
              <el-date-picker clearable v-model="formData.workTime" @change="startDateChanged"
                              :picker-options="startDatepickerOptions" 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 prop="bornTime" label="出生日期">
              <el-date-picker v-model="formData.bornTime" @change="startDateChanged"
                              :picker-options="startDatepickerOptions" align="right" type="date" placeholder="选择开始日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="6">
            <el-form-item prop="entryTime" label="现任职时间">
              <el-date-picker v-model="formData.entryTime" :picker-options="endDatepickerOptions" align="right"
                              type="date" 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" v-hasPermi="['system:information:edit']" 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', 'post_no_pass','current_position'],
    data() {
      return {
        startDatepickerOptions: {
          disabledDate(time) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            return time.getTime() > date;
          },
        },
        endDatepickerOptions: {
          disabledDate: this.disabledDate,
        },
        //基础信息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'}
          ],
          certificateFailReason: [
            {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;
        });
      },


      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;
          }
        });
      },
      startDateChanged(time) {
        if (this.formData.bornTime > this.formData.entryTime) {
          this.formData.entryTime = this.formData.bornTime;
        }
      },
      disabledDate(time) {
        //小于开始日期禁止选择
        let bornTime = new Date();
        bornTime.setTime(bornTime.getTime() - 3600 * 1000 * 24);
        if (this.formData.bornTime) {
          bornTime = new Date(this.formatTime(this.formData.bornTime, 'YYYY-MM-DD'));
          bornTime.setTime(bornTime.getTime() - 3600 * 1000 * 24);
        }
        return time.getTime() > new Date(bornTime).getTime()
      },
      /** 查询机构下拉树结构 */
      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>