|
|
@@ -0,0 +1,495 @@
|
|
|
+<script setup>
|
|
|
+import { Search } from '@element-plus/icons-vue'
|
|
|
+import dropdownText from '@/components/dropdown-text/index.vue'
|
|
|
+
|
|
|
+ const groupList=[{id:1,group:'家人组'},{id:2,group:'联合组'},{id:3,group:'摆烂组'}]
|
|
|
+ const serviceList=[{id:1,service:'大套餐'},{id:2,service:'小套餐'},{id:3,service:'策略'}]
|
|
|
+ const dateTypeList=[{id:1,type:'开票时间'},{id:2,type:'到款时间'}]
|
|
|
+
|
|
|
+ const searchParams=reactive({
|
|
|
+ current:1,
|
|
|
+ page_size:10,
|
|
|
+ keyWord:'',
|
|
|
+ group:'',
|
|
|
+ service:'',
|
|
|
+ start_date:'',
|
|
|
+ end_date:'',
|
|
|
+ dateType:1,
|
|
|
+ invoice:'',
|
|
|
+ placement:''
|
|
|
+ })
|
|
|
+ const searchDate=ref(null)
|
|
|
+ watch(searchDate,(newVal)=>{
|
|
|
+ if(newVal){
|
|
|
+ searchParams.start_date=newVal[0]
|
|
|
+ searchParams.end_date=newVal[1]
|
|
|
+ }else{
|
|
|
+ searchParams.start_date=''
|
|
|
+ searchParams.end_date=''
|
|
|
+ }
|
|
|
+ searchCommodityP()
|
|
|
+ })
|
|
|
+
|
|
|
+ const commodityPData=reactive({
|
|
|
+ tableData:[],
|
|
|
+ total:25,
|
|
|
+ rowMergeArray:[]
|
|
|
+ })
|
|
|
+
|
|
|
+ // method
|
|
|
+ const commodityPList=()=>{
|
|
|
+ console.log(searchParams);
|
|
|
+ }
|
|
|
+
|
|
|
+ const searchCommodityP=()=>{
|
|
|
+ searchParams.current=1
|
|
|
+ commodityPList()
|
|
|
+ }
|
|
|
+
|
|
|
+ const dateTypeCommand=(id)=>{
|
|
|
+ if(id == searchParams.dateType) return
|
|
|
+ searchParams.dateType=id
|
|
|
+ searchCommodityP()
|
|
|
+ // console.log(id);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 切换每页的数量
|
|
|
+ const changePageSize=(pageSize)=>{
|
|
|
+ searchParams.page_size = pageSize
|
|
|
+ commodityPList()
|
|
|
+ }
|
|
|
+ const changePageNo = (pageNo)=>{
|
|
|
+ searchParams.current = pageNo
|
|
|
+ commodityPList()
|
|
|
+ }
|
|
|
+ // 时间类型改变
|
|
|
+ const dateTypeChange=()=>{
|
|
|
+ if(!searchDate.value) return
|
|
|
+ searchCommodityP()
|
|
|
+ }
|
|
|
+
|
|
|
+ const dataExport=()=>{
|
|
|
+ console.log('导出');
|
|
|
+ }
|
|
|
+
|
|
|
+ const getRowMergeArray=()=>{
|
|
|
+ commodityPData.rowMergeArray=[]
|
|
|
+ let flag=0
|
|
|
+ commodityPData.tableData.map((item,index) =>{
|
|
|
+ if(index==0){
|
|
|
+ commodityPData.rowMergeArray.push(1)
|
|
|
+ }else{
|
|
|
+ if(item.companyName === commodityPData.tableData[index - 1].companyName){
|
|
|
+ commodityPData.rowMergeArray[flag] ++; //项目名称相同，合并到同一个数组中
|
|
|
+ commodityPData.rowMergeArray.push(0);
|
|
|
+ }else {
|
|
|
+ commodityPData.rowMergeArray.push(1);
|
|
|
+ flag = index;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ // 单元格合并
|
|
|
+ const cellMerge=({ row,column,rowIndex,columnIndex})=>{
|
|
|
+ // console.log({ row,column,rowIndex,columnIndex});
|
|
|
+ if([0,1,2,3].includes(columnIndex)){
|
|
|
+ const _row = commodityPData.rowMergeArray[rowIndex];
|
|
|
+ return {
|
|
|
+ rowspan: _row,
|
|
|
+ colspan: 1
|
|
|
+ };
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 自定义表格行的类名
|
|
|
+ const tableRowClassName=({ row, rowIndex })=>{
|
|
|
+ if (row.serialNumber%2 === 1) {
|
|
|
+ return 'back-color-row'
|
|
|
+ }
|
|
|
+ return ''
|
|
|
+ }
|
|
|
+
|
|
|
+ // -----------------------------------------------------弹窗
|
|
|
+ // ---------------------------------编辑付款方式
|
|
|
+ const payTypeArray=[{id:1,type:'年付'},{id:2,type:'半年付'},{id:3,type:'季付'},{id:4,type:'次付'}]
|
|
|
+ const editPayTypeRef=ref(null)
|
|
|
+ const editPayTypeDia=reactive({
|
|
|
+ diaShow:false,
|
|
|
+ form:{
|
|
|
+ payType:''
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ const editPayType=(row)=>{
|
|
|
+ editPayTypeDia.diaShow=true
|
|
|
+ editPayTypeDia.form.payType=''
|
|
|
+ setTimeout(()=>{
|
|
|
+ editPayTypeRef.value && editPayTypeRef.value.clearValidate()
|
|
|
+ },0)
|
|
|
+ }
|
|
|
+ // 提交
|
|
|
+ const editPayTypeSubmit=()=>{
|
|
|
+ console.log(editPayTypeDia.form);
|
|
|
+ editPayTypeRef.value.validate((valid)=>{
|
|
|
+ if(valid){
|
|
|
+ ElMessage.success('编辑成功')
|
|
|
+ editPayTypeDia.diaShow=false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ // ---------------------------------编辑付款方式
|
|
|
+ // --------------------------------设置套餐信息
|
|
|
+ const setServiceInfoDia=reactive({
|
|
|
+ diaShow:false,
|
|
|
+ dataFormList:[
|
|
|
+ {serviceId:1,serviceTitle:'大套餐',amount:0},
|
|
|
+ {serviceId:1,serviceTitle:'小套餐',amount:0},
|
|
|
+ {serviceId:1,serviceTitle:'海外报告',amount:0},
|
|
|
+ {serviceId:1,serviceTitle:'策略报告',amount:0},
|
|
|
+ {serviceId:1,serviceTitle:'财富管理',amount:0},
|
|
|
+ {serviceId:1,serviceTitle:'会展',amount:0},
|
|
|
+ {serviceId:1,serviceTitle:'赞助',amount:0},
|
|
|
+ {serviceId:1,serviceTitle:'调研门票',amount:0},
|
|
|
+ {serviceId:1,serviceTitle:'其他',amount:0}
|
|
|
+ ]
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+ const setServiceInfo=(row)=>{
|
|
|
+ setServiceInfoDia.diaShow=true
|
|
|
+ // setServiceInfoDia.form.payType=''
|
|
|
+ }
|
|
|
+
|
|
|
+ const serviceAmountChange=(item)=>{
|
|
|
+ // console.log(item);
|
|
|
+ if(!item.amount.trim()){
|
|
|
+ item.amount=0
|
|
|
+ return
|
|
|
+ }
|
|
|
+ let value = item.amount
|
|
|
+ if(!((value.endsWith('.') && value.indexOf('.')==(value.length-1)) ||
|
|
|
+ (value.endsWith('0') && value.indexOf('.')==(value.length-2)))){
|
|
|
+ item.amount = parseFloat(item.amount)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ const setServiceInfoSubmit=()=>{
|
|
|
+ console.log(setServiceInfoDia.dataFormList);
|
|
|
+ let totalAmout=0
|
|
|
+ setServiceInfoDia.dataFormList.map(item =>{
|
|
|
+ totalAmout= Math.round(item.amount*100 + totalAmout*100)/100
|
|
|
+ })
|
|
|
+ // console.log(totalAmout,'totalAmout');
|
|
|
+ ElMessage.success('设置套餐信息成功')
|
|
|
+ setServiceInfoDia.diaShow=false
|
|
|
+ }
|
|
|
+
|
|
|
+ // --------------------------------设置套餐信息
|
|
|
+ // -----------------------------------------------------弹窗
|
|
|
+
|
|
|
+
|
|
|
+ // created
|
|
|
+ commodityPList()
|
|
|
+ // getRowMergeArray()
|
|
|
+ const data=[{id:1,companyName:'哈哈',isNew:'是',date:'2022-01-01至2022-12-31',recordList:[
|
|
|
+ {invoiceDate:'12月29日',invoiceAmount:'10000.00',placementDate:'12月30日',
|
|
|
+ placementAmount:'3000.00',payType:'季付',seller:'张三',group:'销售组1',serviceInfo:'大套餐、小套餐、海外报告'},
|
|
|
+ {invoiceDate:'12月29日',invoiceAmount:'10000.00',placementDate:'',
|
|
|
+ placementAmount:'0',payType:'异常',seller:'张三',group:'销售组1',serviceInfo:'大套餐、小套餐、海外报告'}
|
|
|
+ ]},
|
|
|
+ {id:2,companyName:'哈哈',isNew:'是',date:'2022-01-01至2022-12-31',recordList:[
|
|
|
+ {invoiceDate:'12月29日',invoiceAmount:'10000.00',placementDate:'12月30日',
|
|
|
+ placementAmount:'3000.00',payType:'季付',seller:'张三',group:'销售组1',serviceInfo:'大套餐、小套餐、海外报告'},
|
|
|
+ {invoiceDate:'12月29日',invoiceAmount:'10000.00',placementDate:'12月30日',
|
|
|
+ placementAmount:'3000.00',payType:'季付',seller:'张三',group:'销售组1',serviceInfo:'大套餐、小套餐、海外报告'}
|
|
|
+ ]},
|
|
|
+ {id:3,companyName:'哈哈',isNew:'是',date:'2022-01-01至2022-12-31',recordList:[
|
|
|
+ {invoiceDate:'12月29日',invoiceAmount:'10000.00',placementDate:'12月30日',
|
|
|
+ placementAmount:'3000.00',payType:'季付',seller:'张三',group:'销售组1',serviceInfo:'大套餐、小套餐、海外报告'},
|
|
|
+ {invoiceDate:'12月29日',invoiceAmount:'10000.00',placementDate:'12月30日',
|
|
|
+ placementAmount:'3000.00',payType:'季付',seller:'张三',group:'销售组1',serviceInfo:'大套餐、小套餐、海外报告'}
|
|
|
+ ]},
|
|
|
+ {id:4,companyName:'哈哈',isNew:'是',date:'2022-01-01至2022-12-31',recordList:[
|
|
|
+ {invoiceDate:'12月29日',invoiceAmount:'10000.00',placementDate:'12月30日',
|
|
|
+ placementAmount:'3000.00',payType:'季付',seller:'张三',group:'销售组1',serviceInfo:'大套餐、小套餐、海外报告'},
|
|
|
+ {invoiceDate:'12月29日',invoiceAmount:'10000.00',placementDate:'12月30日',
|
|
|
+ placementAmount:'3000.00',payType:'季付',seller:'张三',group:'销售组1',serviceInfo:'大套餐、小套餐、海外报告'}
|
|
|
+ ]},
|
|
|
+ {id:5,companyName:'哈哈',isNew:'是',date:'2022-01-01至2022-12-31',recordList:[
|
|
|
+ {invoiceDate:'12月29日',invoiceAmount:'10000.00',placementDate:'12月30日',
|
|
|
+ placementAmount:'3000.00',payType:'季付',seller:'张三',group:'销售组1',serviceInfo:'大套餐、小套餐、海外报告'},
|
|
|
+ {invoiceDate:'12月29日',invoiceAmount:'10000.00',placementDate:'12月30日',
|
|
|
+ placementAmount:'3000.00',payType:'季付',seller:'张三',group:'销售组1',serviceInfo:'大套餐、小套餐、海外报告'}
|
|
|
+ ]},
|
|
|
+ {id:6,companyName:'哈哈',isNew:'是',date:'2022-01-01至2022-12-31',recordList:[
|
|
|
+ {invoiceDate:'12月29日',invoiceAmount:'10000.00',placementDate:'12月30日',
|
|
|
+ placementAmount:'3000.00',payType:'季付',seller:'张三',group:'销售组1',serviceInfo:'大套餐、小套餐、海外报告'}
|
|
|
+ ]},
|
|
|
+ {id:7,companyName:'哈哈',isNew:'是',date:'2022-01-01至2022-12-31',recordList:[
|
|
|
+ {invoiceDate:'12月29日',invoiceAmount:'10000.00',placementDate:'12月30日',
|
|
|
+ placementAmount:'3000.00',payType:'季付',seller:'张三',group:'销售组1',serviceInfo:'大套餐、小套餐、海外报告'},
|
|
|
+ {invoiceDate:'12月29日',invoiceAmount:'10000.00',placementDate:'',
|
|
|
+ placementAmount:'0',payType:'异常',seller:'张三',group:'销售组1',serviceInfo:'大套餐、小套餐、海外报告'},
|
|
|
+ {invoiceDate:'12月29日',invoiceAmount:'10000.00',placementDate:'12月30日',
|
|
|
+ placementAmount:'3000.00',payType:'季付',seller:'张三',group:'销售组1',serviceInfo:'大套餐、小套餐、海外报告'}
|
|
|
+ ]},
|
|
|
+ {id:8,companyName:'哈哈',isNew:'是',date:'2022-01-01至2022-12-31',recordList:[
|
|
|
+ {invoiceDate:'12月29日',invoiceAmount:'10000.00',placementDate:'12月30日',
|
|
|
+ placementAmount:'3000.00',payType:'季付',seller:'张三',group:'销售组1',serviceInfo:'大套餐、小套餐、海外报告'},
|
|
|
+ {invoiceDate:'12月29日',invoiceAmount:'10000.00',placementDate:'12月30日',
|
|
|
+ placementAmount:'3000.00',payType:'季付',seller:'张三',group:'销售组1',serviceInfo:'大套餐、小套餐、海外报告'}
|
|
|
+ ]},
|
|
|
+ {id:9,companyName:'哈哈',isNew:'是',date:'2022-01-01至2022-12-31',recordList:[
|
|
|
+ {invoiceDate:'12月29日',invoiceAmount:'10000.00',placementDate:'12月30日',
|
|
|
+ placementAmount:'3000.00',payType:'季付',seller:'张三',group:'销售组1',serviceInfo:'大套餐、小套餐、海外报告'},
|
|
|
+ {invoiceDate:'12月29日',invoiceAmount:'10000.00',placementDate:'12月30日',
|
|
|
+ placementAmount:'3000.00',payType:'季付',seller:'张三',group:'销售组1',serviceInfo:'大套餐、小套餐、海外报告'}
|
|
|
+ ]},
|
|
|
+ {id:10,companyName:'哈哈',isNew:'是',date:'2022-01-01至2022-12-31',recordList:[
|
|
|
+ {invoiceDate:'12月29日',invoiceAmount:'10000.00',placementDate:'12月30日',
|
|
|
+ placementAmount:'3000.00',payType:'季付',seller:'张三',group:'销售组1',serviceInfo:'大套餐、小套餐、海外报告'},
|
|
|
+ {invoiceDate:'12月29日',invoiceAmount:'10000.00',placementDate:'12月30日',
|
|
|
+ placementAmount:'3000.00',payType:'季付',seller:'张三',group:'销售组1',serviceInfo:'大套餐、小套餐、海外报告'}
|
|
|
+ ]},
|
|
|
+ {id:11,companyName:'哈哈',isNew:'是',date:'2022-01-01至2022-12-31',recordList:[
|
|
|
+ {invoiceDate:'12月29日',invoiceAmount:'10000.00',placementDate:'12月30日',
|
|
|
+ placementAmount:'3000.00',payType:'季付',seller:'张三',group:'销售组1',serviceInfo:'大套餐、小套餐、海外报告'},
|
|
|
+ {invoiceDate:'12月29日',invoiceAmount:'10000.00',placementDate:'12月30日',
|
|
|
+ placementAmount:'3000.00',payType:'季付',seller:'张三',group:'销售组1',serviceInfo:'大套餐、小套餐、海外报告'}
|
|
|
+ ]}]
|
|
|
+
|
|
|
+ data.map((item,index) =>{
|
|
|
+ commodityPData.rowMergeArray.push(item.recordList.length)
|
|
|
+ item.recordList.map((it,ind) =>{
|
|
|
+ if(ind-1>=0){
|
|
|
+ commodityPData.rowMergeArray.push(0)
|
|
|
+ }
|
|
|
+ commodityPData.tableData.push({
|
|
|
+ serialNumber:searchParams.page_size*(searchParams.current-1)+index+1,
|
|
|
+ id:item.id,companyName:item.companyName,isNew:item.isNew,date:item.date,
|
|
|
+ invoiceDate:it.invoiceDate,invoiceAmount:it.invoiceAmount,placementDate:it.placementDate,
|
|
|
+ placementAmount:it.placementAmount,payType:it.payType,seller:it.seller,
|
|
|
+ group:it.group,serviceInfo:it.serviceInfo
|
|
|
+ })
|
|
|
+ })
|
|
|
+ })
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <div id="commodity-payment-container" class="commodity-payment-container">
|
|
|
+ <div class="search-zone">
|
|
|
+ <el-input v-model="searchParams.keyWord" placeholder="请输入客户名称/销售"
|
|
|
+ @input="searchCommodityP" :prefix-icon="Search" style="width: 286px;margin: 0 30px 10px 0;" ></el-input>
|
|
|
+ <el-select v-model="searchParams.group" placeholder="请选择销售组别" clearable style="width: 240px;margin: 0 30px 10px 0;"
|
|
|
+ @change="searchCommodityP">
|
|
|
+ <el-option :label="item.group" :value="item.id" v-for="item in groupList"></el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-select v-model="searchParams.service" placeholder="请选择套餐信息" clearable style="width: 240px;margin: 0 30px 10px 0;"
|
|
|
+ @change="searchCommodityP">
|
|
|
+ <el-option :label="item.service" :value="item.id" v-for="item in serviceList"></el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-date-picker v-model="searchDate" type="daterange" style="max-width: 240px;margin: 0 20px 10px 0;"
|
|
|
+ value-format="YYYY-MM-DD" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
|
|
|
+ <!-- <el-select v-model="searchParams.dateType" placeholder="请选择日期类型" @change="dateTypeChange">
|
|
|
+ <el-option :label="item.type" :value="item.id" v-for="item in dateTypeList"></el-option>
|
|
|
+ </el-select> -->
|
|
|
+ <el-dropdown size="large" trigger="click" style="margin:0 60px 10px 0;" @command="dateTypeCommand">
|
|
|
+ <dropdownText>
|
|
|
+ {{dateTypeList.find(it => it.id==searchParams.dateType).type}}
|
|
|
+ </dropdownText>
|
|
|
+ <template #dropdown>
|
|
|
+ <el-dropdown-menu>
|
|
|
+ <el-dropdown-item :command="item.id" v-for="item in dateTypeList" :key="item.id">{{ item.type }}</el-dropdown-item>
|
|
|
+ </el-dropdown-menu>
|
|
|
+ </template>
|
|
|
+ </el-dropdown>
|
|
|
+ <div class="search-checkbox" >
|
|
|
+ <el-checkbox label="已开票" v-model="searchParams.invoice" @change="searchCommodityP"></el-checkbox>
|
|
|
+ <el-checkbox el-checkbox label="已到款" v-model="searchParams.placement" @change="searchCommodityP"></el-checkbox>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="operation-zone">
|
|
|
+ <div class="amount-show-zone">
|
|
|
+ <div class="amount-show-item" style="margin-right: 30px;">
|
|
|
+ 开票合计金额：
|
|
|
+ <span>80000.00</span>
|
|
|
+ </div>
|
|
|
+ <div class="amount-show-item">
|
|
|
+ 到款合计金额：
|
|
|
+ <span>80000.00</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-button @click="dataExport" size="large" class="element-common-button">导出</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="table-zone">
|
|
|
+ <el-table :data="commodityPData.tableData" border ref="tableRef"
|
|
|
+ max-height="600" :row-class-name="tableRowClassName" :span-method="cellMerge">
|
|
|
+ <el-table-column label="序号" align="center" prop="serialNumber" >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="客户名称" prop="companyName" align="center" show-overflow-tooltip ></el-table-column>
|
|
|
+ <el-table-column label="是否新客户" prop="isNew" align="center"></el-table-column>
|
|
|
+ <el-table-column label="合同有效期" prop="date" align="center" show-overflow-tooltip ></el-table-column>
|
|
|
+ <el-table-column label="开票日" prop="invoiceDate" align="center" id="spc-column"></el-table-column>
|
|
|
+ <el-table-column label="开票金额" prop="invoiceAmount" align="center"></el-table-column>
|
|
|
+ <el-table-column label="到款日" prop="placementDate" align="center"></el-table-column>
|
|
|
+ <el-table-column label="到款金额" prop="placementAmount" align="center"></el-table-column>
|
|
|
+ <el-table-column label="付款方式" prop="payType" align="center">
|
|
|
+ <template #default="{row}">
|
|
|
+ <span v-if="row.payType!='异常'">{{ row.payType }}</span>
|
|
|
+ <span v-else @click="editPayType(row)"
|
|
|
+ style="cursor: pointer;display: flex;align-items: center;justify-content: center;">
|
|
|
+ <span style="color: var(--dangerColor);">{{ row.payType }}</span>
|
|
|
+ <el-icon :size="20"
|
|
|
+ style="position: absolute;right: 0;top: 50%;transform: translateX(-50%) translateY(-50%);"><Edit /></el-icon>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="销售" prop="seller" align="center"></el-table-column>
|
|
|
+ <el-table-column label="组别" prop="group" align="center"></el-table-column>
|
|
|
+ <el-table-column label="套餐信息" prop="serviceInfo" align="center">
|
|
|
+ <template #default="{row}">
|
|
|
+ <span v-if="row.placementAmount&&row.placementAmount!=0" @click="setServiceInfo"
|
|
|
+ style="cursor: pointer;color: var(--themeColor);">{{ row.serviceInfo }}</span>
|
|
|
+ <span v-else style="color: #666;">{{ row.serviceInfo }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <template #empty>
|
|
|
+ <div class="table-no-data">
|
|
|
+ <img src="@/assets/img/icon/empty-data.png" />
|
|
|
+ <span>暂无数据</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table>
|
|
|
+ <!-- 分页 -->
|
|
|
+ <m-page :pageSize="searchParams.page_size" :page_no="searchParams.current"
|
|
|
+ style="display: flex;justify-content: flex-end;margin-top: 20px;"
|
|
|
+ :total="commodityPData.total" @handleCurrentChange="changePageNo" @handleSizeChange="changePageSize"/>
|
|
|
+ </div>
|
|
|
+ <!-- 编辑付款方式弹窗 -->
|
|
|
+ <el-dialog title="编辑付款方式" v-model="editPayTypeDia.diaShow" width="492"
|
|
|
+ :close-on-click-modal="false">
|
|
|
+ <el-form :model="editPayTypeDia.form" ref="editPayTypeRef" style="display: flex;justify-self: center">
|
|
|
+ <el-form-item label="付款方式" prop="payType" :rules="{required:true,message:'请选择付款方式',trigger:'change'}">
|
|
|
+ <el-select v-model="editPayTypeDia.form.payType" placeholder="请选择付款方式" style="width: 286px;">
|
|
|
+ <el-option :label="item.type" :value="item.id" v-for="item in payTypeArray" :key="item.id"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <div style="padding: 10px 0;">
|
|
|
+ <el-button @click="editPayTypeDia.diaShow = false">取消</el-button>
|
|
|
+ <el-button type="primary" @click="editPayTypeSubmit">
|
|
|
+ 确定
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <!-- 设置套餐信息弹窗 -->
|
|
|
+ <el-dialog title="套餐信息" v-model="setServiceInfoDia.diaShow" width="774"
|
|
|
+ :close-on-click-modal="false">
|
|
|
+ <div class="serviceInf-table" :style="{'height':Math.ceil(setServiceInfoDia.dataFormList.length/2)*50+'px'}">
|
|
|
+ <div class="serviceInf-table-item" v-for="item in setServiceInfoDia.dataFormList" :key="item.serviceId">
|
|
|
+ <div class="serviceInfo-label">{{ item.serviceTitle }}</div>
|
|
|
+ <div class=" serviceInfo-label serviceInfo-input" id="serviceInfo-input">
|
|
|
+ <el-input v-model="item.amount" placeholder="请输入金额" style="width: 124px;height: 28px;" @input="serviceAmountChange(item)"></el-input>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="serviceInf-table-item" v-show="setServiceInfoDia.dataFormList.length%2!=0">
|
|
|
+ <div class="serviceInfo-label"></div>
|
|
|
+ <div class=" serviceInfo-label serviceInfo-input" id="serviceInfo-input">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <template #footer>
|
|
|
+ <div style="padding: 10px 0;">
|
|
|
+ <el-button @click="setServiceInfoDia.diaShow = false">取消</el-button>
|
|
|
+ <el-button type="primary" @click="setServiceInfoSubmit">
|
|
|
+ 确定
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ #commodity-payment-container{
|
|
|
+ min-height: 100%;
|
|
|
+ .search-zone{
|
|
|
+ margin-bottom: 20px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ .search-checkbox{
|
|
|
+ // margin-left: 60px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ height: 40px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .operation-zone{
|
|
|
+ margin-bottom: 20px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ .amount-show-zone{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding-left: 20px;
|
|
|
+ .amount-show-item{
|
|
|
+ span{
|
|
|
+ color: $dangerColor;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .serviceInf-table{
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 644px;
|
|
|
+ // height: 200px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ border-top: solid 1px $auxiliaryColor ;
|
|
|
+ border-left: solid 1px $auxiliaryColor ;
|
|
|
+ .serviceInf-table-item{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .serviceInfo-label{
|
|
|
+ width: 140px;
|
|
|
+ height: 50px;
|
|
|
+ border-right: solid 1px $auxiliaryColor ;
|
|
|
+ border-bottom: solid 1px $auxiliaryColor ;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 10px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ .serviceInfo-input{
|
|
|
+ width: 182px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
|
|
+<style lang="scss">
|
|
|
+#commodity-payment-container{
|
|
|
+ #serviceInfo-input{
|
|
|
+ .el-input__wrapper{
|
|
|
+ height: 28px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// .dropdown-text{
|
|
|
+// &:hover{
|
|
|
+// background-color: #c4b565;
|
|
|
+// border-color: #c4b565;
|
|
|
+// }
|
|
|
+// }
|
|
|
+
|
|
|
+</style>
|
hbchen
