EmploymentSite/vue/src/views/baseSettings/site/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  autocomplete="off" >
      <a-divider orientation="left">基础信息管理</a-divider>
      <a-row type="flex">
        <a-col :span="7">
          <a-form-item label="驿站编号" name="SiteCode" :label-col="{span:7}" :rules="[{ required: true, message: '请输入驿站编号!' }]">
            <label v-if="opCategory==3">{{dataModel.siteCode}}</label>
            <a-input v-model:value="dataModel.siteCode" placeholder=""/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="站点名称" name="SiteName" :label-col="{span:6}" :rules="[{ required: true, message: '请输入站点名称!' }]">
            <label v-if="opCategory==3">{{dataModel.siteName }}</label>
            <a-input v-model:value="dataModel.siteName" placeholder=""/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="所属机构" name="InstitutionName" :label-col="{span:6}" :rules="[{ required: true, message: '请选择所属机构!' }]">
            <label v-if="opCategory==3">{{dataModel.institutionName}}</label>
            <a-select  ref="select" v-model:value="dataModel.institutionID" :options="institutionList"
                      :field-names="{ label: 'text', value: 'value' }" :allow-clear="true" > </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row type="flex">
        <a-col :span="7">
          <a-form-item label="所属县区"  name="RegionCode" :label-col="{span:7}" :rules="[{ required: true, message: '请选择所属县区!' }]">
            <label v-if="opCategory==3">{{dataModel.regionCode}}</label>
            <a-select ref="select" v-model:value="dataModel.regionCode" :options="regionList"
              :field-names="{ label: 'name', value: 'code' }" :allow-clear="true" @change="getStreetList()" > </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="所属街道"  name="StreetCode" :label-col="{span:6}" :rules="[{ required: true, message: '请选择所属街道!' }]">
            <label v-if="opCategory==3">{{dataModel.streetCode }}</label>
            <a-select ref="select" v-model:value="dataModel.streetCode" :options="streetList"
              :field-names="{ label: 'name', value: 'code' }" :allow-clear="true" > </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="详细地址"  name="DetailAddress" :label-col="{span:6}" :rules="[{ required: true, message: '请输入详细地址!' }]">
            <label v-if="opCategory==3">{{dataModel.detailAddress }}</label>
            <a-input v-model:value="dataModel.detailAddress" placeholder=""/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row type="flex">
        <a-col :span="7">
          <a-form-item label="站点负责人"  name="FzrName" :label-col="{span:7}" :rules="[{ required: true, message: '请输入站点负责人!' }]">
            <label v-if="opCategory==3">{{dataModel.fzrName }}</label>
            <a-input v-model:value="dataModel.fzrName" placeholder=""/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="联系电话"  name="FzrMobile" :label-col="{span:6}" :rules="[{ required: true, message: '请输入联系电话!' }]">
            <label v-if="opCategory==3">{{dataModel.fzrMobile }}</label>
            <a-input v-model:value="dataModel.fzrMobile" placeholder=""/>
          </a-form-item>
        </a-col>
        <a-col :span="7">
          <a-form-item label="驿站坐标"  name="SitePosition" :label-col="{span:7}" :rules="[{ required: true, message: '请选择驿站坐标!' }]">
            <label v-if="opCategory==3">{{dataModel.sitePosition}}</label>
            <a-input v-model:value="dataModel.sitePosition" placeholder=""/>
          </a-form-item>
        </a-col>
        <a-col :span="1">
            <a-button type="primary"  @click='' >选择</a-button>
        </a-col>
      </a-row>
      <a-divider orientation="left">管理人员 共计：{{manageUsers.length}}</a-divider>
      <a-row>
        <a-col :span="24" style="text-align: right; margin-top: 20px; margin-right: 20px">
          <Space>
            <a-button @click="addSiteUser">
              <template #icon>
                <plus-circle-outlined/>
              </template>
              新增
            </a-button>
          </Space>
        </a-col>
      </a-row>
      <a-row>
        <a-col style="margin-bottom: 20px;">
          <a-table :columns="columns" :data-source="manageUsers" :pagination="pagination"
                   :loading="formState.loading"
                   @change="handleTableChange"
                   :row-selection="{ selectedRowKeys: formState.selectedRowKeys, onChange: onSelectChange}"
                   :row-key="record=>record.siteId"
                   bordered>
            <template #bodyCell="{ column ,index}">
              <template v-if="column.key === 'name'">
                <div>
                  <a-select
                    ref="select"
                    v-model:value="manageUsers[index][column.key]"
                    :options="allUsers"
                    @change="manageUsersChange(index,manageUsers[index][column.key])"
                    :field-names="{ label: 'name', value: 'siteUserID' }" style="width: 200px" >
                  </a-select>
                </div>
              </template>
              <template v-if="column.key === 'genderName'">
                {{manageUsers[index][column.key]}}
              </template>
              <template v-if="column.key === 'roleName'">
                {{manageUsers[index][column.key]}}
              </template>
              <template v-if="column.key === 'operation'">
                <a-button type="link" size="small" @click="delSiteUser(index)">删除</a-button>
              </template>
            </template>
          </a-table>
        </a-col>
      </a-row>
      <a-divider orientation="left">其他信息</a-divider>
      <a-row>
        <a-textarea :auto-size="{ minRows: 4, maxRows: 10 }"  v-model:value="dataModel.remark"  :disabled="opCategory==3"
                    placeholder="备注" style="text-align: center;" />
      </a-row>
    </a-form>
  </a-modal>
</template>
<script lang="ts">
import {computed, defineComponent, reactive, ref, toRefs} from "vue";
import {getSiteByID, saveSite} from "@/api/baseSettings/siteInfo";
import BUploadFile from "@/components/file/uploadFile.vue";
import {message, SelectProps, TableColumnsType, TableProps} from "ant-design-vue";
import {getRegionCodeList, getStreetCodeList} from "@/api/system/area/index";
import {getSiteUserList,getSiteUserDataList,getListBySiteID, getSiteUserByID} from "@/api/baseSettings/userInfo";
import {getInstitutionDataList} from "@/api/baseSettings/institution";
import {getPaginationTotalTitle} from "@/utils/common";

interface siteModel {
  dataModel: any;
}
export default defineComponent({
  name:'SiteInfoEditForm',
  components: {BUploadFile},
  props: {
    loadData: {
      type: Function,
      default: null
    }
  },
  setup(props) {
    const visible = ref<boolean>(false);
    const isAllowCommit = ref<boolean>(false);
    const confirmLoading = ref<boolean>(false);
    const title = ref();
    const opCategory = ref<any>();
    const formState = reactive({
      total: 0,
      selectedRowKeys: [],
      loading: false
    });
    const formData = reactive<siteModel>({ dataModel:{}});
    const pageParams = reactive({
      pageIndex: 1,
      pageSize: 10,
      siteID:''
    });
    const columns: TableColumnsType = [
      {title: '序号', align: "center",key: 'siteUserID',customRender: item => `${pageParams.pageSize * (pageParams.pageIndex - 1) + item.index + 1}`},
      {title: '姓名', dataIndex: 'name', key: 'name', align: "center"},
      {title: '性别', dataIndex: 'genderName', key: 'genderName', align: "center"},
      {title: '角色', dataIndex: 'roleName', key: 'roleName', align: "center"},
      {title: '操作', key: 'operation', fixed: 'right',width:170, align: "center"},
    ];
    const pagination = computed(() => ({
      total: formState.total,
      current: pageParams.pageIndex,
      pageSize: pageParams.pageSize,
      showSizeChanger: true,
      showTotal: total => getPaginationTotalTitle(total)
    }));
    const onSelectChange = (selectedRowKeys: any) => {
      formState.selectedRowKeys = selectedRowKeys;
    };
    const handleTableChange: TableProps['onChange'] = (pag: { pageSize: number; current: number },) => {
      pageParams.pageIndex = pag.current;
      pageParams.pageSize = pag.pageSize;
    };

    const regionList = ref<SelectProps['options']>();
    const streetList = ref<SelectProps['options']>();
    const siteUserList = ref<SelectProps['options']>();
    const institutionList = ref<SelectProps["options"]>();

    const manageUsers = ref<any>([]);
    const allUsers = ref<any>([]);

    const getRegionList = async function(){
      const regionResult: any = await getRegionCodeList();
      regionList.value = regionResult;
    }
    const getStreetList = async function(){
      const streetResult: any = await getStreetCodeList(formData.dataModel.regionCode);
      streetList.value = streetResult;
    }
    const getUserDataList = async function(){
      const siteUserResult :any = await getSiteUserDataList();
      console.log('siteUserResult',siteUserResult);
      siteUserList.value = siteUserResult;
    }
    const getInstitutionList = async function(){
      const institutionResult :any = await getInstitutionDataList();
      console.log('institutionResult',institutionResult);
      institutionList.value = institutionResult;
    }

    const loadData = (siteID: string) => {
      getSiteByID(siteID).then((result: any) => {
        formData.dataModel = result;
        console.log("dataModel",formData.dataModel);
        getManageUsers(formData.dataModel.siteID);
        if (formData.dataModel.regionCode != null){
          getStreetList();
        }
        if (formData.dataModel.siteX !=null && formData.dataModel.siteY != null){
          formData.dataModel.sitePosition = "X:"+formData.dataModel.siteX+" Y:"+formData.dataModel.siteX;
        }
      });
    }
    const show = (id: any,method:string,category:any) => {
      title.value ="驿站站点管理-"+method;
      opCategory.value = category;
      getAllUsers();
      getRegionList();
      getInstitutionList();
      getUserDataList();
      loadData(id);
      visible.value = true;
    };

    const getAllUsers = () => {
      pageParams.siteID = '';
      getSiteUserList(pageParams).then((result :any) => {
        allUsers.value = result.list;
        console.log('allUsers',allUsers);
      })
    }
    const getManageUsers = (id: string) => {
      pageParams.siteID = id;
      getListBySiteID(pageParams).then((result :any)=> {
        manageUsers.value = result.list;
      });
    }

    const addSiteUser = () => {
      if(allUsers.value.length >0){
        const newUser = allUsers.value[0];
        (manageUsers.value as any[]).push({siteUserID:newUser.siteUserID,siteID:formData.dataModel.siteID,name:newUser.name,genderName:newUser.genderName,roleName:newUser.roleName});
        validateSameUser();
      }else{
        message.error("未查询到站点信息!");
      }
    }
    const delSiteUser = (site) =>{
      (manageUsers.value as any[]).splice(site, 1);
      validateSameUser();
    }
    const manageUsersChange = (index:any,siteUserID:any) =>{
      console.log('siteUserID',siteUserID);
      getSiteUserByID(siteUserID).then((result :any)=> {
        result.siteID = formData.dataModel.siteID;
        manageUsers.value[index]= result;
        console.log('manageUsers',manageUsers.value);
        validateSameUser();
      });
    }

    const validateSameUser = ()=>{
      isAllowCommit.value = true;
      if (manageUsers.value.length>1){
        manageUsers.value.forEach(item=>{
          const sameData = manageUsers.value.filter(x => x.siteUserID == item.siteUserID);
          console.log("sameData",sameData);
          if (sameData.length >1){
            isAllowCommit.value = false;
          }
        });
      }
      if (!isAllowCommit.value){
        message.error("不允许添加相同的人员!");
      }
    }

    const handleOk = () => {
      validateSameUser();
      if (isAllowCommit.value){
        formData.dataModel.manageUsers = manageUsers.value;
        saveSite(formData.dataModel).then(result => {
          if (result) {
            visible.value = false;
            props.loadData();
          }
        });
      }
    };

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

    return {
      ...toRefs(formData),
      title,
      opCategory,
      visible,
      formState,
      isAllowCommit,
      confirmLoading,
      columns,
      pageParams,
      pagination,
      regionList,
      streetList,
      siteUserList,
      institutionList,
      allUsers,
      manageUsers,
      show,
      onSelectChange,
      handleTableChange,
      getRegionList,
      getStreetList,
      getUserDataList,
      getInstitutionList,
      getAllUsers,
      addSiteUser,
      delSiteUser,
      manageUsersChange,
      handleOk,
      handleCancel
    };
  },
  created() {
  },
})
</script>