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

<template>
  <div>
    <div
      class="dialog-h-content scroll-h"
      :class="{ 'visiual-form': source === 'visiual' }"
    >
      <el-form
        ref="ref_gxxq_form"
        :inline="true"
        :model="formData"
        :rules="dataRule"
        class="div_form"
      >
        <!-- 需求类别 -->
        <el-form-item
          label="需求类别"
          style="display: block"
          label-width="150px"
          prop="commonServiceTypeId"
        >
          <input
            type="text"
            v-model="formData.commonServiceTypeName"
            v-show="false"
          />
          <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.commonServiceTypeId"
            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="title"
          label-width="150px"
          :class="{ 'form-item': source === 'visiual' }"
          style="display: block"
        >
          <el-input
            class="item_width_1"
            placeholder="请输入服务事项"
            v-model="formData.title"
          >
          </el-input>
        </el-form-item>

        <el-form-item
          label="详细说明"
          prop="content"
          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.content"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="查找享受服务人员"
          prop="resiSearchTagId"
          :class="{ 'form-item': source === 'visiual' }"
          label-width="150px"
          style="display: block"
        >
          <template v-if="formData.resiSearchTagName">
            <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="指派服务" label-width="150px">
          <el-switch
            v-model="formData.assignFlag"
            @change="handelDisabledRules"
          >
          </el-switch>
        </el-form-item>

        <el-form-item
          label="服务方"
          label-width="150px"
          style="display: block"
          v-show="formData.assignFlag"
        >
          <!-- 表单验证是有的但是没有红色*先手写加上吧 -->
          <!-- <el-form-label class="form_label_box">
            <span class="verifyRed">服务方 : </span>
        </el-form-label> -->
          <el-select
            v-model="formData.assignInfo.serverOrgType"
            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.assignInfo.serverOrgId"
            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
          label="自动通知服务方"
          label-width="150px"
          style="display: block"
          v-show="formData.assignFlag"
        >
          <el-checkbox-group v-model="formData.assignInfo.noticeApproches">
            <el-checkbox label="1">短信通知</el-checkbox>
            <el-checkbox label="2">微信公众号消息通知</el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item
          label="服务范围"
          label-width="150px"
          prop="serviceScopeList"
          style="display: block"
          v-show="formData.assignFlag"
        >
          <!-- <el-form-label class="form_label_box">
            <span class="verifyRed">服务范围 :</span>
          </el-form-label> -->
          <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"
          prop="serviceTimeStart"
          v-show="formData.assignFlag"
        >
          <!-- :picker-options="startPickerOptions" -->
          <el-date-picker
            v-model="formData.assignInfo.serviceTimeStart"
            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>
          <!-- :picker-options="endPickerOptions" -->
          <span class="u-data-tag">至</span>
          <el-date-picker
            v-model="formData.assignInfo.serviceTimeEnd"
            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>
    </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";

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
        commonServiceTypeId: "", // 公共服务（政策级别）二级分类id
        assignFlag: false,
        resiSearchTagId: "", //查找享受服务人员
        resiSearchTagName: "", //享受服务人员名称
        title: "", //服务名称
        assignInfo: {
          noticeApproches: [],
          serviceScopeList: [], //
          serviceTimeStart: "", //服务起始时间yyyy-MM-dd
          serviceTimeEnd: "", //服务截止时间yyyy-MM-dd
          serverOrgType: "", //服务组织类型 社区自组织：community_org， 志愿者：ic_user_volunteer， 联建单位：party_unit
          serverOrgId: "", //服务组织Id
        },
        content: "", //
      },
      dataRule: {
        commonServiceTypeId: [
          { required: true, message: "政策类型不能为空", trigger: "change" },
        ],
        title: [
          { required: true, message: "服务名称不能为空", trigger: "change" },
        ],

        // serviceTimeStart: [
        //   { required: true, message: "服务时间不能为空", trigger: "change" },
        // ],
        // serviceScopeList : [
        // { required: true, message: "服务范围不能为空", trigger: "change" },
        // ],
      },

      //   endPickerOptions: {
      //     disabledDate: endDisabledDate,
      //   },
      //   startPickerOptions: {
      //     disabledDate: startDisabledDate,
      //   },

      serviceOptions: [],
      serviceOptiondList: [],
      policyList: [],

      fileList: [],
      uploadUlr: window.SITE_CONFIG["apiURL"] + "/oss/file/uploadvariedfile",
      ruleList: [],

      showLabelForm: false,
    };
  },

  computed: {},

  watch: {
    "formData.serviceTimeEnd": function (val) {
      if (val && val != "") {
        let arrayTemp = val.split(" ");
        this.formData.serviceTimeEnd = arrayTemp[0] + " 23:59:59";
      }
    },
  },

  components: { personList, labelForm },

  async mounted() {
    this.startLoading();
    // 都已经重置了，还放在prop里干嘛，我不理解
    // this.getCategrayList();
    this.getDictOptions();
    this.getPolicyList();

    if (this.formType === "add") {
      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,this.dataRule.serviceTimeStart,this.dataRule.serviceScopeList;
      //   } else {
      //     var serviceOrgId = [
      //     { required: true, message: "服务组织不能为空", trigger: "change" },
      //     ];
      //     var serviceTimeStart = [
      //     { required: true, message: "服务时间不能为空", trigger: "change" },
      //     ];
      //     var serviceScopeList = [
      //     { required: true, message: "服务范围不能为空", trigger: "change" },
      //     ];
      //     this.dataRule.serviceOrgId = serviceOrgId;
      //     this.dataRule.serviceTimeStart = serviceTimeStart;
      //     this.dataRule.serviceScopeList = serviceScopeList;
      //   }
      if (v) {
        this.addRules();
      } else {
        this.romoveRules();
      }
      console.log(this.dataRule);
    },
    addRules() {
      const newRules = [
        { required: true, trigger: "change", message: "服务组织不能为空" },
      ];
      // 给rules对象添加规则
      let arr = [
        { required: true, trigger: "change", message: "服务组织不能为空" },
      ];
      this.dataRule = { ...this.dataRule, serviceOrgId: newRules };
    },
    romoveRules() {
      this.$refs.ref_gxxq_form.clearValidate(["serviceOrgId"]);
      this.rules = { ...this.rules, serviceOrgId: [] };
    },
    // 服务类型下拉框选中事件
    handleChangeServiceTypeLevel1() {
      this.formData.commonServiceTypeId = "";
      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.commonServiceTypeId);
      if (this.formData.assignInfo.serviceOrgType) {
        this.getServiceuserList(this.formData.assignInfo.serviceOrgType);
      } else {
        return;
      }
    },
    handleClickLabel() {
      this.showLabelForm = true;
      this.$nextTick(() => {
        this.$refs["ref_label_form"].initForm("info");
      });
    },
    addFormOk(val) {
      this.showLabelForm = false;
      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.assignInfo.serviceOrgType = serviceOrgType;
          await this.getServiceuserList(serviceOrgType, "add_demand");
        }
        if (serviceOrgId) {
          this.formData.assignInfo.serviceOrgId = serviceOrgId;
        }
        if (scopeIdArray) {
          this.scopeIdArray = scopeIdArray;
          await nextTick();
          this.handleChangeScope();
        }
      }
    },

    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 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.commonServiceTypeId == "") {
        this.$message.error("请先选择需求类别!");
        return;
      }
      const url = "/actual/base/serviceitem/listServerOrg";
      let params = {
        serviceTypeId: this.formData.commonServiceTypeId,
        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.assignInfo.serviceScopeList = [];
      let selArray = this.$refs["myCascader"].getCheckedNodes();
      console.log("handleChangeScope", selArray);
      selArray.forEach((element) => {
        let obj = {
          objectType:
            element.data.objectType === "grid"
              ? "grid"
              : element.data.objectType === "neighborhood"
              ? "neighborhood"
              : "agency",
          objectId: element.data.objectId,
          objectName: element.data.objectName,
        };
        this.formData.assignInfo.serviceScopeList.push(obj);
      });
    },

    async handleComfirm() {
      if (this.formType === "add") {
        this.handleAdd();
      } else if (this.formType === "feedback") {
      }
    },

    async handleAdd() {
      this.btnDisable = true;
      setTimeout(() => {
        this.btnDisable = false;
      }, 10000);
      this.$refs["ref_gxxq_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() {
      if (this.formData.assignFlag) {
        this.formData.assignFlag = 1;
      } else {
        this.formData.assignFlag = 0;
      }
      const url = "/governance/commonDemand/save";
      // const url = 'http://yapi.elinkservice.cn/mock/245/governance/icServiceProject/service/initiate'
      let params = {
        title: this.formData.title,
        content: this.formData.content,
        commonServiceTypeId: this.formData.commonServiceTypeId,
        resiSearchTagId: this.formData.resiSearchTagId,
        assignFlag: this.formData.assignFlag,
        assignInfo: this.formData.assignInfo,
      };
      console.log(params);
      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
        commonServiceTypeId: "", // 公共服务（政策级别）二级分类id
        serviceScopeList: [], //
        serviceTimeStart: "", //服务起始时间yyyy-MM-dd
        serviceTimeEnd: "", //服务截止时间yyyy-MM-dd
        content: "", //
      };
    },
    // 开启加载动画
    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;
  }
}
.verifyRed::before {
  content: "*";
  color: #f56c6c;
  margin-right: 4px;
}
.form_label_box {
  width: 150px;
  display: inline-block;
  text-align: right;
  padding-right: 12px;
}
</style>