web-admin/src/layout/btn-1.vue

<template>
  <div id="btn-1">
    <el-row>
      <el-col :span="24" class="main">
        <el-col :span="24" class="one">
          <template v-if="vOpera">
            <el-button v-opera="{ method: 'add' }" type="primary" plain icon="el-icon-plus" size="mini" @click="toAdd()">新增</el-button>
            <el-button v-opera="{ method: 'edit' }" type="success" plain icon="el-icon-edit" size="mini" :disabled="true">修改</el-button>
            <el-button v-opera="{ method: 'del' }" type="danger" plain icon="el-icon-delete" size="mini" @click="toDel()">删除</el-button>
            <el-button v-opera="{ method: 'others' }" type="warning" plain icon="el-icon-download" size="mini" @click="toExport()">导出</el-button>
          </template>
          <template v-else>
            <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="toAdd()">新增</el-button>
            <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="true">修改</el-button>
            <el-button type="danger" plain icon="el-icon-delete" size="mini" @click="toDel()">删除</el-button>
            <el-button type="warning" plain icon="el-icon-download" size="mini" @click="toExport()">导出</el-button>
          </template>
        </el-col>
      </el-col>
    </el-row>
    <e-dialog :dialog="dialog" @toClose="toClose">
      <template v-slot:info>
        <el-col :span="24" class="dailog_one" v-if="dialog.type == '1'">
          <el-col :span="24" class="one_1">
            <el-transfer v-model="selectList" :titles="['未选择', '已选择']" :button-texts="['取消', '确认']" :data="columnList" target-order="push">
              <el-col :span="24" slot-scope="{ option }">
                <el-col :span="24" class="textOver">{{ option.zh }}</el-col>
              </el-col>
            </el-transfer>
          </el-col>
          <el-col :span="24" class="one_2">
            <el-button type="primary" size="mini" @click="onSubmit()"> 确认导出 </el-button>
          </el-col>
        </el-col>
      </template>
    </e-dialog>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions } = createNamespacedHelpers('usual');
export default {
  name: 'btn-1',
  props: {
    table: { type: String },
    ids: { type: Array },
    vOpera: { type: Boolean, default: true }, // 是否受指令控制
  },
  components: {},
  data: function () {
    return {
      dialog: { title: '导出列信息管理', show: false, type: '1' },
      columnList: [],
      selectList: [],
    };
  },
  created() {},
  methods: {
    ...mapActions(['selectkey', 'selectExp', 'selectDel']),
    // 新增
    toAdd() {
      this.$emit('toAdd');
    },
    // 删除
    async toDel() {
      let arr = this.ids.map((i) => i._id);
      if (!arr.length > 0) {
        this.$message({ type: `error`, message: `暂无数据可批量删除` });
      } else {
        this.$confirm('是否确认删除数据项?', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(async () => {
            let res = await this.selectDel({ table: this.table, ids: arr });
            if (this.$checkRes(res)) {
              this.$message({ type: `success`, message: `批量删除成功` });
              this.$emit('search');
            }
          })
          .catch(() => {});
      }
    },
    // 导出
    async toExport() {
      this.$confirm('是否确认导出所有角色数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          let res = await this.selectkey({ table: this.table });
          if (this.$checkRes(res)) {
            this.$set(this, `columnList`, res.data);
            this.dialog = { title: '导出列信息管理', show: true, type: '1' };
          }
        })
        .catch(() => {});
    },
    // 确认导出
    async onSubmit() {
      let dup = { table: this.table, config: [] };
      if (this.selectList.length > 0) {
        for (const val of this.selectList) {
          let p1 = this.columnList.find((i) => i.key == val);
          if (p1) dup.config.push(p1);
        }
        let res = await this.selectExp(dup);
        if (this.$checkRes(res)) {
          window.open(`${res.data}`, '_blank');
          this.toClose();
        }
      } else {
        this.$message({ type: `error`, message: `暂无数据可批量导出` });
      }
    },
    // 关闭
    toClose() {
      this.dialog = { title: '导出列信息管理', show: false, type: '1' };
    },
  },
  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.dialog {
  /deep/.el-dialog__body {
    padding: 10px;
    min-height: 30px;
    max-height: 400px;
    overflow-y: auto;
  }
}
.dailog_one {
  .one_1 {
    padding: 0 70px;
    margin: 0 0 10px 0;
  }
  .one_2 {
    text-align: center;
  }
}
</style>