jcyjdt_studio/src/views/user/support/add.vue

<template>
  <div id="add">
    <el-row>
      <el-col :span="24" class="main animate__animated animate__backInRight">
        <el-col :span="24" class="one">
          <component :is="partsSearch" :is_back="true" @toBack="toBack"></component>
        </el-col>
        <el-col :span="24" class="two">
          <component :is="CForm" :fields="fields" :rules="rules" :form="form" labelWidth="auto" @save="toSave">
            <template #fields>
              <el-option v-for="item in fieldList" :key="item.dict_value" :label="item.dict_label" :value="item.dict_value"></el-option>
            </template>
            <template #is_use>
              <el-option v-for="item in isuseList" :key="item.dict_value" :label="item.dict_label" :value="item.dict_value"></el-option>
            </template>
            <template #file>
              <component :is="CFile" model="file" :limit="limit" :url="url" :list="form.file" @change="onChange"></component>
            </template>
            <template #content>
              <component :is="WangEditor" v-model="form.content" url="/files/studioadmin/other/upload"></component>
            </template>
          </component>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import store from '@/stores/counter';
// #region 组件
import partsSearch from '@common/src/components/frame/c-search.vue';
import CForm from '@common/src/components/frame/c-form.vue';
import CFile from '@common/src/components/frame/c-upload.vue';
import WangEditor from '@common/src/components/frame/wang-editor.vue';
// #endregion
import type { Ref } from 'vue';
import { ref, onMounted, reactive } from 'vue';
import type { FormRules } from 'element-plus';
import { ElMessage } from 'element-plus';
import { useRoute } from 'vue-router';
// #region 接口
import { TecholsupportStore } from '@common/src/stores/studio/supplydemand/techolsupport'; //技术支持
import { DictDataStore } from '@common/src/stores/users/sysdictdata'; // 字典表
import { UserStudioApplyStore } from '@common/src/stores/studio/role/userStudioApply'; //个人账号申请科学家工作室权限表
import type { IQueryResult } from '@/util/types.util';
const techolsupport = TecholsupportStore();
const sysdictdata = DictDataStore();
const userStudioApply = UserStudioApplyStore();
let route = useRoute();
// 必填项
const rules = reactive<FormRules>({
  scientist_name: [{ required: true, message: '请输入科学家姓名', trigger: 'blur' }],
  phone: [{ required: true, message: '请输入联系方式', trigger: 'blur' }],
  company_name: [{ required: true, message: '请输入单位名称', trigger: 'blur' }],
  title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
  date: [{ required: true, message: '请选择发布时间', trigger: 'change' }],
  fields: [{ required: true, message: '请选择行业领域', trigger: 'change' }],
  file: [{ required: true, message: '请上传文件信息', trigger: 'change' }],
  content: [{ required: true, message: '请输入信息内容', trigger: 'blur' }],
});
// 表单
let fields: Ref<any[]> = ref([
  { label: '科学家姓名', model: 'scientist_name' },
  { label: '联系方式', model: 'phone' },
  { label: '单位名称', model: 'company_name' },
  { label: '标题', model: 'title' },
  { label: '发布时间', model: 'date', type: 'date' },
  { label: '行业领域', model: 'fields', type: 'selectMany' },
  { label: '文件信息', model: 'file', custom: true },
  { label: '信息内容', model: 'content', custom: true },
  { label: '是否启用', model: 'is_use', type: 'select' },
]);
let limit: Ref<number> = ref(1);
let url: Ref<string> = ref('/files/studioadmin/support/upload');
// 用户信息
let user: Ref<{ _id: string; name: string; unit_name: string; nick_name: string }> = ref({ _id: '', name: '', unit_name: '', nick_name: '' });
// 个人用户信息
let userInfo: Ref<{ name: string; _id: String; user_id: String; status: String; company: String; phone: { phone: String } }> = ref({
  _id: '',
  user_id: '',
  status: '',
  name: '',
  company: '',
  phone: { phone: '' },
});
// 表单
let form: Ref<{ content: string; file: Array<[]> }> = ref({ content: '', file: [] });
// 行业领域
let fieldList: Ref<any[]> = ref([]);
// 是否启用
let isuseList: Ref<any[]> = ref([]);
onMounted(async () => {
  user.value = store.state.user as { _id: string; name: string; unit_name: string; nick_name: string };
  await searchOther();
  await searchUser();
  await search();
});
 // 查询个人用户信息
const searchUser = async () => {
  const res: IQueryResult = await userStudioApply.query({ user_id: user.value._id });
  let list = res.data as any[];
  if (res.total > 0) userInfo.value = list[0];
};
// 查询
const search = async () => {
  let data = {
    file: [],
    content: '',
    user_id: user.value._id,
    scientist_name: userInfo.value.name,
    phone: userInfo.value.phone.phone,
    company_name: userInfo.value.company,
  };
  if (route.query && route.query.id) {
    let id = route.query.id;
    const res: IQueryResult = await techolsupport.fetch(id);
    if (res.errcode == 0) {
      if (res.data) form.value = res.data as { content: string; file: Array<[]> };
    }
  } else {
    form.value = { ...data };
  }
};
// 返回
const toBack = () => {
  window.history.go(-1);
};
// 上传
const onChange = (e: { model: string; value: Array<[]> }) => {
  const { model, value } = e;
  form.value[model] = value;
};
// 添加
const toSave = async (data: { _id: string }) => {
  let res: IQueryResult;
  if (data._id) res = await techolsupport.update(data);
  else res = await techolsupport.create(data);
  if (res.errcode == 0) {
    ElMessage({ type: 'success', message: '维护信息成功' });
    toBack();
  } else ElMessage({ type: 'warning', message: `${res.errmsg}` });
};
// 查询其他信息
const searchOther = async () => {
  // 领域
  const p1: IQueryResult = await sysdictdata.query({ dict_type: 'studio_field' });
  fieldList.value = p1.data as [];
  // 角色
  const p2: IQueryResult = await sysdictdata.query({ dict_type: 'sys_yes_no' });
  isuseList.value = p2.data as [];
};
</script>

<style scoped></style>