808 lines
31 KiB
Vue
808 lines
31 KiB
Vue
<template>
|
||
<el-dialog
|
||
append-to-body
|
||
title="单据详情"
|
||
:visible.sync="dialogVisible"
|
||
fullscreen
|
||
@close="close"
|
||
@open="open"
|
||
>
|
||
<div class="nl-theme page-container">
|
||
<div class="page-header">
|
||
<div class="logo">NOBLELIFT</div>
|
||
<div class="muted">诺力物流机器人</div>
|
||
<div class="subtitle">产品购销合同</div>
|
||
</div>
|
||
<el-row :gutter="16" style="margin-top:8px;">
|
||
<!-- 左侧主要内容 -->
|
||
<el-col :span="18" class="vertical-line">
|
||
<!-- 需方供方信息 -->
|
||
<el-row :gutter="16">
|
||
<el-col :span="12">
|
||
<el-card shadow="never">
|
||
<el-form :model="client" label-width="100px" size="small">
|
||
<el-form-item label="合同编号"><el-input disabled placeholder="系统生成" v-model="dataForm.contractCode" /></el-form-item>
|
||
<el-form-item label="需方">
|
||
<el-select
|
||
v-model="dataForm.clientId"
|
||
@change="changeClient($event, dictData[1])"
|
||
clearable>
|
||
<el-option v-for="item in dictData[1]" :key="item.key" :label="item.label" :value="item.value" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="供方"><el-input disabled v-model="dataForm.finc" /></el-form-item>
|
||
</el-form>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-card shadow="never">
|
||
<el-form :model="dataForm" label-width="100px" size="small">
|
||
<el-form-item label="生效日期"><el-date-picker v-model="dataForm.effectiveTime" type="date" value-format="yyyy-MM-dd" /></el-form-item>
|
||
<el-form-item label="合同类型"><el-input v-model="dataForm.contractType" /></el-form-item>
|
||
<el-form-item label="项目类型"><el-input v-model="dataForm.projectType" /></el-form-item>
|
||
</el-form>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
<!-- 物料明细表格 -->
|
||
<div class="clause-item" style="display: grid; grid-template-columns: 1fr auto; align-items: center;">
|
||
<strong >一、 产品明细</strong>
|
||
<el-button type="primary" size="small" @click="addMaterial">新增物料</el-button>
|
||
</div>
|
||
<el-card shadow="never">
|
||
<el-table :data="materData" border style="width:100%" size="small" show-summary :summary-method="summaryMethod" header-cell-class-name="nl-table-header" cell-class-name="nl-table-cell">
|
||
<el-table-column label="序号" type="index" width="60" />
|
||
<el-table-column label="物料名称" prop="materialName" width="150" />
|
||
<el-table-column label="物料型号" prop="materialName" width="150" />
|
||
<el-table-column label="数量" prop="qty" width="100" >
|
||
<template slot-scope="scope">
|
||
<el-input
|
||
v-model="scope.row.qty"
|
||
size="mini"
|
||
></el-input>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="单位" prop="unitName" width="60" />
|
||
<el-table-column label="未税收费价" prop="salePrice" width="120" >
|
||
<template slot-scope="scope">
|
||
<el-input
|
||
v-model="scope.row.salePrice"
|
||
size="mini"
|
||
></el-input>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="税率%" prop="tax" width="120" >
|
||
<template slot-scope="scope">
|
||
<el-input
|
||
v-model="scope.row.tax"
|
||
size="mini"
|
||
></el-input>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="总价" prop="amount" width="120" :formatter='tamount'/>
|
||
<el-table-column label="备注" prop="remark" width="120" />
|
||
<el-table-column
|
||
fixed="right"
|
||
header-align="center"
|
||
align="center"
|
||
width="150"
|
||
label="操作">
|
||
<template slot-scope="scope">
|
||
<el-button type="text" size="small" @click="removeItem(scope.row,scope.$index)">删除</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-card>
|
||
<div style="margin:24px 0; text-align:right;"/>
|
||
<!-- 条款 -->
|
||
<div class="clauses-section">
|
||
<div class="clause-item">
|
||
<strong>二、 质量要求、技术标准、供方对质量负责的条件和期限:</strong>
|
||
<span v-text="dataForm.qc" @input="this.dataForm.qc = $event.target.innerText" class="editable-clause" contenteditable="true" style="text-decoration: underline;">
|
||
</span>
|
||
</div>
|
||
<div class="clause-item">
|
||
<strong>三、 售后服务:</strong>
|
||
<span v-text="dataForm.after_sales" @input="this.dataForm.after_sales = $event.target.innerText" class="editable-clause" contenteditable="true" style="text-decoration: underline;">
|
||
</span>
|
||
</div>
|
||
<div class="clause-item">
|
||
<strong>四、 交货时间、地点:</strong>
|
||
货期:
|
||
<span v-text="dataForm.delivery" @input="this.dataForm.delivery = $event.target.innerText" class="editable-clause" contenteditable="true" style="text-decoration: underline;"/>
|
||
。交货地:
|
||
<span v-text="dataForm.place" @input="this.dataForm.place = $event.target.innerText" class="editable-clause" contenteditable="true" style="text-decoration: underline;"/>
|
||
</div>
|
||
<div class="clause-item">
|
||
<strong>五、 运输方式及到达站和费用负担:</strong>
|
||
<span v-text="dataForm.transport" @input="this.dataForm.transport = $event.target.innerText" class="editable-clause" contenteditable="true" style="text-decoration: underline;"/>
|
||
</div>
|
||
<div class="clause-item">
|
||
<strong>六、 包装标准:</strong>
|
||
<span v-text="dataForm.packaging" @input="this.dataForm.packaging = $event.target.innerText" class="editable-clause" contenteditable="true" style="text-decoration: underline;"/>
|
||
</div>
|
||
<div class="clause-item">
|
||
<strong>七、 结算方式:</strong>
|
||
<span v-text="dataForm.pay" @input="this.dataForm.pay = $event.target.innerText" class="editable-clause" contenteditable="true" style="text-decoration: underline;"/>
|
||
付款方式:
|
||
<span v-text="dataForm.payment" @input="this.dataForm.payment = $event.target.innerText" class="editable-clause" contenteditable="true" style="text-decoration: underline;"/>
|
||
</div>
|
||
<div class="clause-item">
|
||
<strong>八、 违约责任:</strong>
|
||
<span v-text="dataForm.breach" @input="this.dataForm.breach = $event.target.innerText" class="editable-clause" contenteditable="true" style="text-decoration: underline;"/>
|
||
</div>
|
||
<div class="clause-item">
|
||
<strong>九、 解决合同纠纷的方式:</strong>
|
||
<span v-text="dataForm.solve_dispute" @input="this.dataForm.solve_dispute = $event.target.innerText" class="editable-clause" contenteditable="true" style="text-decoration: underline;"/>
|
||
</div>
|
||
<div class="clause-item">
|
||
<strong>十、 其它约定事项:</strong>
|
||
<span v-text="dataForm.supplement" @input="this.dataForm.supplement = $event.target.innerText" class="editable-clause" contenteditable="true" style="text-decoration: underline;"/>
|
||
</div>
|
||
</div>
|
||
<!-- 底部签字盖章 -->
|
||
<div style="margin:24px 0; text-align:right;"/>
|
||
<el-row :gutter="16">
|
||
<el-col :span="12">
|
||
<el-card shadow="never">
|
||
<el-form :model="client" label-width="100px" size="small">
|
||
<strong>需方：</strong>
|
||
<el-form-item label="单位名称:">
|
||
<span size="mini">{{client.name}}</span>（盖章）
|
||
</el-form-item>
|
||
<el-form-item label="地址:">
|
||
<span size="mini">{{client.address}}</span>
|
||
</el-form-item>
|
||
<el-form-item label="委托代理人:">
|
||
<span size="mini">{{client.juridical_person}}</span>
|
||
</el-form-item>
|
||
<el-form-item label="电话:">
|
||
<span size="mini">{{client.tel}}</span>
|
||
</el-form-item>
|
||
<el-form-item label="传真:">
|
||
<span size="mini">{{client.fax}}</span>
|
||
</el-form-item>
|
||
<el-form-item label="开户银行:">
|
||
<span size="mini">{{client.bank}}</span>
|
||
</el-form-item>
|
||
<el-form-item label="银行卡号:">
|
||
<span size="mini">{{client.card}}</span>
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-card shadow="never">
|
||
<el-form :model="client" label-width="100px" size="small">
|
||
<strong>供方：</strong>
|
||
<el-form-item label="单位名称:">
|
||
<span size="mini">{{supply.name}}</span>（盖章）
|
||
</el-form-item>
|
||
<el-form-item label="地址:">
|
||
<span size="mini">{{supply.address}}</span>
|
||
</el-form-item>
|
||
<el-form-item label="委托代理人:">
|
||
<span size="mini">{{supply.juridical_person}}</span>
|
||
</el-form-item>
|
||
<el-form-item label="电话:">
|
||
<span size="mini">{{supply.tel}}</span>
|
||
</el-form-item>
|
||
<el-form-item label="传真:">
|
||
<span size="mini">{{supply.fax}}</span>
|
||
</el-form-item>
|
||
<el-form-item label="开户银行:">
|
||
<span size="mini">{{supply.bank}}</span>
|
||
</el-form-item>
|
||
<el-form-item label="银行卡号:">
|
||
<span size="mini">{{supply.card}}</span>
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<!-- 备注与附件 -->
|
||
<el-card shadow="never" style="margin-top:12px;">
|
||
<template #header>
|
||
<span class="panel-title">其他注意事项</span>
|
||
</template>
|
||
<el-input v-model="dataForm.remarks" type="textarea" :rows="6" placeholder="xxxxxxx" />
|
||
<template #header>
|
||
<span class="panel-title">附件</span>
|
||
</template>
|
||
<el-upload
|
||
class="upload-demo"
|
||
ref="upload"
|
||
action="https://jsonplaceholder.typicode.com/posts/"
|
||
:on-change="handleChange"
|
||
:on-remove="handleRemove"
|
||
:on-preview="handleLoad"
|
||
:file-list="fileList"
|
||
:auto-upload="false">
|
||
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
|
||
<div slot="tip" class="el-upload__tip">只能上传图片,word,excel,pdf文件，且不超过50MB</div>
|
||
</el-upload>
|
||
</el-card>
|
||
|
||
<div class="footer-actions">
|
||
<el-button v-if="dataForm.contractId == ''" type="info" plain @click="tempSave">暂存</el-button>
|
||
<el-button type="primary" @click="submitPrice">保存</el-button>
|
||
</div>
|
||
</el-col>
|
||
<!-- 右侧侧栏 -->
|
||
<el-col :span="6">
|
||
<el-card shadow="never">
|
||
<template #header>
|
||
<span class="panel-title">我的修改记录</span>
|
||
</template>
|
||
<el-table :data="records" border size="small" @row-click="reLoad">
|
||
<el-table-column label="单据名称" prop="orderName" width="80"/>
|
||
<el-table-column label="时间" prop="createTime" />
|
||
<el-table-column label="附件" prop="annex" width="40">
|
||
<template slot-scope="scope">
|
||
<i v-if="scope.row.annex" class="el-icon-document"></i>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
<el-dialog
|
||
title="选择物料"
|
||
:visible.sync="innerVisible"
|
||
append-to-body>
|
||
<el-form size="mini" :inline="true" :model="innerDataForm" @keyup.enter.native="getDataList()">
|
||
<el-form-item>
|
||
<el-input v-model="innerDataForm.key" placeholder="编码或名称" clearable></el-input>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button @click="getDataList()">查询</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
<el-table
|
||
:data="dataList"
|
||
border
|
||
size="mini"
|
||
max-height="400"
|
||
v-loading="dataListLoading"
|
||
@selection-change="selectionChangeHandle"
|
||
style="width: 100%;">
|
||
<el-table-column
|
||
type="selection"
|
||
header-align="center"
|
||
align="center"
|
||
width="50">
|
||
</el-table-column>
|
||
<el-table-column
|
||
type="index"
|
||
header-align="center"
|
||
align="center"
|
||
label="序号">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="materialCode"
|
||
header-align="center"
|
||
align="center"
|
||
label="物料编码">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="materialName"
|
||
header-align="center"
|
||
align="center"
|
||
label="物料名称">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="materialSpec"
|
||
header-align="center"
|
||
align="center"
|
||
label="规格">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="costPrice"
|
||
header-align="center"
|
||
align="center"
|
||
label="成本价">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="salePrice"
|
||
header-align="center"
|
||
align="center"
|
||
label="销售价">
|
||
</el-table-column>
|
||
</el-table>
|
||
<el-pagination
|
||
@size-change="sizeChangeHandle"
|
||
@current-change="currentChangeHandle"
|
||
:current-page="pageIndex"
|
||
:page-sizes="[10, 20, 50, 100]"
|
||
:page-size="pageSize"
|
||
:total="totalPage"
|
||
layout="total, sizes, prev, pager, next, jumper">
|
||
</el-pagination>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button size="mini" @click="innerVisible = false">取消</el-button>
|
||
<el-button size="mini" type="primary" @click="innerSubmit">确定</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
</el-dialog>
|
||
</template>
|
||
<script>
|
||
import { apiUtils } from '@/utils/dict'
|
||
export default {
|
||
name: 'ViewDialog',
|
||
data () {
|
||
return {
|
||
cols: [],
|
||
dataForm: {
|
||
contractId: '',
|
||
contractType: '',
|
||
projectType: '',
|
||
parentContract: null,
|
||
contractCode: '',
|
||
clientId: '',
|
||
isMaster: true,
|
||
qc: '技术标准符合行业标准。',
|
||
after_sales: '保修期6个月，人为造成的损坏不在质保范围内',
|
||
finc: '上海诺力智能科技有限公司',
|
||
fattn: '',
|
||
fmobile: '',
|
||
ftel: '021-39888170',
|
||
fadd: '上海市青浦区高光路215弄99号4号楼302室',
|
||
effectiveTime: null,
|
||
delivery: '与客户协商一致',
|
||
place: '____',
|
||
transport: '由供方提供',
|
||
packaging: '按国内标准包装',
|
||
pay: '款到发货',
|
||
payment: '电汇',
|
||
breach: '按《中华人民共和国民法典》执行',
|
||
solve_dispute: '买卖双方首先友好协商解决，协商不成，任何一方均可向有管辖权法院起诉',
|
||
supplement: '合同扫描件有效，签字盖章之日起生效',
|
||
remarks: '',
|
||
annex: '',
|
||
materialJson: []
|
||
},
|
||
client: {name: '',
|
||
address: '',
|
||
juridical_person: '',
|
||
tel: '',
|
||
fax: '',
|
||
bank: '',
|
||
card: ''
|
||
},
|
||
|
||
supply: {name: '上海诺力智能科技有限公司',
|
||
address: '上海市青浦区高光路215弄99号4号楼302室',
|
||
juridical_person: '委托代理人',
|
||
tel: '021-39888170',
|
||
fax: '',
|
||
bank: '招商银行上海虹桥支行',
|
||
card: '121917025010901'
|
||
},
|
||
innerDataForm: {
|
||
key: ''
|
||
},
|
||
dataList: [],
|
||
records: [],
|
||
dictConfigs: [{url: '/client/client/list', type: 'list', value: 'clientId', label: 'clientName'},
|
||
{url: '/sys/user/list', type: 'list', value: 'userId', label: 'username'}],
|
||
fileList: [],
|
||
pageIndex: 1,
|
||
pageSize: 10,
|
||
totalPage: 0,
|
||
dataListLoading: false,
|
||
dataListSelections: [],
|
||
materData: [],
|
||
dialogVisible: false,
|
||
innerVisible: false
|
||
}
|
||
},
|
||
props: {
|
||
dialogShow: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
dictData: Array,
|
||
rowmst: {
|
||
type: Object
|
||
}
|
||
},
|
||
mixins: [apiUtils],
|
||
components: {
|
||
},
|
||
watch: {
|
||
dialogShow: {
|
||
handler (newValue) {
|
||
this.dialogVisible = newValue
|
||
}
|
||
},
|
||
rowmst: {
|
||
handler (newValue) {
|
||
this.form = newValue
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
handleRemove (a, fileList) {
|
||
if (a.storageId !== undefined) {
|
||
let arr = this.dataForm.annex.split(',')
|
||
const filteredArr = arr.filter(item => item != a.storageId)
|
||
this.dataForm.annex = filteredArr.join(',')
|
||
}
|
||
console.log(this.dataForm.annex)
|
||
this.fileList = fileList
|
||
},
|
||
handleLoad (a, fileList) {
|
||
this.loadFileUrl(a)
|
||
},
|
||
handleChange (a, fileList) {
|
||
this.fileList = fileList
|
||
},
|
||
init (id) {
|
||
this.dataForm.contractId = id
|
||
this.dialogVisible = true
|
||
this.$nextTick(() => {
|
||
this.materData = []
|
||
if (this.dataForm.contractId) {
|
||
this.$http({
|
||
url: this.$http.adornUrl(`/flow/contract/info/${this.dataForm.contractId}`),
|
||
method: 'get',
|
||
params: this.$http.adornParams()
|
||
}).then(({data}) => {
|
||
if (data && data.code === 200) {
|
||
this.dataForm.contractId = data.contract.contractId
|
||
this.dataForm.contractType = data.contract.contractType
|
||
this.dataForm.projectType = data.contract.projectType
|
||
this.dataForm.isMaster = data.contract.isMaster
|
||
this.dataForm.parentContract = data.contract.parentContract
|
||
this.dataForm.contractCode = data.contract.contractCode
|
||
this.dataForm.totalPrice = data.contract.totalPrice
|
||
this.dataForm.clientId = data.contract.clientId
|
||
this.dataForm.materialJson = data.contract.materialJson
|
||
this.dataForm.isAcceptance = data.contract.isAcceptance
|
||
this.dataForm.acceptanceTime = data.contract.acceptanceTime
|
||
this.dataForm.priceId = data.contract.priceId
|
||
this.dataForm.effectiveTime = data.contract.effectiveTime
|
||
this.dataForm.createTime = data.contract.createTime
|
||
this.dataForm.CreateName = data.contract.CreateName
|
||
this.dataForm.updateTime = data.contract.updateTime
|
||
this.dataForm.qc = data.contract.qc
|
||
this.dataForm.afterSales = data.contract.afterSales
|
||
this.dataForm.delivery = data.contract.delivery
|
||
this.dataForm.place = data.contract.place
|
||
this.dataForm.transport = data.contract.transport
|
||
this.dataForm.pay = data.contract.pay
|
||
this.dataForm.payment = data.contract.payment
|
||
this.dataForm.breach = data.contract.breach
|
||
this.dataForm.solveDispute = data.contract.solveDispute
|
||
this.dataForm.supplement = data.contract.supplement
|
||
this.dataForm.packaging = data.contract.packaging
|
||
this.dataForm.annex = data.contract.annex
|
||
this.dataForm.status = data.contract.status
|
||
this.dataForm.remarks = data.contract.remarks
|
||
this.materData = JSON.parse(data.contract.materialJson)
|
||
this.client = data.contract.client
|
||
this.getFileUrl(data.contract.annex)
|
||
this.$http({
|
||
url: this.$http.adornUrl(`/flow/orderRecord/list`),
|
||
method: 'get',
|
||
params: this.$http.adornParams({'orderCode': data.contract.contractCode})
|
||
}).then(({data}) => {
|
||
if (data && data.code === 200) {
|
||
this.records = data.orderRecord
|
||
}
|
||
})
|
||
}
|
||
})
|
||
|
||
}
|
||
})
|
||
},
|
||
getFileUrl (annex) {
|
||
this.$http({
|
||
url: this.$http.adornUrl('/api/localStorage'),
|
||
method: 'get',
|
||
params: this.$http.adornParams({'annex':annex})
|
||
}).then(({data}) => {
|
||
this.fileList = [...data]
|
||
})
|
||
},
|
||
reLoad (row) {
|
||
|
||
let price = JSON.parse(row.data)
|
||
this.dataForm.priceType = String(price.priceType)
|
||
this.dataForm.contractCode = price.contractCode
|
||
this.dataForm.quoter = price.quoter
|
||
this.dataForm.finc = price.finc
|
||
this.dataForm.fattn = price.fattn
|
||
this.dataForm.fmobile = price.fmobile
|
||
this.dataForm.ftel = price.ftel
|
||
this.dataForm.fadd = price.fadd
|
||
this.dataForm.tinc = price.tinc
|
||
this.dataForm.tattn = price.tattn
|
||
this.dataForm.tmobile = price.tmobile
|
||
this.dataForm.ttel = price.ttel
|
||
this.dataForm.tadd = price.tadd
|
||
this.dataForm.effective = price.effective
|
||
this.dataForm.delivery = price.delivery
|
||
this.dataForm.place = price.place
|
||
this.dataForm.valid = price.valid
|
||
this.dataForm.pay = price.pay
|
||
this.dataForm.materialJson = price.materialJson
|
||
this.dataForm.totalPrice = price.totalPrice
|
||
this.dataForm.remarks = price.remarks
|
||
this.dataForm.annex = price.annex
|
||
this.materData = JSON.parse(price.materialJson)
|
||
this.getFileUrl(price.annex)
|
||
},
|
||
loadFileUrl (file) {
|
||
// eslint-disable-next-line eqeqeq
|
||
if (file.storageId == undefined) {
|
||
const url = URL.createObjectURL(file.raw)
|
||
const link = document.createElement('a')
|
||
link.style.display = 'none'
|
||
link.href = url
|
||
const fileName = file.name
|
||
link.setAttribute('download', fileName)
|
||
document.body.appendChild(link)
|
||
link.click()
|
||
document.body.removeChild(link)
|
||
} else {
|
||
this.$http({
|
||
url: this.$http.adornUrl('/api/localStorage/download'),
|
||
responseType: 'blob',
|
||
params: this.$http.adornParams({'storageId': file.storageId})
|
||
}).then(({data}) => {
|
||
const url = window.URL.createObjectURL(new Blob([data]))
|
||
const link = document.createElement('a')
|
||
link.style.display = 'none'
|
||
link.href = url
|
||
const fileName = file.name
|
||
link.setAttribute('download', fileName)
|
||
document.body.appendChild(link)
|
||
link.click()
|
||
document.body.removeChild(link)
|
||
})
|
||
}
|
||
},
|
||
open () {
|
||
this.dialogVisible = true
|
||
},
|
||
close () {
|
||
this.dialogVisible = false
|
||
this.innerDataForm = {
|
||
key: ''
|
||
}
|
||
this.dataForm = {}
|
||
this.dataList = []
|
||
this.fileList = []
|
||
this.materData = []
|
||
},
|
||
handleMobileInput (value) {
|
||
console.log(value)
|
||
let mobile = value.replace(/\D/g, '').slice(0, 11)
|
||
this.dataForm.fmobile = mobile
|
||
},
|
||
changeClient (event, dictData) {
|
||
if (dictData.length > 0) {
|
||
const foundItem = dictData.find(item => item.value == event);
|
||
if (foundItem !== undefined) {
|
||
// eslint-disable-next-line no-unused-expressions
|
||
this.client = foundItem
|
||
}
|
||
}
|
||
},
|
||
changeUser (event, dictData, dataForm, field1) {
|
||
if (dictData.length > 0) {
|
||
const foundItem = dictData.find(item => item.value == event);
|
||
if (foundItem !== undefined) {
|
||
this.$set(dataForm, field1, foundItem.moblie)
|
||
}
|
||
}
|
||
},
|
||
addMaterial () {
|
||
this.innerVisible = true
|
||
this.getDataList()
|
||
},
|
||
sizeChangeHandle (val) {
|
||
this.pageSize = val
|
||
this.pageIndex = 1
|
||
this.getDataList()
|
||
},
|
||
// 当前页
|
||
currentChangeHandle (val) {
|
||
this.pageIndex = val
|
||
this.getDataList()
|
||
},
|
||
// 多选
|
||
selectionChangeHandle (val) {
|
||
this.dataListSelections = val
|
||
},
|
||
innerSubmit () {
|
||
this.innerVisible = false
|
||
const existingIds = new Set(this.materData.map(item => item.materialCode))
|
||
// 筛选出 dataListSelections 中不重复的数据
|
||
// eslint-disable-next-line no-unused-vars
|
||
const newItems = this.dataListSelections.filter(item => !existingIds.has(item.materialCode))
|
||
this.materData = [...this.materData, ...newItems]
|
||
// eslint-disable-next-line no-sequences
|
||
this.materData.forEach(a => {
|
||
this.$set(a, 'tax', 13)
|
||
this.$set(a, 'rate', 100)
|
||
this.$set(a, 'qty', 1)
|
||
this.$set(a, 'amount', (a.qty * a.salePrice * (1 + a.tax / 100)).toFixed(2))
|
||
this.$set(a, 'discounted', (a.amount * a.rate / 100).toFixed(2))
|
||
// 返回格式化后的字符串，例如保留两位小数
|
||
})
|
||
},
|
||
// 获取数据列表
|
||
getDataList () {
|
||
this.dataListLoading = true
|
||
this.$http({
|
||
url: this.$http.adornUrl('/material/material/list'),
|
||
method: 'get',
|
||
params: this.$http.adornParams({
|
||
'page': this.pageIndex,
|
||
'limit': this.pageSize,
|
||
'key': this.innerDataForm.key
|
||
})
|
||
}).then(({data}) => {
|
||
if (data && data.code === 200) {
|
||
this.dataList = data.page.list
|
||
this.totalPage = data.page.totalCount
|
||
} else {
|
||
this.dataList = []
|
||
this.totalPage = 0
|
||
}
|
||
this.dataListLoading = false
|
||
})
|
||
},
|
||
// 上传附件
|
||
beforeUpload (file) {
|
||
if (file.size > 1024) {
|
||
// ElMessage.error(`${file.name} 超过 5MB，已跳过`)
|
||
return false
|
||
}
|
||
return true
|
||
},
|
||
tempSave () {
|
||
this.$refs.upload.submit();
|
||
},
|
||
submitPrice () {
|
||
|
||
if (this.fileList.length > 0) {
|
||
this.fileList.forEach(a => {
|
||
if (a.size > 10 * 1024 * 1024) {
|
||
return false
|
||
}
|
||
})
|
||
}
|
||
this.dataForm.materialJson = this.materData
|
||
var formdata = new FormData()
|
||
this.fileList.forEach(a => {
|
||
formdata.append('file', a.raw)
|
||
})
|
||
formdata.append('form', JSON.stringify(this.dataForm))
|
||
let url = `/flow/contract/save`
|
||
if (this.dataForm.contractId != undefined){
|
||
url = `/flow/contract/update`
|
||
}
|
||
this.$http({
|
||
url: this.$http.adornUrl(url),
|
||
method: 'post',
|
||
data: formdata
|
||
}).then(({data}) => {
|
||
if (data && data.code === 200) {
|
||
this.$message({
|
||
message: '操作成功',
|
||
type: 'success',
|
||
duration: 1500
|
||
})
|
||
this.close()
|
||
} else {
|
||
this.$message.error(data.msg)
|
||
}
|
||
})
|
||
},
|
||
saveMaterial () {
|
||
},
|
||
removeItem (row, index) {
|
||
this.materData.splice(index, 1)
|
||
},
|
||
tamount (row, index) {
|
||
const amount = (row.qty * row.salePrice * (1 + row.tax / 100)).toFixed(2)
|
||
// 返回格式化后的字符串，例如保留两位小数
|
||
row.amount = amount
|
||
this.$set(row, 'amount', amount)
|
||
return amount
|
||
},
|
||
tdiscounted (row, index) {
|
||
const amount = (row.amount * row.rate / 100).toFixed(2)
|
||
// 返回格式化后的字符串，例如保留两位小数
|
||
row.discounted = amount
|
||
this.$set(row, 'discounted', amount)
|
||
return amount
|
||
},
|
||
summaryMethod (params) {
|
||
const { columns, data } = params
|
||
const sums = []
|
||
let totalAmount = 0
|
||
let totalDiscounted = 0
|
||
data.forEach(row => { totalAmount += Number(row.amount) || 0; totalDiscounted += Number(row.discounted) || 0 })
|
||
columns.forEach((col, idx) => {
|
||
if (idx === 6) sums[idx] = '合计'
|
||
else if (col.property === 'amount') sums[idx] = totalAmount.toFixed(2)
|
||
else if (col.property === 'discounted') sums[idx] = totalDiscounted.toFixed(2)
|
||
else if (col.property === 'rate') sums[idx] = (totalDiscounted * 100 / totalAmount).toFixed(2)
|
||
else sums[idx] = ''
|
||
})
|
||
this.dataForm.totalPrice = totalAmount
|
||
return sums
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
:root { --header-bg: #f6f8fb; --border: #f1efef; --primary:#1E90FF; }
|
||
body { background:#f3f5f7; color:#222; }
|
||
.page-container { max-width: 1400px; margin: 24px auto; }
|
||
.page-header { border-radius:12px; padding:12px 16px; display:flex; align-items:center; gap:16px; }
|
||
.logo { font-weight:800; font-size:26px; color:#ff5a36; letter-spacing:1px; }
|
||
.muted { color:#666; font-size:13px; }
|
||
.subtitle {position: absolute;
|
||
left: 40%; color:#333; font-weight:800; font-size:24px; }
|
||
.panel-title { font-weight:700; font-size:14px; color:#334; }
|
||
.upload-tip { font-size:12px; color:#666; margin-left:8px; }
|
||
.footer-actions { display:flex; gap:12px; justify-content:center; padding:16px; }
|
||
.table-remark { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.vertical-line {
|
||
position: relative;
|
||
}
|
||
.clause-item {
|
||
margin-bottom: 20px;
|
||
}
|
||
/* 完全去除边框 */
|
||
.no-border-form .el-form-item__content:before, .no-border-form .el-form-item__content:after {
|
||
display: none; /* 隐藏伪元素生成的边框 */
|
||
}
|
||
.vertical-line::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 50%;
|
||
right: 0;
|
||
transform: translateY(-50%);
|
||
height: 120%; /* 可以调整竖线的高度，这里设置为80% */
|
||
width: 1px;
|
||
background-color: #e0e0e0;
|
||
}
|
||
/* 主题覆盖，使Element Plus风格更贴近原始样式 */
|
||
.nl-theme {
|
||
--el-color-primary: var(--primary);
|
||
--el-border-color: var(--border);
|
||
--el-border-radius-small: 6px;
|
||
--el-border-radius-base: 8px;
|
||
--el-box-shadow-light: none;
|
||
}
|
||
.nl-theme .el-card { border:1px solid var(--border); box-shadow:none; }
|
||
.nl-theme .el-card__header { background:#f6f8fb; padding:10px 14px; font-weight:700; }
|
||
.nl-theme .el-form-item { margin-bottom:8px; }
|
||
.nl-theme .el-form-item__label { color:#333; font-size:13px; font-weight:600; }
|
||
.nl-theme .el-input--small .el-input__wrapper,
|
||
.nl-theme .el-select--small .el-select__wrapper { min-height:28px; }
|
||
.nl-theme .el-input__wrapper, .nl-theme .el-select__wrapper { box-shadow:none; border:1px solid var(--border); }
|
||
.nl-theme .el-button--primary { background: var(--primary); border-color: var(--primary); }
|
||
.nl-theme .el-button--primary.is-plain { color: var(--primary); background:#fff; }
|
||
|
||
/* 表格细节对齐 */
|
||
.nl-theme .el-table { font-size:13px; }
|
||
.nl-theme .el-table thead { background:#f7f9fc; }
|
||
.nl-theme .el-table__header-wrapper th { background:#f7f9fc; font-weight:600; color:#334; }
|
||
.nl-theme .el-table__row { height:36px; }
|
||
.nl-theme .nl-table-header { background:#f7f9fc; }
|
||
.nl-theme .nl-table-cell { padding:8px 10px; }
|
||
|
||
.attachments-row { margin-top:12px; display:flex; align-items:center; gap:12px; }
|
||
</style>
|