zhbsq-vue-web/src/views/JOINTCONFERENCE/add.vue

<template>
  <div class="cmain">
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="会议标题" prop="conferenceTitle">
        <el-input
          v-model="form.conferenceTitle"
          placeholder="请输入会议标题"
        ></el-input>
      </el-form-item>

      <el-form-item label="会议内容" prop="conferenceContent">
        <el-input
          type="textarea"
          rows="4"
          placeholder="请输入会议会议内容"
          v-model="form.conferenceContent"
        ></el-input>
      </el-form-item>

      <el-form-item label="协作单位" prop="dept">
        <!-- <el-select
          v-model="deptId"
          multiple
          placeholder="请选择协作单位"
          @change="selectChange"
          style="width: 100%"
        >
          <el-option
            v-for="item in deptList"
            :key="item.deptId"
            :label="item.deptName"
            :value="item.deptId"
          >
          </el-option>
        </el-select> -->
        <el-cascader
          clearable
          v-model="seleValue"
          :options="deptListSele"
          :props="propOpt"
          @change="handleChange"
        >
        </el-cascader>
      </el-form-item>
      <el-form-item label="状态">
        <template>
          <el-radio v-model="radio" label="1">完结</el-radio>
          <el-radio v-model="radio" label="2">长期</el-radio>
          <el-radio v-model="radio" label="3">限期</el-radio>

        </template>
      </el-form-item>
      <el-form-item label="限期日期">
        <el-date-picker v-model="date" type="date" value-format="yyyy-MM-dd" placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
    </el-form>
    <div class="mfooter">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="$layer.close(layerid)">取 消</el-button>
    </div>
  </div>
</template>

<script>
import { getDept } from "@/api/portal/CONFERENCEREPLY/CONFERENCEREPLY.js";
import { listDept } from "@/api/system/dept";

import {
  addJOINTCONFERENCE,
  updateJOINTCONFERENCE,
  getJOINTCONFERENCE,
} from "@/api/portal/JOINTCONFERENCE/JOINTCONFERENCE";
export default {
  props: {
    param: {
      type: Object,
      default: () => {
        return {};
      },
    },
    layerid: {
      type: String,
    },
  },
  data() {
    var checkDeptId = (rule, value, callback) => {
      if (this.seleValue.length == 0) {
        return callback(new Error("协作单位不能为空"));
      } else {
        callback();
      }
    };
    return {
      // 状态选择
      radio:null,
      // 限期日期
      date:null,

      propOpt: {
        value: "value",
        label: "label",
        children: "children",
        multiple: true,
        checkStrictly: true,
        emitPath: false,
      },

      deptId: [],
      deptList: [],
      form: {},
      rules: {
        conferenceTitle: [
          { required: true, message: "会议标题不能为空", trigger: "blur" },
        ],
        conferenceContent: [
          { required: true, message: "会议内容不能为空", trigger: "blur" },
        ],
        dept: [{ validator: checkDeptId, trigger: "blur" }],
      },

      deptListSele: [],
      seleValue: [],
    };
  },
  created() {
    if (this.param.id) {
      getJOINTCONFERENCE(this.param.id).then((response) => {
        this.form = response.data;
        this.seleValue = this.form.deptIds;
        let arr = eval("(" + this.form.deptIds + ")");
        this.seleValue = arr;
        this.deptId = JSON.parse(this.form.deptIds);
      });
    }

    listDept(this.queryParams).then((response) => {
      this.deptListSele = this.handleTrees(response.data, "deptId");
      this.deptListSele.forEach((item, index) => {
        if (item.children) {
          item.children.forEach((it, i) => {
            it.children = null;
          });
        }
      });
    });

    getDept(2).then((res) => {
      this.deptList = res.data;
    });
  },
  mounted() {},

  methods: {
    handleTrees(data, id, parentId, children) {
      let config = {
        id: id || "id",
        parentId: parentId || "parentId",
        childrenList: children || "children",
      };

      var childrenListMap = {};
      var nodeIds = {};
      var tree = [];

      for (let d of data) {
        let parentId = d[config.parentId];
        if (childrenListMap[parentId] == null) {
          childrenListMap[parentId] = [];
        }
        nodeIds[d[config.id]] = d;
        d.label = d.deptName;
        d.value = d.deptId;
        childrenListMap[parentId].push(d);
      }

      for (let d of data) {
        let parentId = d[config.parentId];
        if (nodeIds[parentId] == null) {
          tree.push(d);
        }
      }

      for (let t of tree) {
        adaptToChildrenList(t);
      }

      function adaptToChildrenList(o) {
        if (childrenListMap[o[config.id]] !== null) {
          o[config.childrenList] = childrenListMap[o[config.id]];
        }
        if (o[config.childrenList]) {
          for (let c of o[config.childrenList]) {
            adaptToChildrenList(c);
          }
        }
      }
      return tree;
    },
    selectChange(val) {
      // console.log(val);
    },
    handleChange(val) {
      console.log(val);
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            this.form.cooperativeUnitId = this.seleValue;
            this.form.deptNum = this.form.cooperativeUnitId.length;
            updateJOINTCONFERENCE(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.$layer.close(this.layerid);
              this.$parent.getList();
            });
          } else {
            // this.form.deptName = [];
            // for (const index in this.form.deptId) {
            //   for (const i in this.deptList) {
            //     if (this.form.deptId[index] == this.deptList[i].deptId) {
            //       console.log(
            //         this.form.deptId[index],
            //         this.deptList[i].deptName
            //       );
            //       this.form.deptName[index] = this.deptList[i].deptName;
            //     }
            //   }
            // }
            //俊豪像甲方一样，老是让我改传参
            //↑好家伙你还改错了，是seleValue不是deptId
            this.form.cooperativeUnitId = this.seleValue;
            this.form.deptNum = this.form.cooperativeUnitId.length;
            addJOINTCONFERENCE(this.form).then((response) => {
              this.$modal.msgSuccess("发布成功");
              this.$layer.close(this.layerid);
              this.$parent.getList();
            });
          }
        }
      });
    },
  },
};
</script>

<style></style>