|
@@ -0,0 +1,244 @@
|
|
|
+<template>
|
|
|
+ <div id="news">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24" class="column">
|
|
|
+ <el-col :span="24" class="top">
|
|
|
+ <el-col :span="12" class="title">
|
|
|
+ {{ column_name || '信息管理' }}
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12" class="btn">
|
|
|
+ <el-button type="primary" size="mini" @click="drawer = true">添加</el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="list">
|
|
|
+ <data-table :fields="fields" :data="list" :total="total" :opera="opera" @edit="toEdit" @delete="toDelete"></data-table>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-dialog title="信息管理" :visible.sync="drawer" @closed="handleClose">
|
|
|
+ <el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
|
|
+ <el-form-item label="所属栏目" prop="column_id">
|
|
|
+ <el-select v-model="form.column_id" placeholder="请选择" @change="changecol">
|
|
|
+ <el-option v-for="(i, index) in column" :key="index" :label="i.title" :value="i.id"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="类型" v-if="site == 'kjzx'">
|
|
|
+ <el-radio-group v-model="form.type">
|
|
|
+ <el-radio label="国家"></el-radio>
|
|
|
+ <el-radio label="科学院"></el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="名称" prop="title">
|
|
|
+ <el-input v-model="form.title" placeholder="请输入信息名称"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="信息来源">
|
|
|
+ <el-input v-model="form.orgin" placeholder="请输入信息来源"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="图片">
|
|
|
+ <upload :limit="1" :data="form.picture" type="picture" :url="'/files/picture/upload'" @upload="uploadSuccess"></upload>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="内容">
|
|
|
+ <wang-editor v-model="form.content" placeholder="请输入信息内容"></wang-editor>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="发布时间">
|
|
|
+ <el-date-picker type="date" placeholder="请选择" value-format="yyyy-MM-dd" v-model="form.publish_time"></el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="附件">
|
|
|
+ <uploadfile
|
|
|
+ :limit="1"
|
|
|
+ :data="form.filepath"
|
|
|
+ type="filepath"
|
|
|
+ listType=""
|
|
|
+ :url="'/files/filepath/upload'"
|
|
|
+ @upload="uploadSuccess"
|
|
|
+ @delete="uploadDelete"
|
|
|
+ ></uploadfile>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="drawerSave">保存</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import WangEditor from '@/components/wang-editor.vue';
|
|
|
+import upload from '@/components/uploadone.vue';
|
|
|
+import uploadfile from '@/components/uploaddock.vue';
|
|
|
+import dataTable from '@/components/data-table.vue';
|
|
|
+import { mapActions, mapState, createNamespacedHelpers } from 'vuex';
|
|
|
+const { mapActions: journcolumn } = createNamespacedHelpers('journcolumn');
|
|
|
+const { mapActions: journnews } = createNamespacedHelpers('journnews');
|
|
|
+export default {
|
|
|
+ name: 'news',
|
|
|
+ props: {
|
|
|
+ columnid: String,
|
|
|
+ categoryList: Array,
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ dataTable,
|
|
|
+ WangEditor,
|
|
|
+ upload,
|
|
|
+ uploadfile,
|
|
|
+ },
|
|
|
+ data: function() {
|
|
|
+ return {
|
|
|
+ // 列表
|
|
|
+ opera: [
|
|
|
+ {
|
|
|
+ label: '编辑',
|
|
|
+ method: 'edit',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '删除',
|
|
|
+ method: 'delete',
|
|
|
+ confirm: true,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ fields: [
|
|
|
+ { label: '所属栏目', prop: 'column_name' },
|
|
|
+ { label: '标题', prop: 'title' },
|
|
|
+ { label: '来源', prop: 'orgin' },
|
|
|
+ { label: '时间', prop: 'publish_time' },
|
|
|
+ ],
|
|
|
+ list: [],
|
|
|
+ total: 0,
|
|
|
+ drawer: false,
|
|
|
+ form: {},
|
|
|
+ rules: {
|
|
|
+ column_id: [{ required: true, message: '请选择活动区域', trigger: 'change' }],
|
|
|
+ title: [{ required: true, message: '请输入信息名称', trigger: 'blur' }],
|
|
|
+ },
|
|
|
+ // 栏目列表
|
|
|
+ column: [],
|
|
|
+ // 位置
|
|
|
+ site: '',
|
|
|
+ column_name: '',
|
|
|
+ };
|
|
|
+ },
|
|
|
+ async created() {
|
|
|
+ await this.searchcol();
|
|
|
+ await this.search();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ ...journcolumn({ journcolumnQuery: 'query' }),
|
|
|
+ ...journnews(['query', 'create', 'update', 'delete']),
|
|
|
+ // 查询列表
|
|
|
+ async search({ skip = 0, limit = 10, ...info } = {}) {
|
|
|
+ if (this.columnid) {
|
|
|
+ info.column_id = this.columnid;
|
|
|
+ }
|
|
|
+ let user = this.user;
|
|
|
+ if (user.code == 'JLCJGLY') {
|
|
|
+ const res = await this.query({ skip, limit, ...info });
|
|
|
+ if (this.$checkRes(res)) {
|
|
|
+ this.$set(this, `list`, res.data);
|
|
|
+ this.$set(this, `total`, res.total);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ info.uid = user.uid;
|
|
|
+ const 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.$set(this, 'form', data);
|
|
|
+ this.drawer = true;
|
|
|
+ },
|
|
|
+ // 删除
|
|
|
+ async toDelete({ data }) {
|
|
|
+ const res = await this.delete(data.id);
|
|
|
+ if (this.$checkRes(res, '删除成功', res.errmsg || '删除失败')) this.search();
|
|
|
+ },
|
|
|
+ // 提交
|
|
|
+ async drawerSave() {
|
|
|
+ let data = this.form;
|
|
|
+ if (data.id) {
|
|
|
+ let res = await this.update(data);
|
|
|
+ if (this.$checkRes(res)) {
|
|
|
+ this.$message({
|
|
|
+ message: '修改信息成功',
|
|
|
+ type: 'success',
|
|
|
+ });
|
|
|
+ this.handleClose();
|
|
|
+ this.search();
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ data.uid = this.user.uid;
|
|
|
+ let res = await this.create(data);
|
|
|
+ if (this.$checkRes(res)) {
|
|
|
+ this.$message({
|
|
|
+ message: '创建信息成功',
|
|
|
+ type: 'success',
|
|
|
+ });
|
|
|
+ this.handleClose();
|
|
|
+ this.search();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 取消
|
|
|
+ handleClose() {
|
|
|
+ this.form = {};
|
|
|
+ this.drawer = false;
|
|
|
+ },
|
|
|
+ // 查询栏目
|
|
|
+ async searchcol() {
|
|
|
+ let res = await this.journcolumnQuery();
|
|
|
+ if (this.$checkRes(res)) {
|
|
|
+ this.$set(this, `column`, res.data);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 图片
|
|
|
+ uploadSuccess({ type, data }) {
|
|
|
+ this.$set(this.form, `${type}`, data.uri);
|
|
|
+ },
|
|
|
+ // 删除图片
|
|
|
+ uploadDelete(index) {
|
|
|
+ this.$set(this.form, `filepath`, null);
|
|
|
+ },
|
|
|
+ // 栏目选择
|
|
|
+ changecol(value) {
|
|
|
+ let column = this.column.find(f => f.id == value);
|
|
|
+ if (column) this.$set(this.form, `column_name`, column.title);
|
|
|
+ this.$set(this, `site`, column.site);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(['user']),
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ columnid: {
|
|
|
+ handler(val) {
|
|
|
+ if (val) {
|
|
|
+ this.search();
|
|
|
+ let column = this.column.find(f => f.id == this.columnid);
|
|
|
+ if (column) this.$set(this, `column_name`, column.title);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ immediate: true,
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.column {
|
|
|
+ .top {
|
|
|
+ padding: 10px 0;
|
|
|
+ .title {
|
|
|
+ padding: 2px 10px;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .btn {
|
|
|
+ text-align: right;
|
|
|
+ padding: 0 10px 0 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|