middleground_code_v2/src/views/intergrationTask/index.vue

<template>
  <div class="wraaap">
    <div class="left">
      <BaseMenuTree
          :menuData="treeData"
          :filterShow="true"
          :Allshow="false"
          :treeButton="false"
          :filterButtonShow="false"
          style="height: 100%"
          :treeProps="treeProps"
          @handleNodeClick="homeHandleNodeClick"
          ref="menuTree"
          @add="treeAddHandle"
          @append="treeAppendHandle"
          @revise="treeReviseHandle"
          @remove="treeRemoveHandle"
      ></BaseMenuTree>
    </div>
    <div class="right">
      <header style="background: #fff; padding: 20px">
        <div class="search">
          <BaseNewForm
              :spanNumber="8"
              refName="searchForm"
              :formRow="SearchformRow"
              :formRule="false"
              :ruleForm="searchForm"
              :newFlag="true"
              :isFunBtn="false"
          ></BaseNewForm>
        </div>
        <div class="btn">
          <el-button type="primary" @click="searchHandle">搜索</el-button>
          <el-button @click="resizeSearchHandle">重置</el-button>
        </div>
      </header>
      <main style="background: #fff; padding: 20px 20px 0">
        <div style="margin: 0 0 30px 0">
          <el-button type="primary" @click="newPage">新增</el-button>
        </div>
        <div>
          <BaseTable
              ref="mainTable"
              :tableData="tableData"
              :tableColumn="tableColumn"
              :funData="funData"
              :funWidth="funWidth"
              :showIndex="true"
              :tabLoading="mainTabLoading"
              @onFunc="tableButtonHandle"
              :tableHeight="'53vh'"
              :border="false"
          >
            <template #taskStatus="{row}">
              {{ row.taskStatus == 1 ? '启用' : '停用' }}
            </template>
            <template #taskPlugin="{row}">
              {{ pluginDist[row.taskPlugin] }}
            </template>
          </BaseTable>
        </div>
      </main>
      <footer>
        <basePage
            :pageModel="pageModel"
            @update:pageModel="currentChangeHandle"
        ></basePage>
      </footer>
    </div>
    <baseRightDialog
        @handleConfirmClick="handleConfirmClick"
        :dialogVisible="rightDialogSwitch"
        :title="treeTitle"
        @handleClose="rightDialogSwitch = false"
    >
      <div class="treeChunk" v-if="treeRuleForm.class_superiors_name">
        <div class="text">上级节点：</div>
        <div class="input">
          <el-input
              :disabled="true"
              v-model="treeRuleForm.class_superiors_name"
              placeholder=""
          ></el-input>
        </div>
      </div>
      <div class="treeChunk">
        <div class="text">节点名：</div>
        <div class="input">
          <el-input
              v-model="treeRuleForm.class_name"
              placeholder="请输入节点名"
          ></el-input>
        </div>
      </div>
    </baseRightDialog>
  </div>
</template>

<script>
import basePage from './compoments/basePage.vue'
import BaseMenuTree from './compoments/baseMenuTree'
import BaseNewForm from './compoments/baseNewForm'
import BaseTable from './compoments/baseTable'
import { getUserModuleApi } from '@/api/integrationOption/integrationOption.js'
import baseRightDialog from '@/components/base/baseRightDialog'
import { authApi } from '@/api/apis/auth'

export default {
  data() {
    return {
      rightDialogSwitch: false, //右侧dialog
      lookFlag: false, //是否打开查看模式
      newFlag: false, //是否打开新增模式
      pageModel: {
        //页码控制
        pageIndex: 1,
        total: 10,
        limit: 10
      },
      mainTabLoading: false, //表格loding控制
      treeData: [
        //左侧分类数据
        {
          label: '测试',
          id: 1,
          children: [
            {
              id: 3,
              label: '哈哈'
            }
          ]
        }
      ],
      treeForm: { class_name: '', class_superiors: '', class_code: '' },
      searchForm: {}, //搜索框数据
      SearchformRow: [
        //搜索框数据
        {
          elCol: [
            {
              type: 'input',
              title: '任务编码',
              id: 'taskCode',
              row: 8
            },
            {
              type: 'input',
              title: '任务名称',
              id: 'taskName',
              row: 8
            },
            {
              type: 'radio',
              title: '任务状态',
              id: 'taskStatus',
              row: 8,
              options: [
                {
                  label: '启用',
                  id: '1'
                },
                {
                  label: '停用',
                  id: '2'
                }
              ]
            }
          ]
        }
        ,
        {
          elCol: [
            {
              type: 'select',
              title: '插件',
              id: 'taskPlugin',
              row: 8,
              options: []
            }
          ]
        }
      ],
      funData: [
        //table操作
        {
          type: 'edit',
          text: '编辑',
          color: '#5a9cf8'
        },
        {
          type: 'view',
          text: '查看',
          color: '#5a9cf8'
        },
        {
          type: 'dele',
          text: '删除',
          color: '#e47470'
        }
      ],
      tableData: [], //table主表数据
      tableColumn: [
        //数据咧数据
        {
          id: 'taskName',
          title: '任务名称'
        },
        {
          id: 'taskCode',
          title: '任务编码'
        },
        {
          id: 'taskStatus',
          title: '任务状态'
        },
        {
          id: 'taskPlugin',
          title: '插件'
        },
        {
          id: 'taskCron',
          title: '任务策略'
        }
      ],
      treeProps: {
        children: 'childClassifications',
        label: 'name'
      },
      treeTitle: '',
      treeRuleForm: {},
      treeAddFlag: false,
      appId: '',//左侧树id
      pluginDist: {}//插件字典用于列表显示
    }
  },
  methods: {
    // 右dialog提交
    async handleConfirmClick() {
      if (!this.treeRuleForm.class_name) {
        this.$message({
          type: 'error',
          message: '请输入树名称'
        })
        return
      }
      if (this.treeAddFlag) {
        const res = await getUserModuleApi(
            {
              tl: 'integrationTaskClassificationService',
              as: 'integrationTaskClassification',
              dj: 'saveTaskClassification'
            },
            this.treeRuleForm
        )
        if (res.status == 200) {
          this.$message({
            type: 'success',
            message: '保存成功'
          })
          this.rightDialogSwitch = false
          this.initTreeData()
        }
      } else {
        const res = await getUserModuleApi(
            {
              tl: 'integrationTaskClassificationService',
              as: 'integrationTaskClassification',
              dj: 'updateTaskClassification'
            },
            this.treeRuleForm
        )
        if (res.status == 200) {
          this.$message({
            type: 'success',
            message: '保存成功'
          })
          this.rightDialogSwitch = false
          this.initTreeData()
        }
      }
    },
    // 树初始化
    async initTreeData() {
      const res = await getUserModuleApi(
          {
            tl: 'sysApplicationService',
            as: '',
            dj: 'queryEntity'
          },
          {}
      )
      if (res.status == 200) {
        console.log(res)
        this.treeData = res.attribute
        this.$nextTick(() => {
          this.$refs.menuTree.clickFirst()
        })
      }
      console.log(res, '🌲')
    },
    // 树添加
    treeAppendHandle(data) {
      this.treeRuleForm = {}
      this.treeTitle = '子节点增加'
      this.treeAddFlag = true
      this.$set(this.treeRuleForm, 'class_superiors_name', data.class_name)
      this.$set(this.treeRuleForm, 'class_superiors', data.id)
      this.$set(this.treeRuleForm, 'class_code', data.class_code)
      this.$set(this.treeRuleForm, 'lvl', String(data.lvl * 1 + 1))
      this.rightDialogSwitch = true
    },
    treeReviseHandle(data) {
      this.treeRuleForm = {}
      this.treeAddFlag = false
      this.rightDialogSwitch = true
      this.$set(this.treeRuleForm, 'id', data.id)
      this.$set(this.treeRuleForm, 'class_code', data.class_code)
      this.$set(this.treeRuleForm, 'class_name', data.class_name)
      this.$set(this.treeRuleForm, 'lvl', String(data.lvl))
      this.treeTitle = '子节点编辑'
    },
    treeRemoveHandle(data) {
      this.$confirm('确认删除？')
          .then(async() => {
            console.log(1)
            const res = await getUserModuleApi(
                {
                  tl: 'integrationTaskClassificationService',
                  as: 'integrationTaskClassification',
                  dj: 'updateTaskClassificationSts'
                },
                {
                  id: data.id //任务id
                }
            )
            console.log(res)
            if (res.status == 200) {
              this.$nextTick(() => {
                this.initTreeData()
              })
            }
          })
          .catch(() => {
          })
    },
    // 左侧树加号点击事件
    treeAddHandle() {
      this.treeRuleForm = {}
      this.treeAddFlag = true
      this.rightDialogSwitch = true
      this.treeTitle = '根节点增加'
      this.$set(this.treeRuleForm, 'class_code', new Date().getTime())
      this.$set(this.treeRuleForm, 'lvl', '0')
    },
    // 初始化表单
    async initTableData(obj = {}) {
      const res = await getUserModuleApi(
          {
            tl: 'integrationTaskService',
            as: '',
            dj: 'queryEntityPage'
          },
          {
            pageNum: this.pageModel.pageIndex,
            pageSize: this.pageModel.limit,
            task_app: this.appId,
            ...obj,
          }
      )
      console.log(res, 'tabledata')
      if (res.status == 200) {
        this.tableData = res.attribute.list
        this.pageModel.total = res.attribute.total
      }
    },
    // 搜索按钮
    searchHandle() {
      this.initTableData({ ...this.searchForm })
    },
    // 重置按钮
    resizeSearchHandle() {
      this.searchForm = {}
    },
    // 新建路由跳转
    newPage() {
      this.$router.push({ name: 'taskAdd' })
    },
    // 树点击事件
    homeHandleNodeClick(data) {
      console.log(data, 'data')
      this.pageModel.pageIndex = 1
      this.pageModel.total = 0
      this.pageModel.limit = 10
      this.appId = data.id
      this.searchForm = {}
      this.tableData = []
      this.lookFlag = false
      this.newFlag = false
      //树点击完毕后调用插件查询接口
      this.plugSelectInit()
      //初始化表单
      this.initTableData()
    },
    //查询条件下啦接口
    async plugSelectInit() {
      const res = await authApi('sysApplicationPluginService', '', 'queryEntity', '', {
        appId: this.appId
      })
      if (res.status === '200') {
        this.pluginDist = {}
        res.attribute.forEach(item => {
          item.label = item.pluginName
          this.$set(this.pluginDist, item.id, item.label)
        })
        this.SearchformRow[1].elCol[0].options = res.attribute
        console.log(this.SearchformRow[1].elCol[0], 'this.SearchformRow[1].elCol[0]')
      }
      console.log(res, '拿到插件列表')
    },
    // 页面
    currentChangeHandle(pageModel) {
      this.pageModel = pageModel
      this.$nextTick(() => {
        this.initTableData({ ...this.searchForm })
      })
    },
    // 表格按钮
    tableButtonHandle(val, item) {
      if (item.type === 'view') {
        this.$router.push({
          name: 'taskAdd',
          query: { id: val.id, lookFlag: true }
        })
      } else if (item.type === 'dele') {
        console.log(111)
        this.$confirm('确认删除？')
            .then(async() => {
              const res = await getUserModuleApi(
                  {
                    tl: 'integrationTaskService',
                    as: 'integrationTask',
                    dj: 'updateIntegrationTaskSts'
                  },
                  {
                    id: val.id //任务id
                  }
              )
              if (res.status == 200) {
                if (
                    this.pageModel.total - 1 + this.pageModel.limit <=
                    this.pageModel.pageIndex * this.pageModel.limit
                ) {
                  this.pageModel.pageIndex--
                }
                this.$nextTick(() => {
                  this.initTableData({ ...this.searchForm })
                })
              }
            })
            .catch((err) => {
              console.log(err)
            })
      } else if (item.type === 'edit') {
        this.$router.push({ name: 'taskAdd', query: { id: val.id } })
      }
    }
  },
  components: {
    BaseMenuTree,
    BaseNewForm,
    BaseTable,
    basePage,
    baseRightDialog
  },
  mounted() {
    // this.$refs.menuTree.clickFirst();
    // this.initTableData()
    this.initTreeData()
  },
  computed: {
    // 操作框的宽度
    funWidth() {
      return this.funData.length * 70
    }
  }
}
</script>

<style scoped lang="scss">
.treeChunk {
  padding: 20px;
  display: flex;
  align-items: center;

  > .text {
    flex: 1;
  }

  > .input {
    flex: 5;
  }
}

.wraaap {
  display: flex;

  .right {
    width: 85%;
    margin-left: 20px;
    border-radius: 20px !important;
  }

  .left {
    border-radius: 20px;
    width: 15%;
    background-color: #fff;
  }

  .btn {
    display: flex;
    justify-content: flex-end;
  }

  main {
    margin-top: 20px;
    border-radius: 20px;
  }

  footer {
    margin-top: 15px;
  }

  header {
    border-radius: 20px;
  }
}
</style>