EmploymentSite/vue/src/views/taskAndLog/dowork/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="siteUserID" :label-col="{span:7}" :rules="[{ required: true, message: '请选择站点人员!' }]">
            <label v-if="opCategory==3">{{dataModel.userName}}</label>
            <a-select ref="select" v-model:value="dataModel.siteUserID" :options="siteUserList"
                      :field-names="{ label: 'text', value: 'value' }" :allow-clear="true" > </a-select>
<!--            <a-input v-model:value="dataModel.userName" placeholder=""/>-->
          </a-form-item>
        </a-col>
        <a-col :span="8">
            <a-form-item label="日志类型" name="doTypeID" :label-col="{span:8}" :rules="[{ required: true, message: '请选择日志类型!' }]">
            <label v-if="opCategory==3">{{dataModel.logTypeName }}</label>
              <a-select ref="select" v-model:value="dataModel.doTypeID" :options="logTypeList"
                        :field-names="{ label: 'name', value: 'value' }" :allow-clear="false" > </a-select>
<!--            <a-input v-model:value="dataModel.logTypeName" placeholder=""/>-->
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="完成时间" name="workTime" :label-col="{span:7}" :rules="[{ required: true, message: '请选择完成时间!' }]">
            <label v-if="opCategory==3">{{dataModel.workTime}}</label>
            <a-date-picker  v-model:value="dataModel.workTime" picker="date" value-format="YYYY-MM-DD" />
          </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:8}" :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-col>
      </a-row>
      <a-row>
        <a-textarea :auto-size="{ minRows: 4, maxRows: 10 }"  v-model:value="dataModel.workContent"  :disabled="opCategory==3"
                    placeholder="完成情况" style="text-align: center;" />
      </a-row>
      <a-divider orientation="left">其他</a-divider>
      <b-upload-file :fileRefId="dataModel.doWorkID" :readonly="false" :multiple="true"
                     :setFileList="setFileList" :accept="'.pdf,.png,.jpg'" :disabled="opCategory==3"></b-upload-file>

    </a-form>
  </a-modal>
</template>
<script lang="ts">
import {defineComponent, reactive, ref, toRefs} from "vue";
import {get, save} from "@/api/taskAndLog/dowork";
import BUploadFile from "@/components/file/uploadFile.vue";
import type {SelectProps} from "ant-design-vue";
import {getSysDictionaryList} from "@/api/system/dictionary";
import {getRegionCodeList, getStreetCodeList} from "@/api/system/area/index";
import {getSiteUserDataList} from "@/api/baseSettings/userInfo";
import {message} from "ant-design-vue";

interface InstitutionModel {
  dataModel: any;
}
export default defineComponent({
  name:'DoWorkEditForm',
  components: {BUploadFile},
  props: {
    loadData: {
      type: Function,
      default: null
    }
  },
  setup(props) {
    const formData = reactive<InstitutionModel>({ dataModel:{}});
    const visible = ref<boolean>(false);
    const isAllowCommit = ref<boolean>(true);
    const confirmLoading = ref<boolean>(false);
    const title = ref();
    const opCategory = ref<any>();
    const formState = reactive({
      total: 0,
      selectedRowKeys: [],
      loading: false
    });
    const regionList = ref<SelectProps['options']>();
    const streetList = ref<SelectProps['options']>();
    const logTypeList = ref<SelectProps["options"]>();
    const siteUserList = ref<SelectProps["options"]>();

    const fileList = ref();
    const setFileList = (files) => {
      fileList.value = files;
    };
    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 getSiteUserList = async function(){
      const siteUserResult :any = await getSiteUserDataList();
      console.log('siteUserResult',siteUserResult);
      siteUserList.value = siteUserResult;
    }
    const getLogTypeList = async function(){
      const logTypeResult :any = await getSysDictionaryList("LogType");
      logTypeList.value = logTypeResult;
    }

    const loadData = (doWorkID: string) => {
      get(doWorkID).then((result: any) => {
        formData.dataModel = result;
        console.log("dataModel",formData.dataModel);
        if (formData.dataModel.regionCode != null){
          getStreetList();
        }
      });
    }

    const show = (id: any,method:string,category:any) => {
      loadData(id);
      title.value ="工作日志管理-"+method;
      opCategory.value = category;
      getRegionList();
      getLogTypeList();
      getSiteUserList();
      visible.value = true;
    };

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

    const handleOk = () => {
      if(formData.dataModel.siteUserID==null||formData.dataModel.doTypeID ==null||formData.dataModel.workTime==null||
        formData.dataModel.regionCode==null||formData.dataModel.streetCode==null||formData.dataModel.workContent==null){
        message.error("请填写完整的工作日志!");
        isAllowCommit.value = false;
      }
      if (isAllowCommit.value){
        save(formData.dataModel).then(result => {
          if (result) {
            visible.value = false;
            props.loadData();
          }
        });
      }
    };

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

    return {
      ...toRefs(formData),
      formState,
      opCategory,
      visible,
      title,
      confirmLoading,
      logTypeList,
      siteUserList,
      regionList,
      streetList,
      isAllowCommit,
      show,
      getRegionList,
      getStreetList,
      setFileList,
      onSelectChange,
      handleOk,
      handleCancel
    };
  },
  created() {
  },
})
</script>