jiace-admin/src/views/policy/library/index.vue

<template>
  <div class="app-container">
    <el-card shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
        <div style="float:right">
          <el-button type="primary" @click="handleSearchList" size="small">
            查询
          </el-button>
        </div>
      </div>
      <div style="margin-top: 15px">
        <el-form
          size="small"
          :model="queryParams"
          ref="queryForm"
          :inline="true"
        >
          <el-form-item label="政策标题">
            <el-input
              v-model="queryParams.title"
              placeholder="请输入"
              clearable
            />
          </el-form-item>
          <el-form-item label="产出">
            <el-select
              v-model="queryParams.method"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in methodOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="归口">
            <el-select
              v-model="queryParams.attribute"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in attributeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="推送状态">
            <el-select
              v-model="queryParams.status"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in statusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </el-card>

    <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets"></i>
      <span>数据列表</span>
      <div class="btn-add">
        <el-button @click="batchPush" size="small">批量推送</el-button>
        <el-button @click="handlePage(null)" size="small">添加政策</el-button>
      </div>
    </el-card>

    <!-- v-loading="loading" -->
    <el-table
      class="table-container"
      :data="libraryList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="序号" align="center" prop="id" width="120" />
      <!-- <el-table-column
        label="序号"
        width="120"
        type="index"
        :index="indexMethods"
      /> -->
      <el-table-column label="产生" align="center" prop="method" width="150">
        <template slot-scope="scope">
          {{
            methodOptions.filter(item => item.value == scope.row.method)[0]
              .label
          }}
        </template>
      </el-table-column>
      <el-table-column label="政策标题" align="center" prop="title">
        <template slot-scope="scope">
          <el-link type="primary" :underline="false">{{
            scope.row.title
          }}</el-link>
        </template>
      </el-table-column>
      <el-table-column label="级别" align="center" prop="level" width="150">
        <template slot-scope="scope">
          <span v-if="scope.row.level == 1">省级</span>
          <span v-if="scope.row.level == 2">市级</span>
          <span v-if="scope.row.level == 3">区级</span>
        </template>
      </el-table-column>
      <el-table-column label="归口" align="center" prop="attribute" width="100">
        <template slot-scope="scope">
          {{
            attributeOptions.filter(
              item => item.value == scope.row.attribute
            )[0].label
          }}
        </template>
      </el-table-column>
      <el-table-column
        label="发布日期"
        align="center"
        prop="listDate"
        width="180"
      >
        <!-- <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template> -->
      </el-table-column>
      <el-table-column label="来源" align="center" prop="source" width="100" />
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <p>
            <el-button size="small" type="text" @click="open(scope.row)"
              >标签管理</el-button
            >
            <el-button size="small" type="text" @click="openTime(scope.row)"
              >截止时间</el-button
            >
          </p>
          <p>
            <el-button
              size="small"
              type="text"
              @click="handlePage(scope.row.id)"
              >编辑</el-button
            >
            <el-button
              size="small"
              type="text"
              @click="handleDelete(scope.row.id)"
              >删除</el-button
            >
          </p>
        </template>
      </el-table-column>
      <el-table-column label="推送" align="center" prop="roleName" width="150">
        <template slot-scope="scope">
          <el-button
            size="small"
            :disabled="scope.row.status === 1"
            type="text"
            @click="push([scope.row.id])"
            >推送</el-button
          >
          <el-button
            size="small"
            :disabled="scope.row.status === 0"
            type="text"
            @click="revoke(scope.row.id)"
            >撤销</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <el-dialog :title="str" :visible.sync="dialogVisible" width="20%">
      <el-form ref="form" :model="form" label-width="80px">
        <section v-show="str === '标签设置'">
          <el-form-item
            :label="item.name"
            v-for="(item, index) in labelList"
            :key="item.id"
          >
            <!-- v-if="item.labelList" -->
            <el-select v-model="arr[index]" placeholder="请选择" clearable>
              <el-option
                v-for="i in item.labelList"
                :key="i.id"
                :label="i.name"
                :value="i.id"
              />
            </el-select>
          </el-form-item>
        </section>
        <section v-show="str === '截止时间设置'">
          <el-form-item label="截止时间">
            <el-date-picker
              type="datetime"
              placeholder="选择日期"
              value-format="yyyy-MM-dd HH:mm:ss"
              v-model="form.cutOffTime"
            ></el-date-picker>
          </el-form-item>
        </section>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getPolicy,
  delPolicy,
  getLabelSetting,
  setPolicyLabel,
  updatePolicy,
  pushPolicy,
  noPushPolicy
} from '@/api/policy/library';
export default {
  name: 'Role',
  data() {
    return {
      // 产出选项
      methodOptions: [
        {
          value: 1,
          label: '爬虫'
        },
        {
          value: 2,
          label: '手动添加'
        }
      ],
      // 归口选项
      attributeOptions: [
        {
          value: 'KJJ',
          label: '科技'
        },
        {
          value: 'JXJ',
          label: '经信'
        },
        {
          value: 'FGW',
          label: '发改'
        },
        {
          value: 'qita',
          label: '其他'
        }
      ],
      // 推送状态选项
      statusOptions: [
        {
          value: 0,
          label: '未推送'
        },
        {
          value: 1,
          label: '已推送'
        }
      ],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      // 遮罩层
      loading: true,
      libraryList: [],
      // 总条数
      total: 0,
      // 选中数组
      ids: [],
      // 标签管理弹窗状态
      dialogVisible: false,
      str: '',
      form: {},
      arr: [],
      labelList: [],
      policyId: null
    };
  },
  methods: {
    handleSearchList() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    getList() {
      getPolicy(this.queryParams).then(({ data }) => {
        this.libraryList = data.list;
        this.total = data.total;
      });
    },
    // 处理序号=》倒序
    // indexMethods(index) {
    //   console.log(index);
    //   if (this.libraryList.length < 10) {
    //     return this.libraryList.length - index;
    //   } else {
    //     return (
    //       this.libraryList.length - (this.queryParams.pageNum - 1) * 10 - index
    //     );
    //   }
    // },
    // 跳转页面
    handlePage(id) {
      this.$router.push({ path: '/policy/add', query: { id } });
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id);
    },
    // 批量推送
    batchPush() {
      if (this.ids == null || this.ids.length < 1)
        return this.msgInfo('请选择要操作的数据');
      this.push(this.ids);
    },
    open(row) {
      this.str = '标签设置';
      this.dialogVisible = true;
      this.policyId = row.id;
      getLabelSetting({ policyId: row.id, pageNum: 1, pageSize: 100 }).then(
        ({ data }) => {
          this.labelList = data.list;
          this.arr = data.list.map(item =>
            item.labelList
              ? item.labelList.filter(v => v.isHas)[0]
                ? item.labelList.filter(v => v.isHas)[0].id
                : ''
              : undefined
          );
          // this.arr = data.list.map(item => {
          //   // return item.labelList ? item.labelList.map(v => v.id) : undefined;
          //   return item.labelList
          //     ? item.labelList.filter(v => v.isHas)[0]
          //       ? item.labelList.filter(v => v.isHas)[0].id
          //       : ''
          //     : undefined;
          // });
        }
      );
    },
    openTime(row) {
      this.str = '截止时间设置';
      this.dialogVisible = true;
      this.form = row;
    },
    submitForm() {
      if (this.str === '标签设置') {
        let ids = this.arr.filter(item => item);
        setPolicyLabel({ id: this.policyId, ids }).then(({ message }) => {
          this.msgSuccess(message);
          this.dialogVisible = false;
        });
      } else {
        updatePolicy(this.form).then(({ message }) => {
          this.msgSuccess(message);
          this.dialogVisible = false;
        });
      }
    },
    // 删除
    handleDelete(id) {
      this.$confirm('确认删除该数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(function() {
          return delPolicy({ ids: [id] });
        })
        .then(() => {
          this.getList();
          this.msgSuccess('删除成功');
        });
    },
    // 推送
    push(ids) {
      pushPolicy({ ids, status: 1 }).then(({ data }) => {
        this.$message({
          dangerouslyUseHTMLString: true,
          message: data
        });
        this.getList();
      });
    },
    // 撤销
    revoke(id) {
      noPushPolicy({ id, status: 0 }).then(({ message }) => {
        this.msgSuccess(message);
        this.getList();
      });
    }
  },
  created() {
    this.getList();
  }
};
</script>