web-test/src/views/adminCenter/xmly/index.vue

<template>
  <div id="index">
    <el-row>
      <el-col :span="24">
        <el-col :span="24" class="leftTop"> <span>|</span> <span>项目路演</span> </el-col>
        <el-col :span="24" class="info">
          <span v-if="view == 'list'">
            <el-col :span="24" class="add">
              <el-button type="primary" size="mini" @click="add()">添加信息</el-button>
            </el-col>
            <el-col :span="24" class="list">
              <data-table :fields="fields" :opera="opera" :data="list" :total="total" @edit="toEdit" @delete="toDelete" @query="search"></data-table>
            </el-col>
          </span>
          <span v-else>
            <el-col :span="24">
              <el-col :span="24" class="back">
                <el-button type="primary" size="mini" @click="back()">返回</el-button>
              </el-col>
              <el-col :span="24">
                <el-form ref="form" :rules="rules" :model="form" label-width="80px">
                  <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="标题简介">
                    <el-input type="textarea" v-model="form.titlejj" placeholder="请输入标题简介"></el-input>
                  </el-form-item>
                  <el-form-item label="信息图片" prop="picture">
                    <upload :limit="1" :data="form.picture" type="picture" :url="'/files/imgpath/upload'" @upload="uploadSuccess"></upload>
                  </el-form-item>
                  <el-form-item label="视频" prop="filepath">
                    <upload :limit="1" :data="form.filepath" type="filepath" listType="" :url="'/files/imgpath/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-col :span="11">
                      <el-date-picker
                        type="date"
                        placeholder="发布时间"
                        value-format="yyyy-MM-dd"
                        v-model="form.publish_time"
                        style="width: 100%;"
                      ></el-date-picker>
                    </el-col>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="onSubmit()">提交</el-button>
                  </el-form-item>
                </el-form>
              </el-col>
            </el-col>
          </span>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import WangEditor from '@/components/wang-editor.vue';
import upload from '@/components/upload.vue';
import dataTable from '@/components/data-table.vue';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: dock } = createNamespacedHelpers('dock');
const { mapActions: newsroadshow } = createNamespacedHelpers('newsroadshow');
export default {
  name: 'index',
  props: {},
  components: {
    dataTable,
    WangEditor,
    upload,
  },
  data: function() {
    return {
      opera: [
        {
          label: '修改',
          icon: 'el-icon-edit',
          method: 'edit',
        },
        {
          label: '删除',
          icon: 'el-icon-delete',
          method: 'delete',
        },
      ],
      fields: [
        { label: '信息标题', prop: 'title', filter: 'input' },
        { label: '来源', prop: 'orgin' },
        { label: '标题简介', prop: 'titlejj' },
        { label: '发布时间', prop: 'publish_time' },
      ],
      list: [],
      total: 0,
      dock_id: '',
      view: 'list',
      // 添加信息
      form: {},
      rules: {},
    };
  },
  created() {
    this.search();
  },
  methods: {
    ...dock(['fetch']),
    ...newsroadshow(['query', 'create', 'update', 'delete']),
    async search({ skip = 0, limit = 10, ...info } = {}) {
      let res = await this.fetch(this.user.uid);
      console.log(res);
      this.$set(this, `dock_id`, res.data.id);
      let arr = await this.query({ skip, limit, dock_id: this.dock_id, ...info });
      this.$set(this, `list`, arr.data);
      this.$set(this, `total`, arr.total);
    },
    toEdit({ data }) {
      this.view = 'detail';
      this.$set(this, `form`, data);
    },
    async toDelete({ data }) {
      let res = await this.delete(data.id);
      this.$message({
        message: '刪除信息成功',
        type: 'success',
      });
      this.search();
    },
    // 添加
    add() {
      this.view = 'detail';
      this.form = {};
    },
    // 提交
    async onSubmit() {
      if (this.form.id) {
        let res = await this.update(this.form);
        if (this.$checkRes(res)) {
          this.$message({
            message: '修改信息成功',
            type: 'success',
          });
          this.back();
          this.search();
        }
      } else {
        let data = this.form;
        data.dock_id = this.dock_id;
        let res = await this.create(data);
        if (this.$checkRes(res)) {
          this.$message({
            message: '添加信息成功',
            type: 'success',
          });
          this.back();
          this.search();
        }
      }
    },
    // 返回
    back() {
      this.view = 'list';
    },
    uploadSuccess({ type, data }) {
      this.$set(this.form, `${type}`, data.uri);
    },
  },
  computed: {
    ...mapState(['user']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped>
.leftTop {
  font-size: 18px;
  width: 96%;
  height: 41px;
  line-height: 35px;
  border-bottom: 1px solid #e5e5e5;
  position: relative;
  bottom: 1px;
  margin: 10px;
  font-weight: 600;
  color: #22529a;
}
.info {
  padding: 0 40px 0 10px;
  .add {
    text-align: right;
    padding: 10px 0;
  }
}
.back {
  text-align: right;
  padding: 10px 0;
}
</style>