EmploymentSite/vue/src/views/baseSettings/user/edit.vue

<template>
  <a-modal
    :width="1200"
    v-model:visible="visible"
    :title="title"
    :confirm-loading="confirmLoading"
    @ok="handleOk"
    ok-text="提交"
    @cancel="handleCancel"
    cancel-text="取消"
    :keyboard="false"
    :mask-closable="false"  >
    <a-form :model="dataModel" autocomplete="off">
      <a-divider orientation="left">基础信息</a-divider>
      <a-row type="flex">
        <a-col :span="7">
          <a-form-item label="姓名" name="name" :label-col="{span:7}" :rules="[{ required: true, message: '请输入人员姓名!' }]">
            <label v-if="opCategory==3">{{dataModel.name}}</label>
            <a-input v-model:value="dataModel.name" placeholder=""/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="性别" name="gender" :label-col="{span:7}" :rules="[{required: true, message: '请选择人员性别!' }]">
            <label v-if="opCategory==3">{{dataModel.gender}}</label>
            <a-select ref="select" v-model:value="dataModel.gender" :options="genderList"
                      :field-names="{ label: 'name', value: 'value' }" :allow-clear="false" > </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="联系电话" name="mobile" :label-col="{span:8}" :rules="[{ required: true, message: '请输入联系电话!' }]" >
            <label v-if="opCategory==3">{{dataModel.mobile}}</label>
            <a-input v-model:value="dataModel.mobile" placeholder=""/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row type="flex">
        <a-col :span="7">
          <a-form-item label="角色"  name="roleID" :label-col="{span:7}" :rules="[{ required: true, message: '请选择人员角色!' }]">
            <label v-if="opCategory==3">{{dataModel.roleID }}</label>
            <a-select ref="select" v-model:value="dataModel.roleID" :options="roleList"
                      :field-names="{ label: 'name', value: 'value' }" :allow-clear="false" > </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">

        </a-col>
        <a-col :span="7">

        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>
<script lang="ts">
import {defineComponent, reactive, ref, toRefs} from "vue";
import {getSiteUserByID, saveSiteUser} from "@/api/baseSettings/userInfo";
import BUploadFile from "@/components/file/uploadFile.vue";
import type {SelectProps} from "ant-design-vue";
import {getSysDictionaryList} from "@/api/system/dictionary";
import {message} from "ant-design-vue";

interface InstitutionModel {
  dataModel: any;
}
export default defineComponent({
  name:'UserInfoEditForm',
  components: {BUploadFile},
  props: {
    loadData: {
      type: Function,
      default: null
    }
  },
  setup(props) {
    const formData = reactive<InstitutionModel>({ dataModel:{}});
    const visible = ref<boolean>(false);
    const confirmLoading = ref<boolean>(false);
    const title = ref();
    const opCategory = ref<any>();
    const isAllowCommit = ref<boolean>(true) ;
    const formState = reactive({
      total: 0,
      selectedRowKeys: [],
      loading: false
    });
    const genderList =  ref<SelectProps["options"]>();
    const roleList =  ref<SelectProps["options"]>();
    const getGenderList = async function(){
      const genderResult :any = await getSysDictionaryList("Gender");
      genderList.value = genderResult;
    }
    const getRoleList = async function(){
      const roleResult :any = await getSysDictionaryList("SiteUserRole");
      roleList.value = roleResult;
    }

    const loadData = (siteUserID: string) => {
      getSiteUserByID(siteUserID).then((result: any) => {
        formData.dataModel = result;
        console.log("dataModel",formData.dataModel);
      });
    }
    const show = (id: any,method:string,category:any) => {
      title.value ="人员管理-"+method;
      opCategory.value = category;
      getGenderList();
      getRoleList();
      loadData(id);
      visible.value = true;
    };

    const onSelectChange = (selectedRowKeys: any) => {
      formState.selectedRowKeys = selectedRowKeys;
    };

    const handleOk = () => {
      if(formData.dataModel.name==null||formData.dataModel.gender ==null||formData.dataModel.mobile==null|| formData.dataModel.roleID==null){
        message.error("请填写完整的人员信息!");
        isAllowCommit.value = false;
      }
      if(isAllowCommit.value){
        saveSiteUser(formData.dataModel).then(result => {
          if (result) {
            visible.value = false;
            props.loadData();
          }
        });
      }

    };

    const handleCancel = () => {
      visible.value = false;
    };


    return {
      ...toRefs(formData),
      title,
      visible,
      formState,
      opCategory,
      isAllowCommit,
      confirmLoading,
      genderList,
      roleList,
      show,
      onSelectChange,
      handleOk,
      handleCancel
    };
  },
  created() {
  },
})
</script>