web-cms/src/views/new-views/column.vue

<template>
  <div class="lite">
    <el-card class="right list" size="mini" v-if="view == 'list'">
      <div slot="header">
        <span>栏目列表</span>
        <el-button icon="el-icon-plus" style="float: right; padding: 3px 0" type="text" @click="handleNew">创建栏目</el-button>
      </div>
      <data-grid
        :data="list"
        :meta="fields"
        :operation="operation"
        @edit="handleEdit"
        @delete="handleDelete"
        @query="search"
        :paging="true"
        :filter="true"
        :total="total"
      >
        <template slot="ext"> </template>
      </data-grid>
    </el-card>
    <el-card class="right details" size="mini" v-else-if="view == 'form'">
      <div slot="header">
        <span>{{ form.isNew ? '创建栏目' : '修改栏目' }}</span>
        <el-button icon="el-icon-arrow-left" style="float: right; padding: 3px 10px;" type="text" @click="view = 'list'">返回</el-button>
      </div>
      <data-form title="栏目" :data="form.data" :is-new="form.isNew" @save="handleSave" @cancel="view = 'list'"> </data-form>
    </el-card>
  </div>
</template>
<script>
import DataForm from '@/components/jobs/column-form';
import DataGrid from '@naf/data/filter-grid';
import { createNamespacedHelpers, mapGetters } from 'vuex';

const { mapState, mapActions } = createNamespacedHelpers('jobsNew/column');

export default {
  metaInfo: {
    title: '栏目管理',
  },
  components: {
    DataForm,
    DataGrid,
  },
  data() {
    return {
      view: 'list',
      fields: [
        { name: 'title', label: '栏目名称' },
        { name: 'parent', label: '所属' },
        { name: 'parent_type_word', label: '所属类型' },
        { name: 'is_use_word', label: '是否使用' },
      ],
      /* 操作类型 */
      operation: [['edit', '编辑', 'el-icon-edit'], ['delete', '删除', 'el-icon-delete']] /* 操作类型 */,
      list: [],
      info: {},
      total: 0,
    };
  },
  validate({ params }) {
    // Must be a number
    return /^[0-2]$/.test(params.status);
  },
  created() {
    this.search();
  },

  methods: {
    ...mapActions(['columnOperation']),
    async search({ filter = {}, paging } = {}) {
      let data = { ...filter, ...paging };
      // 1直接拿着参数发送请求
      let result = await this.columnOperation({ type: 'list', data: { site: this.$user.unit.code, ...data } });
      if (`${result.errcode}` === '0') {
        //给this=>vue的实例下在中的list属性，赋予result。data的值
        this.$set(this, `total`, result.total);
        result.data.map(item => {
          item.is_use_word = `${item.is_use}` === '0' ? `使用中` : '已禁止';
          item.parent_type_word = `${item.parent_type}` === `menu` ? '菜单' : `${item.parent_type}` === `module` ? '模块' : '子栏目' + '类型';
          return item;
        });
        this.$set(this, `list`, result.data);
      } else {
        this.$message.error(result.errmsg ? result.errmsg : 'error');
      }
    },
    async handleDelete({ id }) {
      this.$confirm('是否删除该栏目吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.toDelete(id);
        })
        .catch(() => {});
    },
    async toDelete(id) {
      let result = await this.columnOperation({ type: 'delete', data: { id: id } });
      if (`${result.errcode}` === '0') {
        this.$message.success('删除成功');
        this.search();
      } else {
        this.$message.error(result.errmsg ? result.errmsg : '删除失败');
      }
    },
    async handleEdit({ id }) {
      let res = await this.columnOperation({ type: 'search', data: { id: id } });
      this.$checkRes(res, () => {
        this.form = { data: { ...res.data }, isNew: false };
        this.view = 'form';
      });
    },
    async handleSave(payload) {
      let result, msg;
      if (payload.isNew) {
        let result = await this.columnOperation({ type: 'add', data: { info: payload.data, site: this.$user.unit.code } });
        msg = '信息添加成功';
      } else {
        let result = await this.columnOperation({ type: 'update', data: { info: payload.data, id: payload.data.id } });
        msg = '信息修改成功';
      }
      if (this.$checkRes(result, msg)) {
        this.search();
        this.view = 'list';
      }
    },
    handleNew() {
      this.form = { data: { is_use: `0`, site: this.$user.unit.code }, isNew: true };
      this.view = 'form';
    },
  },
  computed: {
    status() {
      return this.$route.params.status;
    },
  },
};
</script>
<style lang="less" scoped>
@import '~@lib/style/lite.less';
</style>