tenant-Platform/src/views/contentManagement/modules/addMessage.vue

<template>
  <div class="message-main">
    <h4>基本信息</h4>
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
      :size="formSize"
      :inline="true"
      status-icon
    >
      <el-row :gutter="24">
        <el-col :span="9">
          <el-form-item label="标题" prop="title">
            <el-input v-model="ruleForm.title" clearable style="width: 400px" />
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="发布机构" prop="sendDeptId">
            <el-cascader
              filterable
              clearable
              style="width: 400px"
              v-model="ruleForm.sendDeptId"
              :options="institutionList"
              :props="tableProps"
              @change="deptChange"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="9">
          <el-form-item label="子机构是否发布" prop="isChildren">
            <el-radio-group v-model="ruleForm.isChildren">
              <el-radio :value="1">是</el-radio>
              <el-radio :value="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="是否强制查看" prop="isForce">
            <el-radio-group v-model="ruleForm.isForce">
              <el-radio :value="1">是</el-radio>
              <el-radio :value="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="消息内容" prop="content">
        <el-input
          style="width: 400px"
          v-model="ruleForm.content"
          type="textarea"
          clearable
        />
      </el-form-item>
      <el-row style="justify-content: center">
        <el-form-item>
          <el-button @click="resetForm(ruleFormRef)">取消</el-button>

          <el-button type="primary" @click="submitForm(ruleFormRef)">
            保存
          </el-button>
        </el-form-item>
      </el-row>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import {ElMessage} from "element-plus"
import type { ComponentSize, FormInstance, FormRules, } from "element-plus";
import api from "@/api";
import router from "@/router";
import { useRoute, useRouter } from "vue-router";
import useUserStore from "@/store/modules/user.ts";

interface RuleForm {
  title: string;
  sendDeptId: string;
  sendDeptName: string;
  content: string;
  isChildren: string | number;
  isForce: string | number;
}
const tableProps = ref({
  value: "id",
  label: "name",
  children: "children",
  checkStrictly: true,
});
const route=useRoute()
const myRouter = useRouter()
onMounted(() => {
  getInstitutionList(); //机构列表
  // const userInfo = useUserStore()
  if(route.query?.id){
    api.contentApi.noticeGet({id:route.query?.id}).then(res=>{

      if(res.code===200){
        ruleForm.title=res.data.title
        ruleForm.sendDeptId=res.data.sendDeptId
        sendDeptId.value=res.data.sendDeptId
        ruleForm.isChildren=res.data.isChildren
        ruleForm.sendDeptName=res.data.sendDeptName
        ruleForm.isForce=res.data.isForce
        ruleForm.content=res.data.content

      }
    })
  } else {
    ruleForm.sendDeptId = localStorage.getItem('userDeptId')
    sendDeptId.value = localStorage.getItem('userDeptId')
  }
});

const formSize = ref<ComponentSize>("default");
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<RuleForm>({
  title: "",
  sendDeptId: "",
  sendDeptName: "",
  isChildren: 0,
  isForce: 0,
  content: "",
});

const rules = reactive<FormRules<RuleForm>>({
  title: [
    { required: true, message: "请输入标题", trigger: "blur" },
    { max: 50, message: "最大长度不可以超过50个字符", trigger: "blur" },
  ],
  sendDeptId: [
    {
      required: true,
      message: "请选择发布机构",
      trigger: "change",
    },
  ],
  content: [
    {
      required: true,
      message: "请输入消息内容",
      trigger: "blur",
    },
  ],
});

const sendDeptId=ref('')
//机构选择
function deptChange(e:any){
  if(e){
    sendDeptId.value=e[e.length-1]
    ruleForm.sendDeptName=getID(institutionList.value,e[e.length-1]).name
  }else{
    sendDeptId.value=''
  }
}

const submitForm = async (formEl: FormInstance | undefined) => {

  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      if(route.query?.id){
        api.contentApi.noticeEdit({
          ...ruleForm,
          sendDeptId:sendDeptId.value,
          id:route.query?.id
        }).then(res=>{
          if(res.code===200){
            ElMessage.success(res.msg)
            router.back()
          }
        })
      }else{
        api.contentApi.noticeAdd({
          ...ruleForm,
          sendDeptId:sendDeptId.value
        }).then(res=>{
          if(res.code===200){
            ElMessage.success(res.msg)
            router.back()
          }
        })
      }


    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  // if (!formEl) return;
  // formEl.resetFields();
  myRouter.push({
    path: '/content/message'
  })
};

//机构列表
const institutionList = ref([]);
const getInstitutionList = () => {
  api.institutionApi.institutionList({}).then((res: any) => {
    if (res.code === 200) {
      institutionList.value = res.data;
      ruleForm.sendDeptName=getID(res.data,ruleForm.sendDeptId).name
      console.log(123, getID(res.data,ruleForm.sendDeptId))
    }
  });
};

function getID(json:any, id:string) {
  // var o = {};
  // //专门用来保存筛选后的数组
  // //定义一个函数getID(json,id)，形参json用来接受传入的数组，形参id用来接受id号
  // //核心：利用arry.forEach(function(currentValue),index,arr)遍历数组
  // // json.forEach(function(item:any) {
  // //   console.log(123, item)
  // // //if用来判断外层，else if用来判断里层，调用递归函数的有2个判断条件在“有goods属性并且不为空”情况下才调用
  // //     if (item.id == id) {
  // //       o = item
  // //       return o;
  // //     } else if (item.children && item.children.length > 0) {
  // //       o = getID(item.children, id)//递归
  // //     }
  // // });
  // // return o; //全部遍历完之后返回对象o
  // for (let i=0; i<json.length-1; i++) {
  //   if(json[i].id === id) {
  //     o = json[i]
  //     break
  //   } else if(json[i].children && json[i].children.length > 0) {
  //     getID(json[i].children, id)
  //   }
  // }
  // return o;
  for (let item of json) {
    if (item.id === id) {
      return item;
    }
    if (item.children && item.children.length > 0) {
      const found = getID(item.children, id);
      if (found) {
        return found;
      }
    }
  }
  return null;
}
</script>
<style lang="scss" scoped>
.message-main {
  flex: 1;
  width: 100%;
  height: 100%;
  background: #fff;
  padding: 15px;
  box-sizing: border-box;
}
:deep(.el-form-item.is-error .el-input__validateIcon) {
  display: none;
}
</style>