middleground_code_v2/src/views/newIntegrationTask/foregroundTask/index.vue

<template>
  <div>
    <base-layout
      ref="baseLayout"
      :buttonList="buttonList"
      @onFuncBtn="onFuncBtn"
      :querySwitch="true"
      :searchList="requirementList"
      @search="handleSearchEvent"
      :isPage="true"
      @pageChange="handlePageChange"
    >
      <div slot="main" slot-scope="{ tableHeight }">
        <base-table
          ref="baseTable"
          :showIndex="true"
          :funWidth="180"
          :funData="funData"
          @onFunc="onFunc"
          :tabLoading.sync="tabLoading"
          :tableHeight="tableHeight"
          :tableData="tableData"
          :tableColumn="tableColumnData"
          @onCellClick="onCellClick"
        >
        </base-table>
      </div>
    </base-layout>
    <right-dialog ref="rightDialog" @resetTable="resetTable"></right-dialog>
  </div>
</template>

<script>
import baseLayout from "@/components/base/baseLayout";
import baseTable from "@/components/base/baseTable";
import rightDialog from "./rightDialog";
import configData from "./configData";
import { authApi } from "@/api/apis/auth";
import { option } from '@/api/apis/detailData'
export default {
  components: {
    baseLayout,
    baseTable,
    rightDialog,
  },
  data() {
    return {
      buttonList: [
        {
          menuName: "新增",
          icon: "el-icon-plus",
          btnFunction: "add",
        },
        {
          menuName: "刷新",
          icon: "el-icon-refresh",
          btnFunction: "resetLoad",
        },
      ], //按钮组
      requirementList: [
        {
          placeholder: '插件名称',
          prop: 'plug_id',
          tag: 'elCascader',
          options: [
          ],
        },

        {
          placeholder: "工坊名称",
          prop: "workshopName",
          tag: "elInput",
        },
        {
          placeholder: "描述",
          prop: "remark",
          tag: "elInput",
        },
      ], //查询模板list
      tabLoading: false,
      tableColumnData: configData.tableColumnData, //表头数据
      funData: [

        {
          color: "#6a9af1",
          text: "重推",
        },
        {
          color: "#d67a74",
          text: "删除",
        },
      ],
      tableData: [], //表格数据
      pageModel: {
        pageNum: 1,
        pageSize: 100,
      },
      queryModel: {
        code: "",
        name: "",
        classify: "",
        productionCompany: "",

      },
    };
  },
  mounted() {
    // this.queryProductClassfy();
    this.GetProductionTableData();

    this.queryOptions();
    console.log("mount")
  },
  methods: {
    //获取属于特定插件类别的插件编号及插件名称
    async getOptionChildren(optionItem){
      let res = await option({
        tl: 'sysApplicationPluginService',
        as: '',
        dj: 'queryEntity'
      }, {typeId:optionItem.value})
      if (res.status == '200') {
        optionItem.children = res.attribute.map(item =>{
          return {
            value:item.pluginCode,
            label:item.pluginName,
          }
        })
      }
    },

    //获取级联选择器options数据
    async queryOptions(){
      const res = await option({
        tl: 'sysApplicationPluginTypeService',
        as: '',
        dj: 'queryPluginType'
      }, {})
      if (res.status == '200') {
        this.requirementList[0].options = res.attribute.map(item =>{
          return {
            value: item.id,
            label: item.name,
            children: []
          }
        });
      }
      for (let optionItem of this.requirementList[0].options) {
        await this.getOptionChildren(optionItem);
      }
      console.log(this.requirementList[0].options);
    },

    onCellClick(row){
      this.openLoading("detail");
      this.$refs.rightDialog.openDialog("show", row);
    },
    // 表格数据
    async GetProductionTableData() {
      this.tabLoading = true;
      let param = {
        ...this.pageModel,
        ...this.queryModel,
      };
      let res = await authApi(
        "sysIntegratedForegroundTaskService",
        "integrationTaskService",
        "queryIntegratedForegroundTask",
        "",
        param
      );
      this.tabLoading = false;
      if (res.status == "200") {
        this.tableData = res.attribute.list;
        this.$refs.baseLayout.setPageTotal(res.attribute.total);
      }
    },
    // 分页变化
    handlePageChange(val) {
      this.pageModel.pageNum = val.pageIndex;
      this.pageModel.pageSize = val.pageSize;
      this.GetProductionTableData();
    },
    // 按钮组
    onFuncBtn(btn) {
      this[btn.btnFunction]();
    },
    // 新增
    add() {
      this.$refs.rightDialog.openDialog("add");
    },
    // 表格操作事件 查看 重推 删除
    onFunc(index, row,item) {
      // 查看
      if (item.text==='查看') {
        this.openLoading("detail");
        this.$refs.rightDialog.openDialog("show", row);
      }
      // 重推
      if (item.text==='重推') {
        this.openLoading("detail");
        this.$refs.rightDialog.openDialog("edit", row);
      }
      // 删除
      if (item.text==='删除') {
        this.$delConfirm().then(() => {
          this.openLoading("del");
          this.productionDeleteById(row.id);
        });
      }
    },
    async productionDeleteById(id) {
      let param = {
        id: id,
      };
      let res = await authApi(
        "sysIntegratedForegroundTaskService",
        "integrationTaskService",
        "deleteIntegratedForegroundTask",
        "",
        param
      );
      if (res.status == "200") {
        this.$vmNews("删除成功", "success");
        this.resetTable();
      }
    },
    // 重置表格
    resetTable() {
      this.pageModel.pageNum = 1;
      this.$refs.baseLayout.pageClear();
      this.GetProductionTableData();
    },
    // 搜索
    handleSearchEvent() {
      let data = this.$refs.baseLayout.ruleForm;
      this.queryModel = data;
      this.resetTable();
    },
    // 获取所有产品分类
    async queryProductClassfy() {
      let params = {
        tab_name: "sys_product",
        column_name: "classify",
      };
      let res = await authApi(
        "generalServiceImpl",
        "dictionaryshop",
        "selectDictionaryshop",
        "",
        params
      );
      if (res.status == "200") {
        this.requirementList[2].options = res.attribute;
      }
    },
  },
};
</script>

<style scoped>
.clickTitle {
  color: #409eff;
  cursor: pointer;
}
</style>