zkzx_admin/src/views/news/mess/detail.vue

<template>
  <div id="detail">
    <el-row>
      <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
        <el-col :span="24" class="one">
          <cSearch :is_back="true" @toBack="toBack"></cSearch>
        </el-col>
        <el-col :span="24" class="two">
          <cForm :span="24" :fields="formFields" :form="form" :rules="rules" @save="onSubmit" @dataChange="dataChange">
            <template #column_id>
              <el-option v-for="(i, index) in columnList" :key="index" :label="i.title" :value="i._id"></el-option>
            </template>
            <template #is_use>
              <el-option v-for="(i, index) in is_useList" :key="index" :label="i.label" :value="i.value"></el-option>
            </template>
            <template #is_money>
              <el-option v-for="(i, index) in moneyList" :key="index" :label="i.label" :value="i.value"></el-option>
            </template>
            <template #type>
              <el-option v-for="(i, index) in typeList" :key="index" :label="i.label" :value="i.value"></el-option>
            </template>
            <template #expo_id>
              <el-option v-for="(i, index) in dockList" :key="index" :label="i.title" :value="i._id"></el-option>
            </template>
            <template #image_file="{ item }">
              <cUpload
                :model="item.model"
                :limit="6"
                url="/files/zkzx/news/upload"
                :list="form[item.model]"
                listType="picture-card"
                @change="onUpload"
              ></cUpload>
            </template>
            <template #video_file="{ item }">
              <cUpload :model="item.model" :limit="1" url="/files/zkzx/news/upload" :list="form[item.model]" listType="text" @change="onUpload"></cUpload>
            </template>
            <template #annex_file="{ item }">
              <cUpload :model="item.model" :limit="1" url="/files/zkzx/news/upload" :list="form[item.model]" listType="text" @change="onUpload"></cUpload>
            </template>
            <template #money_file="{ item }">
              <cUpload :model="item.model" :limit="6" url="/files/news/upload" :list="form[item.model]" listType="picture-card" @change="onUpload"></cUpload>
            </template>
          </cForm>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import type { Ref } from 'vue';
import { ref, reactive, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';
import type { FormRules } from 'element-plus';
import store from '@/stores/counter';
// 接口
import { DictDataStore } from '@common/src/stores/system/dictData'; // 字典表
import { NewsMessStore } from '@common/src/stores/allAdmin/newsMess';
import { NewsColumnStore } from '@common/src/stores/allAdmin/newsColumn';
import { DockStore } from '@common/src/stores/allAdmin/dock';
import type { IQueryResult } from '@/util/types.util';
const newsMess = NewsMessStore();
const dictData = DictDataStore();
const newsColumn = NewsColumnStore();
const dock = DockStore();
// 路由
const route = useRoute();

// 加载中
const loading = ref(false);
let user: Ref<any> = ref({});
// 表单
let form: Ref<any> = ref({});
let formFields: Ref<any[]> = ref([
  { label: '所属栏目', model: 'column_id', type: 'select' },
  { label: '标题', model: 'title' },
  { label: '信息类型', model: 'type', type: 'select' },
  { label: '发布时间', model: 'create_date', type: 'date' },
  { label: '信息来源', model: 'origin' },
  { label: '信息简介', model: 'brief', type: 'textarea' },
  { label: '图片文件', model: 'image_file', custom: true },
  { label: '视频文件', model: 'video_file', custom: true },
  { label: '附件文件', model: 'annex_file', custom: true },
  { label: '是否收费', model: 'is_money', type: 'select' },
  { label: '收费图片', model: 'money_file', custom: true },
  { label: '关联展会', model: 'expo_id', type: 'select' },
  { label: '信息内容', model: 'content', type: 'textarea' },
  { label: '是否启用', model: 'is_use', type: 'select' }
]);
const rules = reactive<FormRules>({});

// 字典表
let typeList: Ref<any> = ref([]);
let moneyList: Ref<any> = ref([]);
let is_useList: Ref<any> = ref([]);
let columnList: Ref<any> = ref([]);
let dockList: Ref<any> = ref([]);
onMounted(async () => {
  loading.value = true;
  user.value = store.state.user;
  await searchOther();
  await search();
  loading.value = false;
});
const search = async () => {
  if (route.query.id) {
    let res: IQueryResult = await newsMess.fetch(route.query.id);
    if (res.errcode == 0) form.value = res.data as {};
  } else form.value = { is_use: '0' };
};
const dataChange = (e: { model: string; value: any }) => {
  const { model, value } = e;
  if (model == 'is_money') {
    if (value == '1') formFields.value = formFields.value.filter((i) => i.model != 'money_file');
    else formFields.value.splice(10, 0, { label: '收费图片', model: 'money_file', custom: true });
  }
};
const onUpload = (e: { model: string; value: Array<[]> }) => {
  const { model, value } = e;
  form.value[model] = value;
};
// 提交
const onSubmit = async (data) => {
  let res: IQueryResult;
  if (data._id) res = await newsMess.update(data);
  else res = await newsMess.create(data);
  if (res.errcode == 0) {
    ElMessage({ type: `success`, message: `维护信息成功` });
    toBack();
  }
};

// 返回上一页
const toBack = () => {
  window.history.go(-1);
};
const searchOther = async () => {
  let res: IQueryResult;
  // 信息类型
  res = await dictData.query({ type: 'news_type' });
  if (res.errcode == 0) typeList.value = res.data;
  // 是否收费
  res = await dictData.query({ type: 'common_isno' });
  if (res.errcode == 0) moneyList.value = res.data;
  // 是否使用
  res = await dictData.query({ type: 'common_use' });
  if (res.errcode == 0) is_useList.value = res.data;
  res = await newsColumn.query({ is_use: '0' });
  if (res.errcode == 0) columnList.value = res.data;
  res = await dock.query({ status: '1' });
  if (res.errcode == 0) dockList.value = res.data;
};
</script>
<style scoped lang="scss"></style>