aircraft-admin/src/views/platform/article/index.vue

<template>
    <div class="app-container">
        <!--工具栏-->
        <div class="head-container">
            <div>
                <!-- 搜索 -->
                <el-select v-model="query.moduleName" placeholder="请选择模块" clearable size="small" class="filter-item"
                    style="width: 200px">
                    <el-option v-for="(item,index) in modules" :key="index" :label="item.label" :value="item.value" />
                </el-select>
                <el-select v-model="query.labelName" placeholder="请选择标签" clearable size="small" class="filter-item"
                    style="width: 200px">
                    <el-option v-for="(item,index) in labels" :key="index" :label="item.label" :value="item.value" />
                </el-select>
                <el-input v-model="query.title" clearable size="small" placeholder="请输入标题" style="width: 200px;"
                class="filter-item" @keyup.enter.native="crud.toQuery"/>
                <rrOperation />
                <el-button v-permission="permission.add" class="filter-item" size="mini" type="primary"
                    icon="el-icon-plus" @click="toAddArticle">
                    新增{{ crud.title }}
                </el-button>
            </div>
        </div>
        <!--表格渲染-->
        <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;">
          <el-table-column type="index" align="center" width="55" label="序号" />
          <el-table-column :show-overflow-tooltip="true" prop="title" label="标题" align="center" />
          <el-table-column :show-overflow-tooltip="true" prop="articletype" label="文章类型" align="center" />
          <el-table-column :show-overflow-tooltip="true" prop="top" label="置顶" align="center">
              <template slot-scope="scope">
                  <el-tag v-if="scope.row.top===1" type="success">是</el-tag>
                  <el-tag v-else type="danger">否</el-tag>
              </template>
          </el-table-column>
          <el-table-column :show-overflow-tooltip="true" prop="moduleName" label="模块名称" align="center" />
          <el-table-column :show-overflow-tooltip="true" prop="labelName" label="标签名称" align="center" />
          <el-table-column :show-overflow-tooltip="true" label="链接" align="center" min-width="80">
              <template slot-scope="scope">
                <el-button size="mini" style="border-radius: 10px;" @click="copyLink(scope.row)">复制</el-button>
              </template>
          </el-table-column>
          <el-table-column :show-overflow-tooltip="true" prop="createTime" label="创建时间" align="center" />
          <el-table-column label="操作" align="center" fixed="right">
              <template slot-scope="scope">
                <el-button size="small" type="text" @click="toShowDetail(scope.row)">查看详情</el-button>
                <el-button size="small" type="text" @click="toPreview(scope.row)">预览</el-button>
                <el-button size="small" type="text" @click="toEditArticle(scope.row)">修改</el-button>
                <el-button size="small" type="text" @click="deleteArticle(scope.row.id)">删除</el-button>
              </template>
          </el-table-column>
        </el-table>
        <!--分页组件-->
        <pagination />
    </div>
</template>
<script>
import crudArticle from '@/api/platform/article'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import pagination from '@crud/Pagination'
export default {
  name: 'Article',
  components: { rrOperation, pagination },
    // 数据字典
    dicts: ['material_type'],
    cruds() {
        return CRUD({ title: '文章', url: 'api/article', crudMethod: { ...crudArticle }, optShow: { reset: true }})
    },
    mixins: [presenter(), header(), crud()],
  data() {
    return {
      permission: {
          add: ['admin', 'article:add'],
          edit: ['admin', 'article:edit'],
          del: ['admin', 'article:del']
      },
      modules:[
        { label: '景区', value: '景区' },
        { label: '新闻', value: '新闻' },
        { label: '活动', value: '活动' },
        { label: '其他', value: '其他' }
      ],
      labels:[
        { label: '图片', value: '图片' },
        { label: '视频', value: '视频' },
        { label: '音频', value: '音频' },
        { label: '文件', value: '文件' }
      ]
    }
  },
  created() {
    this.crud.data = [{ id: 1, title: '景区', articletype: '图文', top: 1, moduleName: '工作台', labelName: '使用教程', createTime: '2020-01-01' },
    { id: 2, title: '景区', articletype: '图文', top: 0, moduleName: '工作台', labelName: '使用教程', createTime: '2020-01-01' },
    ]
    this.crud.resetDataStatus()
  },
  methods: {
    // 复制链接
    copyLink(row){
      if(row.id == null||row.id == ''){ this.$message.warning('链接为空');return;}
      var aux = document.createElement("input"); 
      aux.setAttribute("value", `${process.env.VUE_APP_BASE_PATH}/#article/content?id=${row.id}`); 
      document.body.appendChild(aux); 
      aux.select();
      document.execCommand("copy"); 
      document.body.removeChild(aux);
      this.$message.success('复制成功');
      aux.remove();
    },
    // 文章详情
    toShowDetail(row) {
      this.$router.push({ path: '/platform/article/detail' , query: { id:row.id, moduleName: row.moduleName, labelName: row.labelName } });
    },
    // 预览
    toPreview(row) {
      window.open(`${process.env.VUE_APP_BASE_PATH}/#article/content?id=${row.id}`);
    },
    // 添加文章
    toAddArticle() {
      this.$router.push({ path: '/platform/article/add' });
    },
    // 添加文章
    toEditArticle(row) {
      this.$router.push({ path: '/platform/article/edit', query: { id:row.id, moduleName: row.moduleName, labelName: row.labelName } });
    },
    // 文章删除
    deleteArticle(id) {
      this.$confirm('确定要删除该文章吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
      .then(async() => {
        try {
          // state.tableData.loading = true;
          // let res = await artApi.deleteArticle(id);
          // if(res?.success){ 
          //   await getTableData();
            this.$message.success('文章删除成功！');
          // } else ElMessage.error('文章删除失败！');
        } catch(e) {
          this.$message.error('处理失败！');
        } finally {
          // state.tableData.loading = false;
        }
      })
    }
  }
}
</script>