EmploymentSite/vue/src/views/jobUserManager/signinMgt/edit.vue

<template>
  <div class="card-edit">
    <a-form :model="dataModel" autocomplete="off" @finish="onFinish">
      <a-divider orientation="left">编辑外出服务</a-divider>
      <a-row :gutter="24">
        <a-col :span="8">
          <a-form-item label="姓名" :label-col="{ span: 6 }"
                       name="signinerName" :rules="[{ required: true, message: '请输入姓名!' }]">
            <a-input v-model:value="dataModel.signinerName" placeholder=""  :disabled="true"/>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="所属驿站" :label-col="{span:6}" name="siteID"
                       :rules="[{ required: true, message: '请选择所属驿站!' }]">
            <a-select
              ref="select"
              v-model:value="dataModel.siteID"
              :options="siteList"
              :field-names="{ label: 'siteName', value: 'siteID' }"
              :allow-clear="true"
              @change="siteChange"
            >
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">

          <a-form-item label="所属县区" :label-col="{span:6}"
                       name="regionCode" :rules="[{ required: true, message: '请选择所属县区!' }]">
            <a-select
              ref="select"  :disabled="true"
              v-model:value="dataModel.regionCode"
              :options="regionList"
              :field-names="{ label: 'name', value: 'code' }"
              :allow-clear="true"
              @change="loadData"
            >
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item  label="外出类型" :label-col="{ span: 6 }"
                        name="signinType"  :rules="[{ required: true, message: '请选择外出类型!' }]">
            <a-select
              ref="select"
              v-model:value="dataModel.signinType"
              :options="signinTypeList"
              :field-names="{ label: 'name', value: 'value' }"
              :allow-clear="true"
            >
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="外出时间" :label-col="{ span: 6 }" name="signinTime"
                       :rules="[{ required: true, message: '请选择外出时间!' }]">
            <a-date-picker
              v-model:value="dataModel.signinTime"
              picker="date"
              value-format="YYYY-MM-DD"/>
          </a-form-item>
        </a-col>
        <a-col :span="8" v-if="dataModel.signinType==1">
          <a-form-item label="走访企业" :label-col="{span:6}" name="companyName"
                       :rules="[{ required: true, message: '请选择走访企业!' }]">
            <a-auto-complete
              v-model:value="dataModel.companyName"
              :options="companyList"
              @search="selectCompanyList"
              @change="companyChange"
              :field-names="{
                            value:'companyName',
                          }"
            >
              <template #option="item">
                <span v-html="formatStr1(item.companyName,false)"></span>
              </template>
            </a-auto-complete>
          </a-form-item>
        </a-col>

        <a-col :span="8" v-if="dataModel.signinType==2">
          <a-form-item label="走访人员" :label-col="{span:6}" name="jobUserName"
                       :rules="[{ required: true, message: '请选择走访人员!' }]">
            <a-auto-complete
              v-model:value="dataModel.jobUserName"
              :options="jobUserList"
              @search="selectJobUserList"
              @change="jobUserChange"
              :field-names="{
                            value:'name',
                          }"
            >
              <template #option="item">
                <span v-html="formatStr2(item.name,false)"></span>
              </template>
            </a-auto-complete>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="24">
        <a-divider orientation="left">走访内容</a-divider>
          <a-col :span="24">
              <a-textarea :auto-size="{ minRows: 4, maxRows: 10 }"  v-model:value="dataModel.content"  placeholder="走访内容" :rows="4"/>
          </a-col>
        <a-col :span="8">

        </a-col>
      </a-row>

      <a-form-item class="buttom-btns">
        <a-button @click="onClose">取消</a-button>
        <a-button type="primary" html-type="submit">提交</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script lang="ts">
import {defineComponent, reactive, ref, toRefs} from 'vue';
import type {SelectProps} from 'ant-design-vue';
import {useTabsViewStore} from '@/store/modules/tabsView';
import BUploadFile from '@/components/file/uploadFile.vue';
import {get} from "@/api/common";
import {getSysDictionaryList} from '@/api/system/dictionary';
import {getDataById,save} from '@/api/jobUserManager/signinMgt';
import {getSiteByID, getSiteList} from "@/api/baseSettings/siteInfo";
import SelectLabel from "@/views/baseSettings/label/selectLabel.vue";
import {getAddressLonLat} from "@/utils/position";
import {getList} from "@/api/companyService/company";
import {getJobUserDataList} from "@/api/jobUserManager/jobuser";

interface FormState {
  dataModel: any;
}

export default defineComponent(
  {
    components: {BUploadFile,SelectLabel},
    setup() {
      const refSelectModel = ref();
      const formState = reactive<FormState>({dataModel: {}});
      const formTableState = reactive({loading: false});
      const siteList = ref<any>([]);
      const regionList = ref<SelectProps['options']>();
      const signinTypeList = ref<SelectProps['options']>();
      const companyList = ref<Array<any>>([]);
      const jobUserList = ref<Array<any>>([]);
      const selectCompanyList = (companyName: string) => {
        if (companyName) {
          getList({
            pageIndex: 1,
            pageSize: 30,
            companyName,
          }).then((result: any) => {
            companyList.value = result.list;
            setCompanyId(companyName);
          })
        }
      }
      const selectJobUserList = (jobUserName: string) => {
        if (jobUserName) {
          getJobUserDataList({
            pageIndex: 1,
            pageSize: 30,
            jobUserName,
          }).then(data => {
            jobUserList.value = data.list;
            setJobUserId(jobUserName);
            console.log("jobUserList",jobUserList.value);
          })
        }
      }
      const formatStr1 = (str: any, isPostName) => {
        if (!str) {
          return "";
        }
        if (isPostName) {
          return str.replace(formState.dataModel.professionName, '<span style="color: coral">' + formState.dataModel.professionName + '</span>');
        }
        return str.replace(formState.dataModel.companyName, '<span style="color: coral">' + formState.dataModel.companyName + '</span>');
      }
      const formatStr2 = (str: any,isProfessionName:boolean) => {
        if (!str) {
          return "";
        }
        if(!isProfessionName){
          return str.replace(formState.dataModel.jobUserName, '<span style="color: coral">' + formState.dataModel.jobUserName + '</span>');
        }
        return str.replace(formState.dataModel.professionName, '<span style="color: coral">' + formState.dataModel.professionName + '</span>');
      }
      function companyChange(value: any) {
        formState.dataModel.companyName = value;
        setCompanyId(value);
      }
      function jobUserChange(value: any) {
        formState.dataModel.name = value;
        setJobUserId(value);
      }
      function setCompanyId(value: any) {
        const company = companyList.value.find(x => x.companyName === value);
        if (company) {
          formState.dataModel.companyID = company.companyID;
        } else {
          formState.dataModel.companyID = null;
        }
      }
      function setJobUserId(value:any){
        const curJobUser = jobUserList.value.find(x => x.name === value);
        if (curJobUser) {
          formState.dataModel.jobUserID = curJobUser.jobUserID;
        } else {
          formState.dataModel.jobUserID = null;
        }
      }
      const educationData = ref([]);
      const tabsViewStore = useTabsViewStore();

      const getSigninTypeList = () => {
        getSysDictionaryList('SigninType').then((data) => {
          signinTypeList.value = data;
        });
      };

      const getAllSites = () => {
        getSiteList({pageIndex:1,pageSize:9999}).then((result :any) => {
          siteList.value = result.list;
        })
      }

      get('system/area/getCityList', {}).then(data => {
        regionList.value = data;
      });


      const onClose = (reload: any) => {
        tabsViewStore.closeCurrentTabByPath('/jobusermgr/signinMgt/edit');
        tabsViewStore.openTab('/jobusermgr/signinMgt/index', {reload: reload});
      };

      const onFinish = () => {
        console.log("sfs",formState.dataModel);
        save(formState.dataModel).then((result) => {
          if (result) {
            onClose(1)
          }
        },() => {
        });
      }


      const loadData = (id: any) => {
        getAllSites();
        getSigninTypeList();
        getDataById(id).then(data => {
          formState.dataModel = data;
          console.log("sfs",formState.dataModel);
        });
      };



      // 所属驿站变更关联区县
      const siteChange = async function () {
        const curSiteData: any = await getSiteByID(formState.dataModel.siteID);
        formState.dataModel.regionCode = curSiteData.regionCode;
      }

      // 根据地址获取经纬度
      function addressChange() {
        if (formState.dataModel.address) {
          getAddressLonLat(formState.dataModel.address).then((result: any) => {
            if (result.lon && result.lat) {
              formState.dataModel.longitude = result.lon;
              formState.dataModel.latitude = result.lat;
            }
          });
        }
      }

      return {
        ...toRefs(formState),
        loadData,
        onClose,
        onFinish,
        siteChange,
        refSelectModel,
        siteList,
        regionList,
        companyList,
        jobUserList,
        formState,
        educationData,
        formTableState,
        signinTypeList,
        formatStr1,
        formatStr2,
        getSigninTypeList,
        selectCompanyList,
        selectJobUserList,
        companyChange,
        jobUserChange,
        addressChange,

      }
    },
    created() {
      const id = history.state.params?.id;
      this.loadData(id);
    }
  })
</script>