duosanbian_yos/src/HManagement/siteManage/paymentRules/modules/versionDefinition.vue

<template>
  <div>
    <el-button  size="small" type="primary" @click="onShow">版本定义</el-button>
    <el-drawer
        style="color: #333!important"
        title="版本定义"
        :visible.sync="dialogVisible"
        size="90%"
        direction="rtl"
        :show-close="false"
        append-to-body
        >
      <div class="drawer__panel">
        <el-row :gutter="20">
          <el-col :span="8">
            <div style="width: 100%;">
              <el-button size="mini" icon="el-icon-plus" type="primary" @click="addVersion" :disabled="isSave">新 增</el-button>
              <el-table
                  class="table-style"
                  ref="singleTable"
                  :data="versionData"
                  style="width: 100%" border
                  :height="height ? height : versionData.length <= 4?'260px':versionData.length <= 20?'calc(100vh - 420px)':'calc(100vh - 220px)'"
                  :cell-style="{height:'40px',color:'#666666',fontWeight:'400'}"
                  :header-cell-style="{height:'40px',color:'#606266',fontWeight:'400',fontSize:'14px'}"
                  @row-click="rowClick"
                  highlight-current-row
                  @current-change="onHandleCurrentChange">
                <el-table-column
                    prop="partitionname"
                    label="版本名称"
                >
                  <template slot-scope="scope">
                    <el-input size="small" placeholder="输入版本名称" v-model="scope.row.partitionname" v-if="isSave && scope.row.rowindex === index"></el-input>
                    <span v-else>{{scope.row.partitionname}}</span>
                  </template>
                </el-table-column>
                <el-table-column
                    label="操作"
                    width="120">
                  <template slot-scope="scope">
                    <el-button size="mini" type="text" class="inline-16" v-if="scope.row.rowindex !== index" @click="onEdit(scope.row)">编 辑</el-button>
                    <el-button size="mini" type="text" v-if="scope.row.rowindex !== index" @click="onDel(scope.row.sys_site_systempartitionid)">删 除</el-button>
                    <el-button size="mini" type="text" v-if="isSave && scope.row.rowindex === index" @click="onSave(scope.row)">保 存</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-col>
          <el-col :span="16">
            <div >
              <addVersionModules :rowData="rowData" @addSuccess="addSuccess"></addVersionModules>
              <el-table
                  class="table-style"
                  :data="systemModule"
                  style="width: 100%" border
                  :height="height ? height : systemModule.length <= 4?'260px':systemModule.length <= 20?'calc(100vh - 420px)':'calc(100vh - 220px)'"
                  :cell-style="{height:'40px',color:'#666666',fontWeight:'400'}"
                  :header-cell-style="{height:'40px',color:'#606266',fontWeight:'400',fontSize:'14px'}">
                <el-table-column
                    prop="systemclient"
                    label="端口"
                >
                </el-table-column>
                <el-table-column
                    prop="systemname"
                    label="系统名称"
                >
                </el-table-column>
                <el-table-column
                    prop="systemmodulename"
                    label="模块名称"
                >
                </el-table-column>
                <el-table-column
                    prop="systemappname"
                    label="应用名称"
                >
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="操作"
                    width="100">
                  <template slot-scope="scope">

                    <el-popconfirm
                        title="确定删除这个模块功能吗？"
                        @confirm="onModulesDel(scope.row)"
                    >
                      <el-button size="mini" type="text"  slot="reference">删 除</el-button>
                    </el-popconfirm>
                  </template>

                </el-table-column>
              </el-table>
            </div>
          </el-col>
        </el-row>

      </div>
    </el-drawer>
  </div>
</template>

<script>
import addVersionModules from './addVersionModules'
export default {
  name: "versionDefinition",
  components:{addVersionModules},
  data(){
    return {
      dialogVisible:false,
      rowData:'',
      versionData:[],
      systemModule:[],
      versionParam:{
        "classname": "webmanage.site.systempartition",
        "method": "list",
        "content": {
          "pageNumber": 1,
          "pageSize": 99,
          "where": {
            "condition": ""
          }
        },
      },
      param:{
        "classname": "webmanage.site.systempartition",
        "method": "detail",
        "content": {
          "pageNumber": 1,
          "pageSize": 99,
          "sys_site_systempartitionid": '',
          "where": {
            "condition": ""
          }
        }
      },
      currentPage:0,
      total:0,
      currentPageVersion:0,
      totalVersion:0,
      height:'',
      isSave:false,
      index:'',
      currentRow: null,
      rowId:''
    }
  },
  methods:{
    /*查询版本详细信息*/
    async queryData(id){
      this.param.content.sys_site_systempartitionid = id
      const res = await this.$api.requested(this.param)
      this.systemModule = res.data.systemapp
      this.currentPage = res.pageNumber
      this.total = res.total
    },
    onShow(){
      this.dialogVisible = true
      this.rowId = 0
      this.listData()
    },
    /*查询版本信息*/
    async listData(){
      const res = await this.$api.requested(this.versionParam)
      this.versionData = res.data
      this.currentPageVersion = res.pageNumber
      this.totalVersion = res.total
      this.$refs.singleTable.setCurrentRow(this.versionData[this.rowId])
      this.queryData(this.versionData[this.rowId].sys_site_systempartitionid)
      this.rowData = this.versionData[this.rowId]
    },
    /*新增版本*/
    addVersion(){
      this.versionData.push({
        "partitionname": "",
        "sys_site_systempartitionid": 0,
        "rowindex": this.versionData.length + 1,
        "systemappids": [

        ]
      })
      this.isSave = true
      this.index = this.versionData[this.versionData.length -1].rowindex
    },

    onEdit(val){
      if (this.versionData[this.versionData.length-1].partitionname === ''){
        this.$message.error('版本名称不能为空');
      }else {
        this.isSave = true
        this.index = val.rowindex
      }

    },
    async onSave(val){
      if (val.partitionname === ''){
        this.$message.error('版本名称不能为空');
      }else {
        const res = await this.$api.requested({
          "classname": "webmanage.site.systempartition",
          "method": "insertOrUpdate",
          "content": val
        })
        this.tool.showMessage(res,()=>{
          this.isSave = false
          this.index = ''
          this.listData()
        })
      }
    },
    /*删除版本*/
   onDel(id){
      this.$confirm('此操作将永久删除该版本, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        const res = await this.$api.requested({
          "classname": "webmanage.site.systempartition",
          "method": "delete",
          "content": {
            "sys_site_systempartitionid": id
          },
        })
        this.tool.showMessage(res,()=>{
          this.listData()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    /*删除版本明细模块*/
    async onModulesDel(val){
      const res = await this.$api.requested({
        "classname": "webmanage.site.systempartition",
        "method": "deleteMX",
        "content": {
          "sys_site_systempartitionid": this.rowData.sys_site_systempartitionid,
          "systemappids": [val.systemappid]
        },
      })
      this.tool.showMessage(res,()=>{
        this.listData()
      })
    },
    rowClick(val){
      this.queryData(val.sys_site_systempartitionid)
      this.rowData = val
      this.rowId = val.rowindex -1
    },
    onHandleCurrentChange(val){
      this.currentRow = val
    },
    addSuccess(){
      this.listData()
    }
  }
}
</script>

<style scoped>
 /deep/ .el-drawer__header {
   align-items: center;
   color: #333;
   display: flex;
   font-weight: 700!important;
   margin-bottom: 12px;
   margin-top: -12px;
 }
 .table-style{
   margin-top: 20px;
 }

</style>