1

src/main.js

@@ -12,6 +12,7 @@ import '@/plugins/loading';
 import '@/plugins/var';
 import '@/plugins/methods';
 import '@/plugins/setting';
+import '@/plugins/components';
 import { messages } from './components/common/i18n';
 import 'element-ui/lib/theme-chalk/index.css'; // 默认主题
 // import './assets/css/theme-green/index.css'; // 浅绿色主题

src/plugins/components.js

@@ -0,0 +1,12 @@
+import Vue from 'vue';
+import dataTable from '@common/src/components/frame/filter-page-table.vue';
+import dataForm from '@common/src/components/frame/form.vue';
+import eUpload from '@common/src/components/frame/upload.vue';
+const Plugin = vue => {
+  vue.prototype.$dev_mode = process.env.NODE_ENV === 'development';
+  vue.component('data-table', dataTable);
+  vue.component('data-form', dataForm);
+  vue.component('eUpload', eUpload);
+};
+
+Vue.use(Plugin);

src/router/index.js

@@ -115,6 +115,17 @@ export default new Router({
           component: () => import('../views/news/detail.vue'),
           meta: { title: '信息管理' },
         },
+        // 科学普及
+        {
+          path: '/universal',
+          component: () => import('../views/universal/index.vue'),
+          meta: { title: '科学普及管理' },
+        },
+        {
+          path: '/universal/detail',
+          component: () => import('../views/universal/detail.vue'),
+          meta: { title: '信息管理' },
+        },
         // 项目路演
         {
           path: '/roadshow',

src/store/index.js

@@ -27,6 +27,7 @@ import channel from '@common/src/store/channel';
 // 技术新闻
 import column from '@common/src/store/column';
 import news from '@common/src/store/news';
+import universal from '@common/src/store/universal';
 // 项目路演
 import roadShow from '@common/src/store/roadShow';
 // 嘉宾访谈
@@ -65,6 +66,7 @@ export default new Vuex.Store({
     channel,
     column,
     news,
+    universal,
     roadShow,
     interview,
     dockTranscation,

src/views/universal/detail.vue

@@ -0,0 +1,135 @@
+<template>
+  <div id="detail">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="back">
+          <el-button type="primary" size="mini" @click="back">返回</el-button>
+        </el-col>
+        <el-col :span="24" class="detail">
+          <data-form :data="form" :fields="formFields" :rules="rules" @save="toSave">
+            <template #options="{item}">
+              <template v-if="item.model === 'type'">
+                <el-option v-for="(i, index) in typeList" :key="`type${index}`" :label="i.name" :value="i.name"></el-option>
+              </template>
+            </template>
+            <template #custom="{item,form}">
+              <template v-if="item.model == 'img_url'">
+                <e-upload url="/files/img_url/upload" :limit="1" v-model="form.img_url" type="img_url" @upload="upload" @delete="onDelete"></e-upload>
+              </template>
+              <template v-else-if="item.model == 'file_url'">
+                <e-upload url="/files/file_url/upload" :limit="1" v-model="form.file_url" type="file_url" @upload="upload" @delete="onDelete"></e-upload>
+              </template>
+            </template>
+          </data-form>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import _ from 'lodash';
+import dataForm from '@common/src/components/frame/form.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: interview } = createNamespacedHelpers('interview');
+export default {
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  name: 'detail',
+  props: {},
+  components: {
+    dataForm,
+  },
+  data: function() {
+    return {
+      formFields: [
+        { label: '信息类型', model: 'type', type: 'select' },
+        { label: '信息标题', model: 'title' },
+        { label: '信息来源', model: 'origin' },
+        { label: '发布时间', model: 'create_time', type: 'date' },
+        { label: '图片文件', model: 'img_url', custom: true },
+        { label: '视频文件', model: 'file_url', custom: true },
+        { label: '信息内容', model: 'content', type: 'editor' },
+      ],
+      form: {
+        img_url: [],
+        file_url: [],
+      },
+      rules: {
+        type: [{ required: true, message: '请选择' }],
+        title: [{ required: true, message: '请输入信息标题' }],
+        origin: [{ required: true, message: '请输入信息来源' }],
+        publish_time: [{ required: true, message: '请输入发布时间' }],
+      },
+      typeList: [{ name: '科普场馆' }, { name: '科普体验' }, { name: '科普解读' }, { name: '黑科技' }],
+    };
+  },
+  async created() {
+    if (this.id) await this.search();
+  },
+  methods: {
+    ...interview(['fetch', 'create', 'update']),
+    // 查询详情
+    async search() {
+      let res = await this.fetch(this.id);
+      if (this.$checkRes(res)) {
+        this.$set(this, `form`, res.data);
+      }
+    },
+    // 提交
+    async toSave({ data }) {
+      if (data.id) {
+        let res = await this.update(data);
+        if (this.$checkRes(res)) {
+          this.$message({
+            message: '信息修改成功',
+            type: 'success',
+          });
+          this.back();
+        }
+      } else {
+        data.user_id = this.user.id;
+        let res = await this.create(data);
+        if (this.$checkRes(res)) {
+          this.$message({
+            message: '信息创建成功',
+            type: 'success',
+          });
+          this.back();
+        }
+      }
+    },
+    // 返回
+    back() {
+      this.$router.push({ path: '/universal' });
+    },
+    upload({ type, data }) {
+      let file = _.cloneDeep(this.form[type]);
+      let newData = [{ name: data.name, url: data.uri }];
+      file.push(...newData);
+      this.$set(this.form, `${type}`, file);
+    },
+    onDelete(data) {
+      const index = this.form[data.type].findIndex(f => _.isEqual(f, data.file));
+      this.form[data.type].splice(index, 1);
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    id() {
+      return this.$route.query.id;
+    },
+  },
+  watch: {},
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  .back {
+    text-align: right;
+    margin: 0 0 10px 0;
+  }
+}
+</style>

src/views/universal/index.vue

@@ -0,0 +1,95 @@
+<template>
+  <div id="index">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="top">
+          <el-button type="primary" size="mini" @click="add">添加</el-button>
+        </el-col>
+        <el-col :span="24" class="down">
+          <data-table :fields="fields" :opera="opera" :data="list" :total="total" @query="search" @edit="toEdit" @delete="toDelete"></data-table>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import dataTable from '@common/src/components/frame/filter-page-table.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: mapUniversal } = createNamespacedHelpers('universal');
+export default {
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  name: 'index',
+  props: {},
+  components: { dataTable },
+  data: function() {
+    return {
+      opera: [
+        {
+          label: '编辑',
+          method: 'edit',
+        },
+        {
+          label: '删除',
+          method: 'delete',
+        },
+      ],
+      fields: [
+        { label: '信息标题', prop: 'title', filter: 'input' },
+        { label: '信息来源', prop: 'origin' },
+        { label: '发布时间', prop: 'publish_time' },
+      ],
+      list: [],
+      total: 0,
+    };
+  },
+  async created() {
+    await this.search();
+  },
+  methods: {
+    ...mapUniversal(['query', 'fetch', 'create', 'update', 'delete']),
+    async search({ skip = 0, limit = 10, ...info } = {}) {
+      info.user_id = this.user.id;
+      let res = await this.query({ skip, limit, ...info });
+      if (this.$checkRes(res)) {
+        this.$set(this, `list`, res.data);
+        this.$set(this, `total`, res.total);
+      }
+    },
+    // 修改
+    toEdit({ data }) {
+      this.$router.push({ path: '/universal/detail', query: { id: data.id } });
+    },
+    // 删除
+    async toDelete({ data }) {
+      let res = await this.delete(data.id);
+      if (this.$checkRes(res)) {
+        this.$message({
+          message: '信息删除成功',
+          type: 'success',
+        });
+        this.search();
+      }
+    },
+    // 添加数据
+    add() {
+      this.$router.push({ path: '/universal/detail' });
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  watch: {},
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  .top {
+    text-align: right;
+    margin: 0 0 10px 0;
+  }
+}
+</style>

vue.config.js

@@ -25,7 +25,7 @@ module.exports = {
         target: 'http://broadcast.waityou24.cn',
       },
       '/api': {
-        target: 'http://192.168.1.19:9101', //http://192.168.1.19:9101
+        target: 'http://broadcast.waityou24.cn', //http://192.168.1.19:9101
         changeOrigin: true,
         ws: false,
       },