SafetyAlertSystem-ui/src/views/base/device/components/form-device.vue

<template>
    <!-- 工程管理 新增、编辑 表单组件 -->
    <div>
        <el-form
            label-width="100px"
            size="medium"
            ref="projectParamsRef"
            :model="projectParams"
            :rules="projectParamsRules"
        >
          <el-form-item label="项目部名称" prop="departName">
            <el-select
              v-model="projectParams.departName"
              allow-create
              clearable
              filterable
              placeholder="请选择"
              @change="departNameChange"
            >
              <el-option
                v-for="item in projRange"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="项目部类型" prop="departType">
            <el-select
              v-model="projectParams.departType"
              clearable
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="item in typeRange"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="地区" prop="areaId">
            <el-select
              v-model="projectParams.areaId"
              clearable
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="item in provinceRange"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="负责人" prop="headUser">
            <el-input v-model="projectParams.headUser" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="负责人电话" prop="headUserPhone">
            <el-input v-model="projectParams.headUserPhone" :maxlength="11" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="备注" prop="remarks">
            <el-input v-model="projectParams.remarks" placeholder="请输入" />
          </el-form-item>
          <el-form-item>
              <el-button type="success" @click="onSubmit">确认</el-button>
              <el-button
                  @click="
                      () => {
                          this.$emit('closeDialog')
                      }
                  "
                  >取消</el-button
              >
          </el-form-item>
        </el-form>
    </div>
</template>

<script>
import {
  queryProvincesApi,
  queryProjDeptTypeApi,
  queryProjDeptNameApi,
  addProjDeptApi,
  editProjDeptApi
} from '@/api/base/projDept'
export default {
    name: 'FormDevice',
    props: {
        editParams: {
            type: Object,
            default: () => null,
        },
    },
    components: {  },
    created() {
      this.getRanges()
    },
    mounted() {
        console.log(this.editParams)
        if (this.editParams) {
            Object.assign(this.projectParams, this.editParams)
            this.subSort = 2
        } else {
            this.subSort = 1
        }
    },
    data() {
        return {
            subSort: '', // 提交类型：新增 1 / 修改 2
            projectParams: {
              departName: undefined, //项目部名称
              departType: undefined, //项目部类型
              areaId: undefined, // 地区
              headUser: undefined, // 负责人
              headUserPhone: undefined, //负责人电话
              remarks: undefined, // 备注
            },
            // 校验规则
            projectParamsRules: {
              departName: [
                  {
                      required: true,
                      message: '请输入项目部名称',
                      trigger: 'blur',
                  },
              ],
              departType: [
                {
                  required: true,
                  message: '请输入项目部类型',
                  trigger: 'blur',
                },
              ],
            },
            // 各类下拉
            projRange: [],
            provinceRange: [],
            typeRange: [],
            // 手机号正则
            phoneReg: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/
        }
    },
    methods: {
        /** 获取各类下拉框 */
        async getRanges() {
          // 获取省份下拉选
          let provinceRes = await queryProvincesApi()
          this.provinceRange = provinceRes.data.map(item => {
            return {
              label: item.areaName,
              value: item.areaId
            }
          })
          // 获取项目部类型下拉选
          let typeRes = await queryProjDeptTypeApi({
            dictType: 'depar_type'
          })
          this.typeRange = typeRes.data.map(item => {
            return {
              label: item.dictLabel,
              value: item.dictCode
            }
          })
          // 获取项目部名称下拉选
          let projRes = await queryProjDeptNameApi()
          this.projRange = projRes.data.map(item => {
            return {
              label: item.departName,
              value: item.departName,
              departType: item.departType,
              areaName: item.areaName,
              headUser: item.headUser,
              headUserPhone: item.headUserPhone,
              remarks: item.remarks,
            }
          })
        },
        /** 改变树结构 */
        changeTree(leaf) {
          leaf.map(item => {
            item.value = item.id
            if(item.children) {
              this.changeTree(item.children)
            }
          })
          return leaf
        },
        /** 项目部名称改变 */
        departNameChange(e) {
          this.projRange.forEach(item => {
            if(e === item.label) {
              this.projectParams.departType = item.departType
              this.projectParams.areaId = item.areaId
              this.projectParams.headUser = item.headUser
              this.projectParams.headUserPhone = item.headUserPhone
              this.projectParams.remarks = item.remarks
            }
          })
        },
        /** 级联选择器改变 */
        handleCas(e) {
          this.projectParams.impUnit = e[e.length - 1]
        },
        /** 确认按钮 */
        onSubmit() {
            this.$refs.projectParamsRef.validate(valid => {
                if (valid) {
                    if(this.projectParams.headUserPhone !== undefined && this.projectParams.headUserPhone !== "" && this.projectParams.headUserPhone !== null) {
                      if(!this.phoneReg.test(this.projectParams.headUserPhone)) {
                        this.$modal.msgError('请填写正确的联系方式')
                        return false
                      }
                    }
                    console.log('校验通过', this.projectParams, this.subSort)
                    // 1. 表单校验通过后调后台 Api
                    if(this.subSort === 1) {
                      addProjDeptApi(this.projectParams).then(res => {
                        this.$modal.msgSuccess('操作成功')
                        // 2. 成功之后通知父组件关闭弹框
                        this.$emit('closeDialog', true)
                      }).catch(err => {
                        console.log(err)
                      })
                    } else if(this.subSort === 2) {
                      editProjDeptApi(this.projectParams).then(res => {
                        this.$modal.msgSuccess('操作成功')
                        // 2. 成功之后通知父组件关闭弹框
                        this.$emit('closeDialog', true)
                      }).catch(err => {
                        console.log(err)
                      })
                    }
                }
            })
        },
    },
}
</script>

<style scoped>
::v-deep .el-select {
    width: 100%;
}
::v-deep .el-form-item__label{
  font-weight: normal;
}
</style>