thoth-frontend-test/src/views/Platform/setUp/systemSetup/modulePage.vue

<template>
  <!-- 业务模块 -->
  <div class="set-background">
    <div class="block">
      <el-form :model="moduleForm">
        <div class="set-head">
          业务模块<el-input v-model="moduleForm.bizModuleName" clearable placeholder="请填写" style="margin-left:10px;width:18%;" /> &nbsp;&nbsp;
          业务线<el-select v-model="moduleForm.bizId" placeholder="请选择" filterable clearable style="margin-left:10px;width:18%;" @change="choosePlatType()">
            <el-option v-for="item in bizData" :key="item.id" :label="item.bizName" :value="item.id" />
          </el-select>
          平台类型<el-select v-model="moduleForm.platId" placeholder="请选择" filterable clearable style="margin-left:10px;width:18%;">
            <el-option v-for="item in platData1" :key="item.id" :label="item.platName" :value="item.id" />
          </el-select>
          <div style="float:right">
            <el-button type="primary" @click="queryModuleList(moduleForm)">查询</el-button>
            <el-button type="primary" plain @click="handleaddModule()">新增</el-button>
          </div>
        </div>
      </el-form>
      <div class="set-locate">
        <el-table :key="tableKey" :data="moduletData" fit highlight-current-row style="width: 100%;" border :header-cell-style="{background:'#F0F2F4',color:'#606266'}">
          <el-table-column label="序号" prop="id" min-width="40px" align="center"><template slot-scope="scope"><span>{{ scope.row.id }}</span></template> </el-table-column>
          <el-table-column label="业务模块" prop="bizModuleName" align="center" min-width="100">
            <template slot-scope="scope"><a href="javascript:void(0)" style="color:#20a0ff">{{ scope.row.bizModuleName }}</a></template>
          </el-table-column>
          <el-table-column label="平台类型" prop="platName" min-width="70px" align="center"><template slot-scope="scope"><span>{{ scope.row.platName }}</span></template> </el-table-column>
          <el-table-column label="业务线" prop="bizName" min-width="70px" align="center"><template slot-scope="scope"><span>{{ scope.row.bizName }}</span></template> </el-table-column>
          <el-table-column label="端类型" prop="clientType" min-width="120px" align="center"><template slot-scope="{row}"><span>{{ statusMaps.get(row.clientType) }}</span></template> </el-table-column>
          <el-table-column label="操作人" prop="modifier" min-width="70px" align="center"><template slot-scope="scope"><span>{{ scope.row.modifier }}</span></template> </el-table-column>
          <el-table-column label="操作" align="center" min-width="150px" class-name="small-padding fixed-width">
            <template slot-scope="{row}">
              <el-button type="primary" size="mini" @click="handelEditModule(row)">编辑</el-button>
              <el-button type="danger" size="mini" @click="handelDeleteModule(row)">删除</el-button>

            </template>
          </el-table-column>
        </el-table>

        <el-dialog :title="titleName" width="40%" :visible.sync="dialogFormVisible">
          <div style="margin-left:30px">
            <el-form ref="addModuleForms" :rules="addModuleDataRules" :model="addModuleForm">
              <el-form-item label="业务模块" prop="bizModuleName">
                <el-input v-model="addModuleForm.bizModuleName" placeholder="请填写" style="margin-left:7px;width:60%;" />
              </el-form-item>
              <el-form-item label="业务线" prop="bizId">
                <el-select v-model="addModuleForm.bizId" placeholder="请选择" filterable clearable style="margin-left:20px;width:60%;" @change="getPlatType()">
                  <el-option v-for="item in bizData" :key="item.id" :label="item.bizName" :value="item.id" />
                </el-select>
              </el-form-item>
              <el-form-item label="平台类型" prop="platId">
                <el-select v-model="addModuleForm.platId" placeholder="请选择" filterable clearable style="margin-left:7px;width:60%;" @change="changePlat()">
                  <el-option v-for="item in platData" :key="item.id" :label="item.platName" :value="item.id" />
                </el-select>
              </el-form-item>
            </el-form>
          </div>
          <div align="center" style="margin-top:18px">
            <el-button type="info" plain size="mini" @click="dialogFormVisible=false">取消</el-button>
            <el-button type="primary" size="mini" @click="titleName === '新增' ? addModuleType(addModuleForm) :editModuleType(addModuleForm)">确定</el-button>
          </div>
          <div style="margin-top:6%" />
        </el-dialog>

        <el-dialog :visible.sync="dialogDeleteVisible" width="30%">
          <div align="center" style="margin-top:-6%">
            <b>确定要删除该业务模块吗？</b>
          </div>
          <div align="center" style="margin-top:38px">
            <el-button type="primary" size="mini" @click="deleteModuleType()">确定</el-button>
            <el-button type="danger" size="mini" @click="dialogDeleteVisible=false">取消</el-button>
          </div>
          <div style="margin-top:4%" />
        </el-dialog>
        <div>
          <el-pagination style="margin-top:30px;" align="center" :current-page="curIndex" :page-sizes="[5, 10, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
      </div>

    </div>
  </div></template>

<script>
import { addBizModule, updateBizModule, deleteBizModule, queryBizModuleList, queryBizTypeList, queryPlatFormTypeList } from '@/api/modulePage'
import waves from '@/directive/waves' // waves directive

var envSelections = []
var consumerSelections = []

export default {
  name: 'ModulePage',
  // components: { Pagination },
  directives: { waves },
  filters: {
    statusFilter(status) {
      const statusMap = {
        1: 'success',
        draft: 'info',
        0: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      userInformation: localStorage.getItem('username'),
      userName: localStorage.getItem('realname'),
      statusMaps: new Map([[1, '服务端 '], [2, '客户端']]),
      clientOptions: [{
        value: 1,
        label: '服务端'
      }, {
        value: 2,
        label: '客户端'
      }, {
        value: 0,
        label: '默认选项'
      }],
      userData: '',
      envSelections,
      addModuleForm: {},
      consumerSelections,
      bizData: [],
      total: 0,
      titleName: '',
      bizForm: {
        bizName: ''
      },
      moduleForm: {
        platId: '',
        bizId: '',
        bizModuleName: ''
      },
      platData: [],
      platData1: [],
      platType: {},
      deleteData: {},
      moduletData: [],
      addModuleData: {},
      currentBizData: [],
      tableKey: 0,
      curIndex: 0,
      pageSize: 10,
      listLoading: true,
      dialogFormVisible: false,
      dialogDeleteVisible: false,
      // dialogName: '业务线名称',
      addModuleDataRules: {
        bizModuleName: [{ required: true, message: '业务类型不能为空', trigger: 'change' }],
        platId: [{ required: true, message: '平台类型不能为空', trigger: 'change' }],
        bizId: [{ required: true, message: '业务线不能为空', trigger: 'change' }]
      }

    }
  },

  created() {
    this.getBizList()
    // this.getPlatList()
    this.getList()
  },
  methods: {
    // 获得biztype
    getBizList() {
      this.bizForm.bizName = ''
      this.bizForm.curIndex = this.curIndex - 1
      queryBizTypeList(this.bizForm).then(response => {
        if (response.code === 200) {
          this.bizData = response.data.list
        } else {
          this.errorFun()
        }
      })
    },
    // 获取平台类型
    choosePlatType() {
      // this.listLoading = true
      this.indexPage = {
        bizId: this.moduleForm.bizId,
        pageSize: this.pageSize,
        curIndex: this.curIndex - 1
      }
      queryPlatFormTypeList(this.indexPage).then(response => {
        this.platData1 = response.data.list
        this.$set(this.moduleForm, 'platId', '')
        this.total = response.data.total
        this.listLoading = false
      })
    },

    // 新增获取平台类型
    getPlatType() {
      // this.listLoading = true
      this.indexPage = {
        bizId: this.addModuleForm.bizId,
        pageSize: this.pageSize,
        curIndex: this.curIndex - 1
      }
      queryPlatFormTypeList(this.indexPage).then(response => {
        this.platData = response.data.list
        // this.$set(this.addModuleForm, 'platId', '')
        // this.total = response.data.total
        this.listLoading = false
      })
    },

    changePlat() {
      this.addData = { id: this.addModuleForm.platId }
      queryPlatFormTypeList(this.addData).then(response => {
        this.platType = response.data.list
        console.log(this.platType)
        console.log(this.platType[0].bizId)
        this.total = 30
        this.listLoading = false
      })
    },

    // 新增平台类型
    handleaddModule() {
      this.titleName = '新增'
      this.dialogFormVisible = true
      this.$refs.addModuleForms.resetFields()
      this.$set(this.addModuleForm, 'bizModuleName', '')
      this.$set(this.addModuleForm, 'platId', '')
      this.$set(this.addModuleForm, 'bizId', '')
      this.addModuleForm = {}
    },
    addModuleType(ele) {
      this.$refs['addModuleForms'].validate((valid) => {
        if (valid) {
          this.addModuleForm = ele
          this.addModuleForm.bizModuleName = ele.bizModuleName
          this.addModuleForm.platId = ele.platId
          this.addModuleForm.bizId = ele.bizId
          this.addModuleForm.clientType = this.platType[0].clientType
          this.addModuleForm.creator = this.userInformation
          this.addModuleForm.modifier = this.userInformation
          addBizModule(this.addModuleForm).then(response => {
            console.log(response)
            if (response.code === 200) {
              this.getList()
              this.successFun()
              this.dialogFormVisible = false
            } else {
              this.errorFun()
            }
          })
        }
      })
    },
    // 进首页
    getList() {
      // this.listLoading = true
      this.indexPage = {
        pageSize: this.pageSize,
        curIndex: this.curIndex - 1
      }
      queryBizModuleList(this.indexPage).then(response => {
        this.moduletData = response.data.list
        this.total = response.data.total
        this.listLoading = false
      })
    },

    // 查看
    queryModuleList(ele) {
      this.moduleForm.bizModuleName = ele.bizModuleName
      this.moduleForm.bizId = ele.bizId
      this.moduleForm.platId = ele.platId
      // this.bizForm.pageSize = this.pageSize
      // this.platForm.curIndex = this.curIndex - 1
      // this.listLoading = true
      queryBizModuleList(this.moduleForm).then(response => {
        if (response.code === 200) {
          // this.getMyDevicesList()
          this.moduletData = response.data.list
          this.total = response.data.total
          this.dialogFormVisible = false
          // this.listLoading = false
        } else {
          this.errorFun()
        }
      })
    },
    // 删除
    handelDeleteModule(ele) {
      this.dialogDeleteVisible = true
      this.addModuleForm = ele
    },
    deleteModuleType() {
      var bizModuleIds = [this.addModuleForm.id]
      this.deleteData.modifier = this.userInformation
      this.deleteData.bizModuleIds = bizModuleIds
      deleteBizModule(this.deleteData).then(response => {
        if (response.code === 200) {
          this.successFun()
          this.dialogDeleteVisible = false
          this.getList()
          this.bizData = response.data.list
        } else {
          this.errorFun()
          // this.dialogDeleteVisible = false
        }
      })
    },

    // 编辑
    handelEditModule(ele) {
      // 不能直接赋值变量，使用Object.assign复制一级属性(注意Object.assign不算完全的深拷贝)
      this.addModuleForm = Object.assign({}, ele)
      // this.addModuleForm = JSON.parse(JSON.stringify(ele))
      this.titleName = '编辑'
      this.getPlatType()
      this.dialogFormVisible = true
      this.$refs.addModuleForms.resetFields()
      this.$set(this.platData, [])
      console.log(ele)
    },
    editModuleType(ele) {
      this.$refs['addModuleForms'].validate((valid) => {
        if (valid) {
          var myDate = new Date()
          this.addModuleForm = ele
          this.addModuleForm.bizModuleName = ele.bizModuleName
          this.addModuleForm.platId = ele.platId
          // this.addModuleForm.platName = this.platData.filter((value) => value.code === ele.platId)
          this.addModuleForm.modifyTime = myDate
          this.addModuleForm.modifier = this.userInformation
          // this.bizTypeInfo = { bizTypeInfo: this.addBizData }
          updateBizModule(this.addModuleForm).then(response => {
            this.$set(this.platData, [])
            console.log(response)
            if (response.code === 200) {
              this.getList()
              this.successFun()
              this.dialogFormVisible = false
            } else {
              this.errorFun()
            }
          })
        }
      })
    },

    handleSizeChange(size) {
      this.pageSize = size
      this.getList()
    },
    handleCurrentChange(curIndex) {
      this.curIndex = curIndex
      this.getList()
    },

    clearValidate(formName) {
      this.$refs[formName].clearValidate()
    },

    successFun() {
      this.$notify({ title: 'Success', message: 'Created Successfully', type: 'success', duration: 5000 })
    },
    errorFun() {
      this.$notify({ title: 'Failed', message: 'Created Failed', type: 'error', duration: 5000 })
    }
  }
}
</script>
<style lang="stylus" scoped>
  .set-background
    background-color #F1F4F7
    display flex
    justify-content center
    min-width 700px
    .setPercent >>> .el-dialog__body
      width 100%
    .block
      background-color rgba(255,255,255,1)
      box-shadow 0px 0px 11px 0px rgba(238,240,245,1)
      border-radius 7px
      width 93%
      margin 25px 0
      padding 20px
      min-height calc(100vh - 100px)
    .set-head
      font-size 13px
      width 100%
      color #333B4A
      white-space nowrap
    .set-dialogfont
      font-size 13px
      .set-dialogfont >>> .el-input
        width 70%
    // .set-between
    //   display flex
    // .set-between >>> .el-button
      // height 40px
    .set-locate
      margin-top 25px
      // border-bottom 1px solid #BFC6DC
      // border-left 1px solid #BFC6DC
      // border-top 1px solid #BFC6DC
      // border-right 1px solid #BFC6DC

</style>