yos_meida/src/SManagement/user/pay-orders/modules/add.vue

<template>
  <div>
    <el-button class="inline-24" type="primary" size="small"  @click="onShow">新建付费订单</el-button>
    <el-dialog
        title="新建付费订单"
        :visible.sync="dialogVisible"
        width="980px"
       >
      <el-row :gutter="20" style="margin-top: -20px">
        <el-col :span="24" v-if="payInstructions">
          <div class="pay_border">
            <span class="pay_font">付费说明：{{payInstructions}}</span>
          </div>
        </el-col>
        <el-col :span="24" class="div_top">
          <span style="color: red">*</span>
          <span>选择版本:</span>
        </el-col>
        <el-col :span="10" class="div_top">
          <el-table
              :data="versionList"
              height="300px"
              :cell-style="{height:'40px',color:'#666666',fontWeight:'400'}"
              :header-cell-style="{height:'40px',color:'#333',fontWeight:'400',fontSize:'14px',background:'#EEEEEE'}"
              @row-click="rowClick"
              style="width: 100%">
            <el-table-column
                prop="partitionname"
                label="版本名称"
                >
            </el-table-column>
            <el-table-column
                label="操作"
                width="120">
              <template slot-scope="scope">
                <input type="radio" :checked="scope.row.checkRow" @click="onCheck(scope.row)"></input>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="14" class="div_top">
          <el-table
              :data="modulesList"
              height="300px"
              :cell-style="{height:'40px',color:'#666666',fontWeight:'400'}"
              :header-cell-style="{height:'40px',color:'#333',fontWeight:'400',fontSize:'14px',background:'#EEEEEE'}"
              style="width: 100%">
            <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>

        </el-col>
        <el-col :span="24" class="div_top">
          <span style="color: red">*</span>
          <span>选择付费账号:</span>
        </el-col>
        <el-col :span="24" class="div_top" v-if="sys_payincidence == '1'">
          <tableLayout :layout="tablecolsAccount" :data="list"  :opwidth="200" :custom="true"  height="370px" fixedName="operation">
            <template v-slot:customcol="scope">
              <span v-if="scope.column.columnname === 'operation'" ></span>
              <span v-else-if="scope.column.columnname === 'enddate'">
                <span v-for="(item,index) in scope.column.data.enddate" :key="index">
                  <span v-if="form.sys_site_systempartitionid == index">{{item}}</span>
                </span>
              </span>
              <p v-else>{{scope.column.data[scope.column.columnname] || ''}}</p>
            </template>
            <template v-slot:opreation="scope">
              <el-checkbox :checked="scope.data.checkRow" @change="userCheck(scope.data)"></el-checkbox>
            </template>
          </tableLayout>
        </el-col>
        <el-col :span="24" class="div_top" v-else>
          <tableLayout :layout="tablecolsMain" :data="list"  :opwidth="200" :custom="true"  height="370px" fixedName="operation">
            <template v-slot:customcol="scope">
              <span v-if="scope.column.columnname === 'operation'" ></span>
              <span v-else-if="scope.column.columnname === 'enddate'">
                <span v-for="(item,index) in scope.column.data.enddate" :key="index">
                  <span v-if="form.sys_site_systempartitionid == index">{{item}}</span>
                </span>
              </span>
              <p v-else>{{scope.column.data[scope.column.columnname] || ''}}</p>
            </template>
            <template v-slot:opreation="scope">
              <el-checkbox :checked="scope.data.checkRow" @change="userCheck(scope.data)"></el-checkbox>
            </template>
          </tableLayout>
        </el-col>
        <el-col :span="24" class="div_top">
          <el-form :model="form"   ref="form" label-width="50px" label-position="right" size="mini">
            <el-form-item label="备注:" >
              <el-input v-model="form.remarks" placeholder="请输入备注内容"></el-input>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <span >共</span>
        <span style="color: red">{{accountNum}}</span>
         <span style="margin-right: 10px">个账号</span>
        <span >总价：</span>
        <span style="color: red;margin-right: 10px">¥{{amount}}</span>
        <el-button type="danger" @click="onSubmit">生成订单</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import tableLayout from '@/components/table/index2.vue'
export default {
  name: "add",
  data() {
    return {
      dialogVisible:false,
      versionList:[],
      modulesList:[],
      form:{
        "sys_site_systempartitionid": '',
        "orderno":'',
        "sys_payorderid": '',
        "remarks": "",
        "userids": []
      },
      tablecolsAccount:[],
      tablecolsMain:[],
      list:[],
      param:{
        "classname": "system.payorder.payorder",
        "method": "chooseUsers",
        "content": {
          "pageNumber": 1,
          "pageSize": 999,
          "where": {
            "condition": ""
          }
        },
      },
      payInstructions:'',
      sys_payincidence:'',
      userids:[],
      accountNum:0,
      amount:0,
      createNow:false
    }
  },
  components:{tableLayout},
  methods:{
    onShow(){
      this.dialogVisible = true
      this.queryVersion()
      this.queryAccount()
      this.queryInstructions()
      this.creatOrder()
    },
    /*新建订单*/
    async creatOrder(){
      const res = await this.$api.requested({
        "classname": "system.payorder.payorder",
        "method": "createOrder",
        "content": {},
      })
      this.form.sys_payorderid = res.data.sys_payorderid
      this.form.orderno = res.data.orderno
    },
    /*查询付费说明*/
    async queryInstructions(){
      const res = await this.$api.requested({
        "classname": "webmanage.site.site",
        "method": "querySite_Parameter",
        "content": {},
      })
      this.payInstructions = res.data.sys_payinstructions
      this.sys_payincidence = res.data.sys_payincidence
    },
    /*查询可选版本信息*/
    async queryVersion(){
      const res = await this.$api.requested({
        "classname": "system.payorder.payorder",
        "method": "chooseSystemPartition",
        "content": {
          "pageNumber": 1,
          "pageSize": 999,
          "where": {
            "condition": ""
          }
        },
      })
      this.versionList = res.data.map(item=>{
        return {
          partitionname:item.partitionname,
          rowindex:item.rowindex,
          sys_site_systempartitionid:item.sys_site_systempartitionid,
          systemapp:item.systemapp,
          systemappids:item.systemappids,
          checkRow:false
        }
      })
      this.versionList[0].checkRow = true
      this.modulesList = this.versionList[0].systemapp
      this.form.sys_site_systempartitionid = this.versionList[0].sys_site_systempartitionid
    },
    /*获取可选账号*/
    async queryAccount(){
      this.list = []
      const res = await this.$api.requested(this.param)
      this.list = res.data.map(item=>{
        return {
          accountno:item.accountno,
          agentname:item.agentname,
          enddate:item.enddate,
          isleader:item.isleader,
          phonenumber:item.phonenumber,
          rowindex:item.rowindex,
          sa_agentsid:item.sa_agentsid,
          userid:item.userid,
          checkRow:false
        }
      })
    },
    /*选择版本*/
    onCheck(val){
      this.versionList.forEach(item=>{
        if (item.sys_site_systempartitionid === val.sys_site_systempartitionid){
          item.checkRow = true
          this.form.sys_site_systempartitionid = item.sys_site_systempartitionid
        }else {
          item.checkRow = false
        }
        this.modulesList = val.systemapp
      })
      this.userids = []
     /* this.list.forEach(item=>{
        if (item.checkRow){
          item.checkRow = false
        }
      })
      console.log(this.list)*/
      this.queryAccount()
    },
    /*选择付费账号*/
    userCheck(val){
      this.userids = []
      val.checkRow ? this.list[val.index].checkRow = false : this.list[val.index].checkRow = true
      this.list.forEach(item=>{
        if (item.checkRow){
          this.userids.push({
            "isleader": item.isleader,
            "userid": item.userid,
            "sa_agentsid": item.sa_agentsid,
            "enddate": item.enddate
          })
        }
      })
      this.accountNum = this.userids.length
      this.queryPrice()
    },
    rowClick(val){
      this.onCheck(val)
    },
    onSubmit(){
      this.createNow = true
      this.queryPrice()
    },
    /*获取订单价格*/
    async queryPrice(){
      const res = await this.$api.requested({
        "classname": "system.payorder.payorder",
        "method": "insertUsers",
        "content": {
          "sys_site_systempartitionid": this.form.sys_site_systempartitionid,
          "sys_payorderid": this.form.sys_payorderid,
          "remarks": this.form.remarks,
          "users": this.userids
        },
      })
      this.amount = res.data.amount
      if (this.createNow){
        this.dialogVisible = false
        this.$emit('onSuccess',this.form.sys_payorderid,this.form.orderno)
      }

    }
  },
  created() {
    this.tablecolsAccount = this.tool.tabelCol(this.$route.name).accountTable.tablecols
    this.tablecolsMain = this.tool.tabelCol(this.$route.name).mainBodyTable.tablecols
  }
}
</script>

<style scoped>
 /deep/ .el-dialog__title {
   line-height: 24px;
   font-size: 16px;
   color: #303133;
   font-weight: bold;
 }
 .pay_border{
   background: #FFF9F2;
   height: 30px;
   vertical-align: center;
   line-height: 30px
 }
 .pay_font{
   color: #FA8C16;margin-left: 10px
 }
 .div_top{
   margin-top: 20px;
 }

</style>