epmet-work-pc-chengyang/src/views/modules/communityService/fuwuzhaoren/addForm.vue

<template>
    <div>
      <div
        class="dialog-h-content scroll-h"
        :class="{ 'visiual-form': source === 'visiual' }"
      >
        <el-form
          v-if="formType === 'add'"
          ref="ref_form"
          :inline="true"
          :model="formData"
          :rules="dataRule"
          class="div_form"
        >
          <!-- 服务类别 -->
          <el-form-item
            label="服务类别"
            style="display: block"
            label-width="150px"
            prop="serviceTypeLevel2Id"
          >
            <el-select
              class="u-item-width-communitycascader"
              v-model="formData.serviceTypeLevel1Id"
              placeholder="请选择"
              clearable
              @change="handleChangeServiceTypeLevel1"
            >
              <el-option
                v-for="item in serviceTypesLevel1"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
            -
            <el-select
              class="u-item-width-communitycascader"
              v-model="formData.serviceTypeLevel2Id"
              placeholder="请选择"
              @change="handleChangeServiceTypeLevel2"
              clearable
            >
              <el-option
                v-for="item in serviceTypesLevel2"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
  
          <el-form-item
            label="服务事项"
            prop="serviceName"
            label-width="150px"
            :class="{ 'form-item': source === 'visiual' }"
            style="display: block"
          >
            <el-input
              class="item_width_1"
              placeholder="请输入服务事项"
              v-model="formData.serviceName"
            >
            </el-input>
          </el-form-item>
  
          <el-form-item
            label="服务内容"
            prop="remark"
            label-width="150px"
            :class="{ 'form-item': source === 'visiual' }"
            style="display: block"
          >
            <el-input
              class="item_width_1"
              type="textarea"
              maxlength="1000"
              show-word-limit
              :rows="3"
              placeholder="请输入备注，不超过1000字"
              v-model="formData.remark"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="查找享受服务人员"
            prop="resiSearchTagId"
            :class="{ 'form-item': source === 'visiual' }"
            label-width="150px"
            style="display: block"
          >
           <input type="text" v-model="formData.resiSearchTagId" v-show="false">
            <template  v-if="formData.resiSearchTagName" style="margin-right:10px;">
              <el-tag   @close="handleCloseTag"  closable  style="margin-right:10px;">
              {{ formData.resiSearchTagName }}
            </el-tag>
            </template>
  
            <el-button type="primary" @click="handleClickLabel" size="mini">
              <span> <i class="el-icon-plus"></i> 按标签查找 </span>
            </el-button>
          </el-form-item>
          <el-form-item
            label="服务方"
            prop="serviceOrgId"
            label-width="150px"
            :class="{ 'form-item': source === 'visiual' }"
            style="display: block"
          >
            <el-select
              v-model="formData.serviceOrgType"
              class="input-width-small"
              placeholder="请选择"
              clearable
              @change="handleServiceChange('add', $event)"
            >
              <el-option
                v-for="item in serviceOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            -
            <el-select
              v-model="formData.serviceOrgId"
              class="input-width-middle"
              filterable
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in serviceOptiondList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
          prop="noticeApproches"
          label="自动通知服务方"
          label-width="150px"
          style="display: block"
        >
          <el-checkbox-group v-model="formData.noticeApproches">
            <el-checkbox label="sms" value="sms">短信通知</el-checkbox>
            <el-checkbox label="wx_official_account" value="wx_official_account">微信公众号消息通知</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
          <el-form-item
            label="服务范围"
            prop="objList"
            label-width="150px"
            :class="{ 'form-item': source === 'visiual' }"
            style="display: block"
          >
            <el-cascader
              class="item_width_1"
              ref="myCascader"
              v-model="scopeIdArray"
              :key="iscascaderShow"
              :options="casOptions"
              :props="optionProps"
              :show-all-levels="false"
              @change="handleChangeScope"
            ></el-cascader>
          </el-form-item>
  
          <el-form-item
            label="服务时间"
            label-width="150px"
            :class="{ 'form-item': source === 'visiual' }"
            prop="serviceTimeStart"
          >
            <el-date-picker
              v-model="formData.serviceTimeStart"
              :picker-options="startPickerOptions"
              class="item_width_2"
              style="width: 220px"
              type="date"
              value-format="yyyy-MM-dd HH:mm:ss"
              value="yyyy-MM-dd"
              placeholder="开始时间"
            >
            </el-date-picker>
            <span class="u-data-tag">至</span>
            <el-date-picker
              v-model="formData.serviceTimeEnd"
              :picker-options="endPickerOptions"
              class="item_width_2 u-data-tag"
              style="width: 220px"
              type="date"
              value-format="yyyy-MM-dd HH:mm:ss"
              value="yyyy-MM-dd"
              placeholder="结束时间"
            >
            </el-date-picker>
          </el-form-item>
  
   
  
          <el-form-item
            label="经办人"
            prop="principalName"
            :class="{ 'form-item': source === 'visiual' }"
            label-width="150px"
            style="display: block"
          >
            <el-input
              class="item_width_1"
              placeholder="请输入联系人姓名"
              v-model="formData.principalName"
            >
            </el-input>
          </el-form-item>
          <el-form-item
            label="联系方式"
            prop="principalContact"
            :class="{ 'form-item': source === 'visiual' }"
            label-width="150px"
            style="display: block"
          >
            <el-input
              class="item_width_1"
              placeholder="请输入联系人电话"
              v-model="formData.principalContact"
            >
            </el-input>
          </el-form-item>
  
  
    
       
  
        </el-form>
  
      </div>
  
      <div class="div_btn">
        <el-button size="small" @click="handleCancle">取 消</el-button>
        <el-button
          size="small"
          type="primary"
          :disabled="btnDisable"
          @click="handleComfirm"
          >确 定</el-button
        >
      </div>
  
   
      <el-dialog
        v-if="showLabelForm"
        :visible.sync="showLabelForm"
        :append-to-body="true"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :title="'标签配置'"
        width="900px"
        top="5vh"
        class="dialog-h"
        @closed="showLabelForm = false"
      >
        <label-form
          ref="ref_label_form"
          :ruleList="ruleList"
          @dialogCancle="addFormCancle"
          @dialogOk="addFormOk"
        >
          <!--    @handleOk="handleOk"
          @handleClose="handleClose" -->
        </label-form>
      </el-dialog>
    </div>
  </template>
  
    <script>
  import { mapGetters } from "vuex";
  import { Loading } from "element-ui"; // 引入Loading服务
  import { requestPost, requestGet } from "@/js/dai/request";
  import personList from "../policy/personList";
  import nextTick from "dai-js/tools/nextTick";
  import labelForm from "../labelConfig/addForm.vue";
  import daiMap from "@/utils/dai-map";
  
  let loading; // 加载动画
  let map;
  
  export default {
    props: {
      defaultData: {
        type: Object,
        default: null,
      },
      serviceRecordId: {
        type: String,
        required: "",
      },
      serviceProjectName: {
        //服务项目名称
        type: String,
        required: false,
        default: "",
      },
      formType: {
        //表单操作类型 add新增，edit编辑，detail详情,feedback反馈
        type: String,
        required: "",
      },
      categrayArray: {
        type: Array,
        default() {
          return [];
        },
      },
      source: {
        //展示来源：manage  管理平台    visiual  可视化平台
        type: String,
        default: "manage",
      },
    },
  
    data() {
      let endDisabledDate = (time) => {
        //这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键
        let nowData = Date.now();
        if (this.formData.serviceTimeStart) {
          let serviceTimeStart = new Date(this.formData.serviceTimeStart);
          return (
            time.getTime() > nowData ||
            time.getTime() < serviceTimeStart ||
            time.getTime() === serviceTimeStart
          );
        } else {
          return time.getTime() > nowData;
        }
      };
  
      let startDisabledDate = (time) => {
        //这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键
        let nowData = Date.now();
        return time.getTime() > nowData;
      };
  
      return {
        // 公共服务分类
        serviceTypesLevel1: [],
        serviceTypesLevel2: [],
  
        btnDisable: false,
        casOptions: [],
        scopeIdArray: [],
        iscascaderShow: 0,
  
        optionProps: {
          multiple: true,
          value: "objectId",
          label: "objectName",
          children: "children",
          checkStrictly: true,
          emitPath: false,
        },
  
        keyWords: "",
        formData: {
          serviceTypeLevel1Id: "", // 公共服务（政策级别）一级分类id
          serviceTypeLevel2Id: "", // 公共服务（政策级别）二级分类id
          resiSearchTagId:"",//查找享受服务人员
          resiSearchTagName:"",//享受服务人员名称
          serviceName: "", //服务名称
          noticeApproches:[],
          serviceOrgType: "", //服务组织类型 社区自组织：community_org， 志愿者：ic_user_volunteer， 联建单位：party_unit
          serviceOrgId: "", //服务组织Id
          objList: [], //
          principalName: "", //经办人(责任人)姓名
          principalContact: "", //经办人联系方式
          serviceTimeStart: "", //服务起始时间yyyy-MM-dd
          serviceTimeEnd: "", //服务截止时间yyyy-MM-dd
          remark: "", //
        },
        dataRule:{
          serviceTypeLevel2Id: [
            { required: true, message: "政策类型不能为空", trigger: "change" },
          ],
          serviceName: [
            { required: true, message: "服务名称不能为空", trigger: "change" },
          ],
          serviceOrgId: [
            { required: true, message: "服务组织不能为空", trigger: "change" },
          ],
  
          serviceTimeStart: [
            { required: true, message: "服务时间不能为空", trigger: "change" },
          ],
          objList: [
            { required: true, message: "服务范围不能为空", trigger: "change" },
          ],
          resiSearchTagId: [
            {required:true,message:"享受服务人员不能为空",trigger:"bulr"}
          ]
       
      },
      
  
        endPickerOptions: {
          // disabledDate: endDisabledDate,
        },
        startPickerOptions: {
          // disabledDate: startDisabledDate,
        },
  
        serviceOptions: [],
        serviceOptiondList: [],
        policyList: [],
  
        fileList: [],
        uploadUlr: window.SITE_CONFIG["apiURL"] + "/oss/file/uploadvariedfile",
  
        showPersonList: false,
        ruleList: [],
        firstInitMap: true,
  
        categrayOptions: [],
        statusArray: [
          {
            value: "in_service",
            label: "进行中",
          },
          {
            value: "completed",
            label: "已完成",
          },
        ],
        satisfyArray: [
          {
            value: "bad",
            label: "不满意",
          },
          {
            value: "good",
            label: "基本满意",
          },
          {
            value: "perfect",
            label: "非常满意",
          },
        ],
        showLabelForm: false,
      };
    },
  
    computed: {
  
    },
  
    watch: {
      "formData.serviceTimeEnd": function (val) {
        if (val && val != "") {
          let arrayTemp = val.split(" ");
          this.formData.serviceTimeEnd = arrayTemp[0] + " 23:59:59";
        }
      },
    },
  
    components: {  labelForm },
  
    async mounted() {
      this.startLoading();
      // 都已经重置了，还放在prop里干嘛，我不理解
      this.categrayOptions = this.categrayArray;
  
      // this.getCategrayList();
      this.getDictOptions();
      this.getPolicyList();
      if (this.formType === "add") {
        this.$refs.ref_form.resetFields();
        await this.loadScopeTree();
      } else {
      }
  
      await this.iniDefaultData();
  
      this.endLoading();
      // 服务分类下拉（其实是获取的共性服务分类）
      this.$http
        .get("/governance/commonServiceType/selectList/0")
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.serviceTypesLevel1 = res.data;
            console.log(res.data);
          }
        })
        .catch(() => {
          return this.$message.error("网络错误");
        });
    },
  
    methods: {
      handelDisabledRules(v){
        if(!v){
          delete this.dataRule.resiSearchTagId
        }else{
          var arr = [{ required: true, message: "享受服务人员不能为空", trigger: "change" }]
          this.dataRule.resiSearchTagId = arr
        }
        console.log(this.dataRule);
      },
  
      // 服务类型下拉框选中事件
      handleChangeServiceTypeLevel1() {
        this.formData.serviceTypeLevel2Id = "";
        this.$http
          .get(
            "/governance/commonServiceType/selectList/" +
              this.formData.serviceTypeLevel1Id
          )
          .then(({ data: res }) => {
            if (res.code !== 0) {
              return this.$message.error(res.msg);
            } else {
              this.serviceTypesLevel2 = res.data;
            }
          })
          .catch(() => {
            return this.$message.error("网络错误");
          });
      },
      // 如果服务方有选择第一个的话让它更新一下
      handleChangeServiceTypeLevel2() {
        console.log(this.formData.serviceTypeLevel1Id);
        console.log(this.formData.serviceTypeLevel2Id);
        if (this.formData.serviceOrgType) {
          this.getServiceuserList(this.formData.serviceOrgType);
        } else {
          return;
        }
      },
      handleClickLabel() {
        this.showLabelForm = true;
        this.$nextTick(() => {
          this.$refs["ref_label_form"].initForm("info");
        });
      },
      addFormOk(val) {
        this.showLabelForm = false;
        console.log(val.tagId);
        this.formData.resiSearchTagId = val.tagId;
        this.formData.resiSearchTagName = val.tagName;
      },
      addFormCancle() {
        this.showLabelForm = false;
      },
      handleCloseTag(){
        this.formData.resiSearchTagId ='';
        this.formData.resiSearchTagName = '';
      },
      async iniDefaultData() {
        const { defaultData } = this;
        console.log("iniDefaultData3", defaultData);
        if (defaultData) {
          const { serviceOrgType, serviceOrgId, scopeIdArray } = defaultData;
          if (serviceOrgType) {
            this.formData.serviceOrgType = serviceOrgType;
            await this.getServiceuserList(serviceOrgType, "add_demand");
          }
          if (serviceOrgId) {
            this.formData.serviceOrgId = serviceOrgId;
          }
          if (scopeIdArray) {
            this.scopeIdArray = scopeIdArray;
            await nextTick();
            this.handleChangeScope();
          }
        }
      },
  
      handleClose() {
        this.showPersonList = false;
      },
      handleOk() {
        this.showPersonList = false;
      },
  
      async getPolicyList() {
        const url = "/governance/policy/policyListSelect";
  
        let params = {};
  
        const { data, code, msg } = await requestPost(url, params);
  
        if (code === 0) {
          this.policyList = data;
        } else {
          this.$message.error(msg);
        }
      },
      async getDictOptions() {
        this.$http
          .post("/sys/dict/data/dictlist", {
            dictType: "user_demand_service_type",
          })
          .then(({ data: res }) => {
            if (res.code !== 0) {
              return this.$message.error(res.msg);
            } else {
              this.serviceOptions = res.data;
            }
          })
          .catch(() => {
            return this.$message.error("网络错误");
          });
      },
  
      // 字典
      // async getCategrayList() {
      //   const url = "/sys/dict/data/dictlist";
  
      //   let params = {
      //     dictType: "ic_service_type",
      //   };
  
      //   const { data, code, msg } = await requestPost(url, params);
  
      //   if (code === 0) {
      //     this.categrayOptions = data;
      //   } else {
      //     this.$message.error(msg);
      //   }
      // },
      async handleServiceChange(type, val) {
        console.log(val);
        if (val === "social_org") {
          if (type === "add") await this.getServiceuserList(val);
          else this.getServiceuserList(val);
        } else this.getServiceuserList(val);
      },
  
      async getServiceuserList(serverOrgType) {
        if (!serverOrgType) return false;
        if (this.formData.serviceTypeLevel2Id == "") {
          this.$message.error("请先选择服务类别!");
          return;
        }
        const url = "/actual/base/serviceitem/listServerOrg";
        let params = {
          serviceTypeId: this.formData.serviceTypeLevel2Id,
          serverOrgType: serverOrgType,
          businessType: "common_service",
        };
        let { data, code, msg } = await requestPost(url, params);
        if (code == 0) {
          this.serviceOptiondList = data;
        } else if (code >= 8000) {
          this.$message.error(msg);
        }
      },
  
      // 获取服务范围树
      async loadScopeTree() {
        const url = "/gov/org/icServiceProject/service/serviceScopeTree";
        // const url = 'http://yapi.elinkservice.cn/mock/245/gov/org/isServiceProject/service/serviceScopeTree'
        let params = {};
  
        const { data, code, msg } = await requestPost(url, params);
  
        if (code === 0) {
          ++this.iscascaderShow;
          this.casOptions = [];
          this.scopeIdArray = [];
          this.casOptions.push(data);
        } else {
          this.$message.error(rspMsg);
        }
      },
  
      handleChangeScope(value) {
        this.formData.objList = [];
        let selArray = this.$refs["myCascader"].getCheckedNodes();
        console.log("handleChangeScope", selArray);
        selArray.forEach((element) => {
          let obj = {
            objectType: element.data.objectType,
            objectId: element.data.objectId,
            objectName: element.data.objectName,
          };
          this.formData.objList.push(obj);
        });
      },
  
      async handleComfirm() {
          this.handleAdd();
      },
  
      async handleAdd() {
        this.btnDisable = true;
        setTimeout(() => {
          this.btnDisable = false;
        }, 10000);
        this.$refs["ref_form"].validate((valid, messageObj) => {
          if (!valid) {
            app.util.validateRule(messageObj);
            this.btnDisable = false;
          } else {
            var oDate1 = new Date(this.formData.serviceTimeStart);
            var oDate2 = new Date(this.formData.serviceTimeEnd);
            if (oDate1.getTime() > oDate2.getTime()) {
              this.$message.error("服务截止时间必须大于服务开始时间");
              return false;
            }
              this.addFuwu();
          }
        });
      },
  
      async addFuwu() {
     
  
        console.log(this.formData);
        // return false
        // const regPhone = /^1(3|4|5|6|7|8|9)\d{9}$/; //联系电话
  
        // if (
        //   this.formData.principalContact &&
        //   regPhone.test(this.formData.principalContact) === false
        // ) {
        //   this.btnDisable = false;
        //   this.$message({
        //     type: "warning",
        //     message: "请输入正确的联系电话",
        //   });
        //   return false;
        // }
  
      
        const url = "/governance/icServiceRecordV2/searchAdd";
        // const url = 'http://yapi.elinkservice.cn/mock/245/governance/icServiceProject/service/initiate'
        let params = {
          ...this.formData,
        };
        delete params.serviceTypeLevel1Id
        const { data, code, msg } = await requestPost(url, params);
  
        if (code === 0) {
          this.$message.success("发起成功");
          this.resetData();
          this.$emit("handleOk");
        } else {
          this.$message.error(msg);
        }
      },
  
      
     
      handleCancle() {
        this.resetData();
        this.$emit("handleClose");
      },
  
     
      resetData() {
        this.formData = {
          serviceTypeLevel1Id: "", // 公共服务（政策级别）一级分类id
          serviceTypeLevel2Id: "", // 公共服务（政策级别）二级分类id
          objList: [], //
          principalName: "", //经办人(责任人)姓名
          principalContact: "", //经办人联系方式
          serviceTimeStart: "", //服务起始时间yyyy-MM-dd
          serviceTimeEnd: "", //服务截止时间yyyy-MM-dd
          remark: "", //
        };
      },
      // 开启加载动画
      startLoading() {
        loading = Loading.service({
          lock: true, // 是否锁定
          text: "正在加载……", // 加载中需要显示的文字
          background: "rgba(0,0,0,.7)", // 背景颜色
        });
      },
      // 结束加载动画
      endLoading() {
        // clearTimeout(timer);
        if (loading) {
          loading.close();
        }
      },
    },
  };
  </script>
  
    <style lang="scss" scoped>
  @import "@/assets/scss/modules/management/form-main.scss";
  @import "@/assets/scss/modules/visual/a_customize.scss";
  
  .form-item::v-deep .el-form-item__label {
    color: #fff;
  }
  .form-item {
    .el-radio {
      color: #fff;
    }
  
    .el-checkbox {
      color: #fff;
    }
  }
  </style>