epmet-oper-lingshan/epmet-oper-web/src/views/modules/productConfig/MiniDraft.vue

<template>
  <div>
    <el-card shadow="never"
             class="aui-card--fill">
      <el-tabs @tab-click="tabClick"
               v-model="activeName"
               class="el-tabs">
        <el-tab-pane label="草稿箱"
                     name="draft">
          <c-table column-type="index"
                   ref="table_draft"
                   :url="tableDraftUrl"
                   :params="tableDraftParams"
                   keyword="DraftList"
                   :tableHeight="tableHeight"
                   :operations="draftOperations"
                   :orderOperations="orderOperations"
                   @addToTemp="addToTemp">
          </c-table>

        </el-tab-pane>

        <el-tab-pane label="模板库"
                     name="temp">
          <c-table column-type="index"
                   ref="table_temp"
                   :url="tableTempUrl"
                   :params="tableTempParams"
                   keyword="Temp"
                   :tableHeight="tableHeight"
                   :operations="tempOperations"
                   :orderOperations="orderOperations"
                   @deleteTemp="deleteTemp">
          </c-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import CTable from '@c/CTableNoPage'
import { mapGetters } from 'vuex'
import { Loading } from 'element-ui' // 引入Loading服务
import { requestPost } from "@/js/dai/request";

let loading // 加载动画
export default {
  data () {
    return {
      loading: false,

      activeName: 'draft',

      // 模板列表
      selTempId: '',
      // tableDraftUrl: 'https://epmet-cloud.elinkservice.cn/api/third/code/templatelist',
      tableDraftUrl: 'https://epmet-cloud.elinkservice.cn/api/third/code/gettemplatedraftlist',
      tableDraftParams: {
        type: Object, // table的查询参数
        default () {
          return {}
        }
      },
      draftOperations: [
        {
          lable: '添加到模板库', // 按钮显示名称
          size: 'mini',
          style: 'margin: 0 6px;',
          type: 'text',
          slot: '',
          plain: false,
          methodName: 'addToTemp', // 回调方法名称
          isShow: (row) => {
            return true

          }
        },
      ],

      // 模板列表
      selTempId: '',
      tableTempUrl: 'https://epmet-cloud.elinkservice.cn/api/third/code/templatelist',
      tableTempParams: {
        type: Object, // table的查询参数
        default () {
          return {}
        }
      },
      // 列表操作栏的操作项数组
      tempOperations: [
        {
          lable: '删除', // 按钮显示名称
          size: 'mini',
          style: 'margin: 0 6px;',
          type: 'text',
          slot: '',
          plain: false,
          methodName: 'deleteTemp', // 回调方法名称
          isShow: (row) => {
            return true

          }
        },
      ],
      orderOperations: [],
    }
  },
  components: {
    CTable
  },
  mounted () {
    this.$nextTick(() => {
      this.activeName = "draft"
      this.getDraft()
      this.getTemp()
    })
  },
  computed: {
    tableHeight () {
      return this.clientHeight - 60 - 80 - 80
    },
    ...mapGetters(['clientHeight'])
  },
  methods: {
    tabClick (tab) {

      this.$nextTick(() => {
        this.$refs['table_' + tab.name].doLayout() // 解决表格错位
      })
    },
    // 获取草稿列表
    async getDraft () {
      this.$refs.table_draft.loadData()
    },

    //添加到模板库
    async addToTemp (row) {

      this.startLoading()
      const url = "https://epmet-cloud.elinkservice.cn/api/third/code/addtotemplate"
      const params = {
        draftId: row.draftId
      }
      const { data, code, msg } = await requestPost(url, params)

      if (code === 0) {
        this.$message.success("操作成功")
        this.activeName = "temp"

        this.getTemp()
        this.$nextTick(() => {
          this.$refs['table_temp'].doLayout() // 解决表格错位
        })

      } else {
        this.$message.error(msg)
      }
      this.endLoading()
    },

    //获取模板
    getTemp () {
      this.$refs.table_temp.loadData()
    },

    //删除模板
    async deleteTemp (row) {
      this.$confirm('确认删除当前模板', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {

        this.startLoading()
        const url = "https://epmet-cloud.elinkservice.cn/api/third/code/deletetemplate"
        const params = {
          templateId: row.id
        }
        const { data, code, msg } = await requestPost(url, params)

        if (code === 0) {
          this.$message.success("操作成功")

          this.getTemp()
        } else {
          this.$message.error(msg)
        }
        this.endLoading()
      })
    },

    // 开启加载动画
    startLoading () {
      loading = Loading.service({
        lock: true, // 是否锁定
        index: 100,
        text: '正在加载……', // 加载中需要显示的文字
        background: 'rgba(0,0,0,.7)' // 背景颜色
      })
    },
    // 结束加载动画
    endLoading () {
      // clearTimeout(timer);
      if (loading) {
        loading.close()
      }
    }
  },
  props: {
  }
}
</script>
<style scoped >
</style>