Merge branch 'master' of https://sinanoaq.cn:8888/r/gtqtOut

Your Name

2022-07-05 25d3c170bf0913c27bfb5659a1bf5b0539c0fe15

 src/views/contingencyManagement/contingency/component/editEmergencyPersonnel.vue

对比新文件
@@ -0,0 +1,225 @@
<template>
  <div class="system-edit-user-container">
    <el-dialog
        title="修改应急队伍人员"
        v-model="isShowDialog"
        width="769px"
        draggable
    >
      <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          size="default"
          :rules="rules"
          label-width="90px">
        <el-row :gutter="35">
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="选择人员" prop="selectPeople">
              <el-input
                  v-model="ruleForm.selectPeople"
                  placeholder="请选择"
                  class="input-with-select"
              >
                <template #append>
                  <el-button :icon="Search"/>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="人员工号" prop="jobNumber">
              <el-input v-model="ruleForm.jobNumber" placeholder="请填写人员工号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="人员名称" prop="personnelName">
              <el-input v-model="ruleForm.personnelName" placeholder="请填写人员名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="人员性别" prop="personnelGender">
              <el-radio-group v-model="ruleForm.personnelGender">
                <el-radio label="男" />
                <el-radio label="女" />
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="手机号码" prop="phone">
              <el-input v-model="ruleForm.phone" placeholder="请填写手机号码"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="职位" prop="position">
              <el-input v-model="ruleForm.position" placeholder="请填写职位"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
            <span class="dialog-footer">
          <el-button size="default" type="primary" @click="submitForm(ruleFormRef)">继续添加</el-button>
               <el-button size="default" @click="onCancel">关闭</el-button>
          <el-button size="default" type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
            </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import {
  ref,
  reactive,
  toRefs,
  defineComponent
} from 'vue';

import type {
  FormRules,
  FormInstance,
} from 'element-plus'

import {
  Search
} from '@element-plus/icons-vue'
// 定义接口来定义对象的类型
interface DeptData {
  deptName: string;
  createTime: string;
  status: boolean;
  sort: number | string;
  describe: string;
  id: number;
  children?: DeptData[];
}

interface RuleFormRow {
  // teamName: string;
  // teamLevel: string;
  // teamLeader: string;
  // responsibleDepartment: any
  // teamPhone: string;
  // telephone: string;
  // describe: string;
  // selectPeople: string
}
interface UserState {
  isShowDialog: boolean;
  ruleForm: RuleFormRow;
  deptData: Array<DeptData>;
}
export default defineComponent({
  name: 'editTeamLeader',
  components: {
    // Search,
  },
  setup() {
    const state = reactive<UserState>({
      isShowDialog: false,
      ruleForm: {
        selectPeople:'', //选择人员
        jobNumber: '', // 人员工号
        phone: '', // 手机号码
        personnelGender: '', //人员性别
        position: '', //职位
        personnelName: '', // 人员名称
      },
      deptData: [], // 部门数据
    });
    // const isShowDialog = ref(false)
    const ruleFormRef = ref<FormInstance>()
    // 打开弹窗
    const openDialog = (row: RuleFormRow) => {
      // isShowDialog.value = true;
      state.ruleForm = row;
      state.isShowDialog = true;
    };
    // 关闭弹窗
    const closeDialog = () => {
      // isShowDialog.value = false;
      state.isShowDialog = false;
    };
    // 取消
    const onCancel = () => {
      closeDialog();
    };
    const rules = reactive<FormRules>({
      selectPeople:[
        {
          required: true,
          message: '人员不能为空',
          trigger: 'change',
        },
      ],
      jobNumber: [
        {
          required: true,
          message: '人员工号不能为空',
          trigger: 'change',
        },
      ],
      personnelName: [
        {
          required: true,
          message: '人员名称不能为空',
          trigger: 'change',
        },
      ],
      personnelGender: [
        {
          required: true,
          message: '人员性别不能为空',
          trigger: 'change',
        },
      ],
      phone: [
        {
          required: true,
          message: '手机号码不能为空',
          trigger: 'change',
        },
      ],
      position: [
        {
          required: true,
          message: '职位不能为空',
          trigger: 'change',
        },
      ],
    })
    const submitForm = async (formEl: FormInstance | undefined) => {
      if (!formEl) return
      await formEl.validate((valid, fields) => {
        if (valid) {
          console.log('submit!')
        } else {
          console.log('error submit!', fields)
        }
      })
    }
    return {
      openDialog,
      closeDialog,
      // isShowDialog,
      ruleFormRef,
      submitForm,
      onCancel,
      rules,
      Search,
      ...toRefs(state),
    };
  },
});
</script>
<style scoped lang="scss">
.textarea{
  height: 168px!important;
}
.textarea ::v-deep .el-textarea__inner{
  height: 168px!important;
}
::v-deep .el-table__cell {
  font-weight: 400;
}
</style>