|
|
@@ -1,7 +1,7 @@
|
|
|
<template>
|
|
|
<div class="borderless">
|
|
|
- <div class="customer-head">
|
|
|
- <div class="customer-back">
|
|
|
+ <div class="main-head">
|
|
|
+ <div class="main-back">
|
|
|
<el-button type="danger" style="border: none;background: none;color: red" icon="el-icon-arrow-left"
|
|
|
@click="backToList">返回列表
|
|
|
</el-button>
|
|
|
@@ -15,15 +15,14 @@
|
|
|
<el-col v-for="(item, index) in basicData.column" :span="item.span?item.span:6" :key="index">
|
|
|
<el-form-item :label="item.label" :prop="item.prop" :rules="item.rules">
|
|
|
<el-date-picker v-if="item.type === 'datetime'" style="width: 100%;" v-model="form[item.prop]" size="small" type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss"/>
|
|
|
+ <el-date-picker v-else-if="item.type === 'date'" style="width: 100%;" v-model="form[item.prop]" size="small" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"/>
|
|
|
<el-select v-else-if="item.type === 'select'" style="width: 100%" size="small" placeholder="请选择" clearable filterable></el-select>
|
|
|
+ <el-input type="text" v-else-if="item.prop === 'prop5'" v-else v-model="form[item.prop]" size="small" placeholder="请输入">
|
|
|
+ <el-button slot="append" icon="el-icon-search" @click="customerDialog = true"></el-button>
|
|
|
+ </el-input>
|
|
|
<el-input type="age" v-else v-model="form[item.prop]" size="small" autocomplete="off" placeholder="请输入"></el-input>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
- <el-col>
|
|
|
- <el-form-item>
|
|
|
- <el-button type="info" style="float: right" @click="">生成账单</el-button>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
</el-row>
|
|
|
</el-form>
|
|
|
</basic-container>
|
|
|
@@ -35,6 +34,7 @@
|
|
|
:option="optionTable"
|
|
|
:page.sync="page"
|
|
|
:table-loading="loading"
|
|
|
+ v-model="optionFrom"
|
|
|
@row-del="rowDel"
|
|
|
@row-save="rowSave"
|
|
|
@size-change="sizeChange"
|
|
|
@@ -50,7 +50,7 @@
|
|
|
size="small"
|
|
|
icon="el-icon-plus"
|
|
|
plain
|
|
|
- @click="">新增明细
|
|
|
+ @click="serviceDialog = true">新增明细
|
|
|
</el-button>
|
|
|
<el-button type="primary"
|
|
|
size="small"
|
|
|
@@ -85,18 +85,113 @@
|
|
|
</avue-crud>
|
|
|
</basic-container>
|
|
|
</div>
|
|
|
+ <el-dialog
|
|
|
+ title="选择客户"
|
|
|
+ append-to-body
|
|
|
+ class="el-dialogDeep"
|
|
|
+ :visible.sync="customerDialog"
|
|
|
+ width="70%"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ :destroy-on-close="true"
|
|
|
+ :close-on-press-escape="false">
|
|
|
+ <el-row style="height: 0;">
|
|
|
+ <el-col :span="5" >
|
|
|
+ <div>
|
|
|
+ <el-scrollbar>
|
|
|
+ <basic-container>
|
|
|
+ <avue-tree :option="customerTreeOption" @node-click="customerNodeClick"/>
|
|
|
+ </basic-container>
|
|
|
+ </el-scrollbar>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="19">
|
|
|
+ <basic-container>
|
|
|
+ <avue-crud ref="customerCrud"
|
|
|
+ :page.sync="customerPage"
|
|
|
+ :search.sync="customerSearch"
|
|
|
+ :option="customerOption"
|
|
|
+ :table-loading="customerLoading"
|
|
|
+ :data="customerData"
|
|
|
+ @row-dblclick="customerConfirm"
|
|
|
+ @refresh-change="customerRefreshChange"
|
|
|
+ @selection-change="customerSelectionChange"
|
|
|
+ @search-change="customerSearchChange"
|
|
|
+ @on-load="customerOnLoad">
|
|
|
+ </avue-crud>
|
|
|
+ </basic-container>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button type="primary" @click="customerConfirm('confirm')" :disabled="this.customerSelectList.length == 0|| this.customerSelectList.length >1">确 定</el-button>
|
|
|
+ <el-button @click="customerDialog = false">取 消</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+ <el-dialog
|
|
|
+ title="导入服务项目"
|
|
|
+ append-to-body
|
|
|
+ class="el-dialogDeep"
|
|
|
+ :visible.sync="serviceDialog"
|
|
|
+ width="70%"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ :destroy-on-close="true"
|
|
|
+ :close-on-press-escape="false">
|
|
|
+ <el-row style="height: 0;">
|
|
|
+ <el-col :span="5" >
|
|
|
+ <div>
|
|
|
+ <el-scrollbar>
|
|
|
+ <basic-container>
|
|
|
+ <avue-tree :option="serviceTreeOption" @node-click="serviceNodeClick"/>
|
|
|
+ </basic-container>
|
|
|
+ </el-scrollbar>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="19">
|
|
|
+ <basic-container>
|
|
|
+ <avue-crud ref="customerCrud"
|
|
|
+ :page.sync="servicePage"
|
|
|
+ :search.sync="serviceSearch"
|
|
|
+ :option="serviceOption"
|
|
|
+ :table-loading="serviceLoading"
|
|
|
+ :data="serviceData"
|
|
|
+ @refresh-change="serviceRefreshChange"
|
|
|
+ @selection-change="serviceSelectionChange"
|
|
|
+ @search-change="serviceSearchChange"
|
|
|
+ @on-load="serviceOnLoad">
|
|
|
+ </avue-crud>
|
|
|
+ </basic-container>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button type="primary" @click="serviceConfirm()" :disabled="this.serviceSelectList.length == 0">导 入</el-button>
|
|
|
+ <el-button @click="serviceDialog = false">取 消</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import option from "./configuration/detailsPage.json";
|
|
|
+ //客户列表接口
|
|
|
+ import {customerList, getDeptLazyTree} from "@/api/basicData/customerInformation"
|
|
|
+ import customerOption from "./configuration/customerDialogList.json";
|
|
|
+ //服务列表接口
|
|
|
+ import {getServiceProjectList,getServiceTypeTree,} from "@/api/workManagement/serviceProject";
|
|
|
+ import serviceOption from "./configuration/serviceDialogList.json";
|
|
|
+
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
loading: false,
|
|
|
form:{},
|
|
|
+ optionFrom:{},
|
|
|
data: [],
|
|
|
- optionTable: option,
|
|
|
+ customerDialog:false,//客户名称窗口
|
|
|
+ serviceDialog:false,//服务导入窗口
|
|
|
+ page: {
|
|
|
+ currentPage: 1,
|
|
|
+ total: 0,
|
|
|
+ pageSize: 10
|
|
|
+ },
|
|
|
//顶部from数据
|
|
|
basicData: {
|
|
|
column: [
|
|
|
@@ -105,27 +200,6 @@
|
|
|
prop: 'prop1',
|
|
|
rules: [
|
|
|
{
|
|
|
- required: false,
|
|
|
- message: ' ',
|
|
|
- trigger: 'blur'
|
|
|
- }
|
|
|
- ]
|
|
|
- }, {
|
|
|
- label: '制单日期',
|
|
|
- prop: 'prop2',
|
|
|
- rules: [
|
|
|
- {
|
|
|
- required: true,
|
|
|
- message: ' ',
|
|
|
- trigger: 'blur'
|
|
|
- }
|
|
|
- ]
|
|
|
- }, {
|
|
|
- label: '制单人',
|
|
|
- prop: 'prop3',
|
|
|
- data: [],
|
|
|
- rules: [
|
|
|
- {
|
|
|
required: true,
|
|
|
message: ' ',
|
|
|
trigger: 'blur'
|
|
|
@@ -162,57 +236,39 @@
|
|
|
trigger: 'blur'
|
|
|
}
|
|
|
]
|
|
|
+ },{
|
|
|
+ label: '制单人',
|
|
|
+ prop: 'prop3',
|
|
|
+ data: []
|
|
|
+ }, {
|
|
|
+ label: '制单日期',
|
|
|
+ prop: 'prop2'
|
|
|
}, {
|
|
|
label: '责任人',
|
|
|
prop: 'prop6',
|
|
|
- data: [],
|
|
|
- rules: [
|
|
|
- {
|
|
|
- required: true,
|
|
|
- message: ' ',
|
|
|
- trigger: 'blur'
|
|
|
- }
|
|
|
- ]
|
|
|
- }, {
|
|
|
- label: '电话',
|
|
|
- prop: 'prop7',
|
|
|
- data: [],
|
|
|
- rules: [
|
|
|
- {
|
|
|
- required: true,
|
|
|
- message: ' ',
|
|
|
- trigger: 'blur'
|
|
|
- }
|
|
|
- ]
|
|
|
+ data: []
|
|
|
}, {
|
|
|
label: '承揽人',
|
|
|
prop: 'prop8',
|
|
|
- data: [],
|
|
|
- rules: [
|
|
|
- {
|
|
|
- required: true,
|
|
|
- message: ' ',
|
|
|
- trigger: 'blur'
|
|
|
- }
|
|
|
- ]
|
|
|
+ data: []
|
|
|
}, {
|
|
|
label: '合同金额',
|
|
|
prop: 'prop8',
|
|
|
rules: [
|
|
|
{
|
|
|
- required: true,
|
|
|
- message: ' ',
|
|
|
+ pattern: /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/,
|
|
|
+ message: '请输入数字或小数，且小数位不超过两位',
|
|
|
trigger: 'blur'
|
|
|
}
|
|
|
]
|
|
|
},
|
|
|
{
|
|
|
- label: '预收金额',
|
|
|
+ label: '应收金额',
|
|
|
prop: 'prop9',
|
|
|
rules: [
|
|
|
{
|
|
|
- required: true,
|
|
|
- message: ' ',
|
|
|
+ pattern: /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/,
|
|
|
+ message: '请输入数字或小数，且小数位不超过两位',
|
|
|
trigger: 'blur'
|
|
|
}
|
|
|
]
|
|
|
@@ -222,68 +278,131 @@
|
|
|
prop: 'prop10',
|
|
|
rules: [
|
|
|
{
|
|
|
- required: true,
|
|
|
- message: ' ',
|
|
|
+ pattern: /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/,
|
|
|
+ message: '请输入数字或小数，且小数位不超过两位',
|
|
|
trigger: 'blur'
|
|
|
}
|
|
|
]
|
|
|
},
|
|
|
{
|
|
|
- label: '开始日期',
|
|
|
- prop: 'prop11',
|
|
|
- type:'datetime',
|
|
|
+ label: '收款方式',
|
|
|
+ prop: 'prop13',
|
|
|
+ type:'select',
|
|
|
+ dataType: "number",
|
|
|
+ width: 120,
|
|
|
+ dicUrl: "/api/blade-system/dict/dictionary?code=payment_term",
|
|
|
+ props: {
|
|
|
+ label: "dictValue",
|
|
|
+ value: "dictKey"
|
|
|
+ },
|
|
|
rules: [
|
|
|
{
|
|
|
required: true,
|
|
|
- message: ' ',
|
|
|
+ message: '请选择收款方式',
|
|
|
trigger: 'blur'
|
|
|
}
|
|
|
- ]
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '开始日期',
|
|
|
+ prop: 'prop11',
|
|
|
+ type:'date',
|
|
|
},
|
|
|
{
|
|
|
label: '结束日期',
|
|
|
prop: 'prop12',
|
|
|
- type:'datetime',
|
|
|
- rules: [
|
|
|
- {
|
|
|
- required: true,
|
|
|
- message: ' ',
|
|
|
- trigger: 'blur'
|
|
|
- }
|
|
|
- ]
|
|
|
+ type:'date',
|
|
|
},
|
|
|
{
|
|
|
- label: '收款方式',
|
|
|
- prop: 'prop13',
|
|
|
- type:'select',
|
|
|
- rules: [
|
|
|
- {
|
|
|
- required: true,
|
|
|
- message: ' ',
|
|
|
- trigger: 'blur'
|
|
|
- }
|
|
|
- ]
|
|
|
+ label: '电话',
|
|
|
+ prop: 'prop7',
|
|
|
+ data: [],
|
|
|
},
|
|
|
{
|
|
|
label: '备注',
|
|
|
- prop: 'prop8',
|
|
|
- rules: [
|
|
|
- {
|
|
|
- required: true,
|
|
|
- message: ' ',
|
|
|
- trigger: 'blur'
|
|
|
- }
|
|
|
- ]
|
|
|
+ prop: 'prop8'
|
|
|
}
|
|
|
],
|
|
|
},
|
|
|
- page: {
|
|
|
+ optionTable: option,
|
|
|
+ //客户窗口定义
|
|
|
+ customerTreeOption: {
|
|
|
+ nodeKey: 'id',
|
|
|
+ lazy: true,
|
|
|
+ treeLoad: function (node, resolve) {
|
|
|
+ const parentId = (node.level === 0) ? 0 : node.data.id;
|
|
|
+ getDeptLazyTree(parentId).then(res => {
|
|
|
+ resolve(res.data.data.map(item => {
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ leaf: !item.hasChildren
|
|
|
+ }
|
|
|
+ }))
|
|
|
+ });
|
|
|
+ },
|
|
|
+ addBtn: false,
|
|
|
+ menu: false,
|
|
|
+ size: 'small',
|
|
|
+ props: {
|
|
|
+ labelText: '标题',
|
|
|
+ label: 'title',
|
|
|
+ value: 'value',
|
|
|
+ children: 'children'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ customerOption:customerOption,
|
|
|
+ customerLoading:false,
|
|
|
+ customerData:[],
|
|
|
+ customerPage:{
|
|
|
+ currentPage: 1,
|
|
|
+ total: 0,
|
|
|
+ pageSize: 10},
|
|
|
+ customerSearch:{},
|
|
|
+ customerTreeDeptId:"",
|
|
|
+ customerSelectList:[],
|
|
|
+ //服务窗口定义
|
|
|
+ serviceTreeOption: {
|
|
|
+ nodeKey: 'id',
|
|
|
+ lazy: true,
|
|
|
+ treeLoad: function(node, resolve) {
|
|
|
+ const parentId = node.level === 0 ? 0 : node.data.id;
|
|
|
+ getServiceTypeTree(parentId).then(res => {
|
|
|
+ resolve(
|
|
|
+ res.data.data.map(item => {
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ leaf: !item.hasChildren
|
|
|
+ };
|
|
|
+ })
|
|
|
+ );
|
|
|
+ });
|
|
|
+ },
|
|
|
+ addBtn: false,
|
|
|
+ menu: false,
|
|
|
+ size: 'small',
|
|
|
+ props: {
|
|
|
+ labelText: '标题',
|
|
|
+ label: 'title',
|
|
|
+ value: 'value',
|
|
|
+ children: 'children'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ serviceOption:serviceOption,
|
|
|
+ serviceLoading:false,
|
|
|
+ serviceData:[],
|
|
|
+ servicePage:{
|
|
|
currentPage: 1,
|
|
|
total: 0,
|
|
|
pageSize: 10
|
|
|
- }
|
|
|
+ },
|
|
|
+ serviceSearch:{},
|
|
|
+ serviceTreeDeptId:"",
|
|
|
+ serviceSelectList:[],
|
|
|
};
|
|
|
},
|
|
|
+ mounted() {
|
|
|
+ option.height = window.innerHeight - 760 ;
|
|
|
+ },
|
|
|
methods: {
|
|
|
//删除列表后面的删除按钮触发触发(row, index, done)
|
|
|
rowDel(row, index, done) {
|
|
|
@@ -370,13 +489,82 @@
|
|
|
path: '/workManagement/main-items/list',
|
|
|
query: {}
|
|
|
});
|
|
|
+ },
|
|
|
+ //客户窗口事件
|
|
|
+ customerNodeClick(data) {
|
|
|
+ this.customerTreeDeptId = data.id;
|
|
|
+ this.customerOnLoad(this.customerPage);
|
|
|
+ },
|
|
|
+ customerRefreshChange(){
|
|
|
+ this.customerOnLoad(this.customerPage, this.customerSearch)
|
|
|
+ },
|
|
|
+ customerSearchChange(params, done){
|
|
|
+ this.customerOnLoad(this.customerPage, params)
|
|
|
+ done();
|
|
|
+ },
|
|
|
+ customerSelectionChange(row){
|
|
|
+ this.customerSelectList = row;
|
|
|
+ },
|
|
|
+ customerOnLoad(page, params = {parentId:0}) {
|
|
|
+ this.customerLoading = true;
|
|
|
+ let queryParams = Object.assign({}, params, {size: page.pageSize, current: page.currentPage,corpsTypeId:this.customerTreeDeptId})
|
|
|
+ customerList(queryParams).then(res => {
|
|
|
+ this.customerData = res.data.data.records
|
|
|
+ this.customerPage.total = res.data.data.total
|
|
|
+ this.customerLoading = false;
|
|
|
+ })
|
|
|
+ },
|
|
|
+ customerConfirm(row){
|
|
|
+ if(row!='confirm'){
|
|
|
+ this.$set(this.form,"prop5",row.cname)
|
|
|
+ }else{
|
|
|
+ this.$set(this.form,"prop5",this.customerSelectList[0].cname)
|
|
|
+ }
|
|
|
+ this.customerDialog = false;
|
|
|
+ },
|
|
|
+ //服务窗口事件
|
|
|
+ serviceNodeClick(data) {
|
|
|
+ this.serviceTreeDeptId = data.id;
|
|
|
+ this.serviceOnLoad(this.servicePage);
|
|
|
+ },
|
|
|
+ serviceRefreshChange(){
|
|
|
+ this.serviceOnLoad(this.servicePage, this.serviceSearch)
|
|
|
+ },
|
|
|
+ serviceSearchChange(params, done){
|
|
|
+ this.serviceOnLoad(this.servicePage, params)
|
|
|
+ done();
|
|
|
+ },
|
|
|
+ serviceSelectionChange(row){
|
|
|
+ this.serviceSelectList = row;
|
|
|
+ },
|
|
|
+ serviceOnLoad(page, params = {}) {
|
|
|
+ this.serviceLoading = true;
|
|
|
+ getServiceProjectList(page.currentPage, page.pageSize, params, this.serviceTreeDeptId).then(res => {
|
|
|
+ this.serviceData = res.data.data.records
|
|
|
+ this.servicePage.total = res.data.data.total
|
|
|
+ this.serviceLoading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ serviceConfirm(){
|
|
|
+ if(this.serviceSelectList.length != 0){
|
|
|
+ this.serviceSelectList.forEach((item)=>{
|
|
|
+ item.prop1 = item.code;
|
|
|
+ item.prop2 = item.name;
|
|
|
+ item.prop4 = item.unit;
|
|
|
+ item.prop3 = item.remarks;
|
|
|
+ this.$refs.crud.rowCellAdd(item);
|
|
|
+ this.$refs.crud.rowCell(item, this.optionFrom.length-1)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.serviceSelectList = []
|
|
|
+ this.serviceDialog = false
|
|
|
}
|
|
|
- }
|
|
|
+ },
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
- .customer-head {
|
|
|
+ .main-head {
|
|
|
position: fixed;
|
|
|
top: 105px;
|
|
|
width: 100%;
|
|
|
@@ -386,12 +574,15 @@
|
|
|
box-shadow: 0 4px 12px 0px rgba(232, 232, 235, 1);
|
|
|
z-index: 999;
|
|
|
}
|
|
|
-
|
|
|
- .customer-back {
|
|
|
+ .main-back {
|
|
|
cursor: pointer;
|
|
|
line-height: 62px;
|
|
|
font-size: 16px;
|
|
|
color: #323233;
|
|
|
font-weight: 400;
|
|
|
}
|
|
|
+ .avue-tree {
|
|
|
+ overflow: hidden;
|
|
|
+ max-height: 660px;
|
|
|
+ }
|
|
|
</style>
|
qinbai