|
@@ -0,0 +1,451 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <div class="customer-head">
|
|
|
+ <div class="customer-back">
|
|
|
+ <el-button type="danger" style="border: none;background: none;color: red" icon="el-icon-arrow-left"
|
|
|
+ @click="backToList">返回列表
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ <div class="add-customer-btn">
|
|
|
+ <el-button class="el-button--small-yh" type="primary" size="small" @click="editCustomer">
|
|
|
+ {{ form.id ? "确认修改" : "确认新增" }}
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <trade-card title="基础资料" style="margin-top: 50px">
|
|
|
+ <avue-form :option="optionForm" v-model="form" ref="form">
|
|
|
+ <template slot="purchaseCompanyId">
|
|
|
+ <crop-select v-model="form.purchaseCompanyId" @getCorpData="getGSData" corpType="GS"/>
|
|
|
+ </template>
|
|
|
+ </avue-form>
|
|
|
+ </trade-card>
|
|
|
+ <trade-card title="箱信息">
|
|
|
+ <avue-crud
|
|
|
+ :option="option"
|
|
|
+ :data="dataList"
|
|
|
+ v-model="formTwo"
|
|
|
+ ref="crud"
|
|
|
+ :upload-delete="uploadDelete"
|
|
|
+ @row-save="rowSave"
|
|
|
+ @row-update="(row,index,done,loading)=>{rowSave(row,done,loading,index)}"
|
|
|
+ @resetColumn="resetColumnTwo('crud','option','optionList',235.1)"
|
|
|
+ @saveColumn="saveColumnTwo('crud','option','optionList',235.1)">
|
|
|
+ <template slot-scope="{type,size,row,$index}" slot="menu">
|
|
|
+ <el-button icon="el-icon-edit" :size="size" :type="type" @click="$refs.crud.rowEdit(row,$index)">编辑</el-button>
|
|
|
+ <el-button icon="el-icon-delete" :size="size" :type="type">删除</el-button>
|
|
|
+ </template>
|
|
|
+ <template slot="addressIdForm">
|
|
|
+ <port-info v-model="formTwo.addressId" type="id"/>
|
|
|
+ </template>
|
|
|
+ <template slot="boxMakingCompanyIdForm">
|
|
|
+ <crop-select v-model="formTwo.boxMakingCompanyId" :refresh="false" @getCorpData="getGSData" corpType="GS"/>
|
|
|
+ </template>
|
|
|
+ </avue-crud>
|
|
|
+ </trade-card>
|
|
|
+ <trade-card title="费用信息">
|
|
|
+ <avue-crud
|
|
|
+ :option="optionTwo"
|
|
|
+ :data="dataListTwo"
|
|
|
+ v-model="formThree"
|
|
|
+ ref="crudTwo"
|
|
|
+ @row-save="rowSave"
|
|
|
+ @row-update="(row,index,done,loading)=>{rowSave(row,done,loading,index)}"
|
|
|
+ @resetColumn="resetColumnTwo('crudTwo','option','optionList',235.2)"
|
|
|
+ @saveColumn="saveColumnTwo('crudTwo','option','optionList',235.2)">
|
|
|
+ <template slot-scope="{type,size,row,$index}" slot="menu">
|
|
|
+ <el-button icon="el-icon-edit" :size="size" :type="type" @click="$refs.crudTwo.rowEdit(row,$index)">编辑</el-button>
|
|
|
+ <el-button icon="el-icon-delete" :size="size" :type="type">删除</el-button>
|
|
|
+ </template>
|
|
|
+ <template slot="itemIdForm">
|
|
|
+ <breakdown-select v-model="formThree.itemId" @selectValue="selectValue(value)"
|
|
|
+ :configuration="breakConfiguration"></breakdown-select>
|
|
|
+ </template>
|
|
|
+ </avue-crud>
|
|
|
+ </trade-card>
|
|
|
+ <trade-card title="附件明细">
|
|
|
+ <c-upload
|
|
|
+ basic
|
|
|
+ :data="tradingBoxFilesList"
|
|
|
+ deleteUrl="/api/blade-box-tube/tradingBoxFiles/remove"
|
|
|
+ :enumerationValue="235.3"
|
|
|
+ display
|
|
|
+ />
|
|
|
+ </trade-card>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import {detail, submit, tradingBoxFiles} from "@/api/boxManagement/buyContainer";
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "detailsPage",
|
|
|
+ props: {
|
|
|
+ onLoad: Object
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ breakConfiguration: {
|
|
|
+ multipleChoices: false,
|
|
|
+ multiple: false,
|
|
|
+ disabled: false,
|
|
|
+ searchShow: true,
|
|
|
+ collapseTags: false,
|
|
|
+ clearable: true,
|
|
|
+ placeholder: "请点击右边按钮选择",
|
|
|
+ dicData: []
|
|
|
+ },
|
|
|
+ form: {},
|
|
|
+ formTwo: {},
|
|
|
+ formThree: {},
|
|
|
+ optionForm: {
|
|
|
+ menuBtn: false,
|
|
|
+ span: 6,
|
|
|
+ column: [{
|
|
|
+ label: '系统号',
|
|
|
+ prop: 'sysNo'
|
|
|
+ }, {
|
|
|
+ label: '合同号',
|
|
|
+ prop: 'contractNo'
|
|
|
+ }, {
|
|
|
+ label: '买入公司',
|
|
|
+ prop: 'purchaseCompanyId'
|
|
|
+ }, {
|
|
|
+ label: '买入日期',
|
|
|
+ prop: 'purchaseDate',
|
|
|
+ type: "date",
|
|
|
+ format: "yyyy-MM-dd",
|
|
|
+ valueFormat: "yyyy-MM-dd HH:mm:ss"
|
|
|
+ }, {
|
|
|
+ label: '备注',
|
|
|
+ prop: 'remarks',
|
|
|
+ type: 'textarea',
|
|
|
+ minRows: 3,
|
|
|
+ span: 24
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ option: {
|
|
|
+ align: 'center',
|
|
|
+ index: true,
|
|
|
+ addBtnText:"录入明细",
|
|
|
+ refreshBtn: false,
|
|
|
+ addBtn: true,
|
|
|
+ span: 8,
|
|
|
+ addRowBtn: false,
|
|
|
+ cellBtn: false,
|
|
|
+ editBtn: false,
|
|
|
+ delBtn: false,
|
|
|
+ menuWidth: 140,
|
|
|
+ dialogTop:25,
|
|
|
+ dialogWidth:"80%",
|
|
|
+ column: [{
|
|
|
+ label: '箱号',
|
|
|
+ prop: 'code',
|
|
|
+ width: 100
|
|
|
+ }, {
|
|
|
+ label: '币别',
|
|
|
+ prop: 'currency',
|
|
|
+ width: 100,
|
|
|
+ filterable: true,
|
|
|
+ type: "select",
|
|
|
+ dicUrl: "/api/blade-system/dict-biz/dictionary?code=currency",
|
|
|
+ props: {
|
|
|
+ label: "dictValue",
|
|
|
+ value: "dictKey"
|
|
|
+ },
|
|
|
+ }, {
|
|
|
+ label: '金额',
|
|
|
+ prop: 'amount',
|
|
|
+ width: 100
|
|
|
+ }, {
|
|
|
+ label: '箱类型',
|
|
|
+ prop: 'boxTypeId',
|
|
|
+ width: 100,
|
|
|
+ filterable: true,
|
|
|
+ type: 'select',
|
|
|
+ props: {
|
|
|
+ label: 'name',
|
|
|
+ value: 'id'
|
|
|
+ },
|
|
|
+ dicUrl: '/api/blade-client/container/listMessage'
|
|
|
+ }, {
|
|
|
+ label: '最新地点',
|
|
|
+ prop: 'addressId',
|
|
|
+ width: 100
|
|
|
+ }, {
|
|
|
+ label: '最新日期',
|
|
|
+ prop: 'newDate',
|
|
|
+ width: 100,
|
|
|
+ type: "date",
|
|
|
+ format: "yyyy-MM-dd",
|
|
|
+ valueFormat: "yyyy-MM-dd HH:mm:ss"
|
|
|
+ }, {
|
|
|
+ label: '箱来源',
|
|
|
+ prop: 'boxSource',
|
|
|
+ width: 100,
|
|
|
+ filterable: true,
|
|
|
+ type: 'select',
|
|
|
+ dicUrl: "/api/blade-system/dict-biz/dictionary?code=box_source",
|
|
|
+ props: {
|
|
|
+ label: "dictValue",
|
|
|
+ value: "dictKey"
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ label: '箱状态',
|
|
|
+ prop: 'boxStatus',
|
|
|
+ width: 100,
|
|
|
+ filterable: true,
|
|
|
+ type: 'select',
|
|
|
+ dicUrl: "/api/blade-system/dict-biz/dictionary?code=box_status",
|
|
|
+ props: {
|
|
|
+ label: "dictValue",
|
|
|
+ value: "dictKey"
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ label: '空重',
|
|
|
+ prop: 'emptyWeight',
|
|
|
+ width: 100
|
|
|
+ }, {
|
|
|
+ label: '毛重',
|
|
|
+ prop: 'grossWeight',
|
|
|
+ width: 100
|
|
|
+ }, {
|
|
|
+ label: '皮重',
|
|
|
+ prop: 'tare',
|
|
|
+ width: 100
|
|
|
+ }, {
|
|
|
+ label: '装载重量',
|
|
|
+ prop: 'loadingWeight',
|
|
|
+ width: 100
|
|
|
+ }, {
|
|
|
+ label: '容积',
|
|
|
+ prop: 'volume',
|
|
|
+ width: 100
|
|
|
+ }, {
|
|
|
+ label: '状态',
|
|
|
+ prop: 'status',
|
|
|
+ width: 100,
|
|
|
+ dataType:'number',
|
|
|
+ filterable: true,
|
|
|
+ type: 'select',
|
|
|
+ dicUrl: "/api/blade-system/dict-biz/dictionary?code=approval_status",
|
|
|
+ props: {
|
|
|
+ label: "dictValue",
|
|
|
+ value: "dictKey"
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ label: '造箱公司',
|
|
|
+ prop: 'boxMakingCompanyId',
|
|
|
+ width: 100
|
|
|
+ }, {
|
|
|
+ label: '造箱日期',
|
|
|
+ prop: 'boxMakingDate',
|
|
|
+ width: 100,
|
|
|
+ type: "date",
|
|
|
+ format: "yyyy-MM-dd",
|
|
|
+ valueFormat: "yyyy-MM-dd HH:mm:ss"
|
|
|
+ }, {
|
|
|
+ label: '起租日期',
|
|
|
+ prop: 'leaseCommencementDate',
|
|
|
+ width: 100,
|
|
|
+ type: "date",
|
|
|
+ format: "yyyy-MM-dd",
|
|
|
+ valueFormat: "yyyy-MM-dd HH:mm:ss"
|
|
|
+ }, {
|
|
|
+ label: '箱龄',
|
|
|
+ prop: 'boxAge',
|
|
|
+ width: 100
|
|
|
+ }, {
|
|
|
+ label: '照片',
|
|
|
+ prop: 'tradingBoxFilesList',
|
|
|
+ width: 200,
|
|
|
+ type: 'upload',
|
|
|
+ span: 24,
|
|
|
+ listType: 'picture-card',
|
|
|
+ tip: '只能上传jpg/png文件,且不超过500kb',
|
|
|
+ propsHttp: {
|
|
|
+ url: 'link',
|
|
|
+ name: 'originalName',
|
|
|
+ res: 'data'
|
|
|
+ },
|
|
|
+ action: '/api/blade-resource/oss/endpoint/put-file'
|
|
|
+ }, {
|
|
|
+ label: '备注',
|
|
|
+ prop: 'remarks',
|
|
|
+ type: 'textarea',
|
|
|
+ minRows: 3,
|
|
|
+ span: 24,
|
|
|
+ width: 100
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ optionBack: {},
|
|
|
+ optionTwo:{
|
|
|
+ align: 'center',
|
|
|
+ index: true,
|
|
|
+ addBtnText:"录入明细",
|
|
|
+ refreshBtn: false,
|
|
|
+ addBtn: true,
|
|
|
+ span: 6,
|
|
|
+ dialogTop:"25%",
|
|
|
+ addRowBtn: false,
|
|
|
+ cellBtn: false,
|
|
|
+ editBtn: false,
|
|
|
+ delBtn: false,
|
|
|
+ menuWidth: 140,
|
|
|
+ dialogDrag:true,
|
|
|
+ dialogWidth:"80%",
|
|
|
+ column: [{
|
|
|
+ label: '收款对象',
|
|
|
+ prop: 'corpId',
|
|
|
+ width: 100
|
|
|
+ }, {
|
|
|
+ label: '箱号',
|
|
|
+ prop: 'code',
|
|
|
+ width: 100
|
|
|
+ }, {
|
|
|
+ label: '费用名称',
|
|
|
+ prop: 'itemId',
|
|
|
+ width: 100
|
|
|
+ }, {
|
|
|
+ label: '币别',
|
|
|
+ prop: 'currency',
|
|
|
+ width: 100,
|
|
|
+ filterable: true,
|
|
|
+ type: "select",
|
|
|
+ dicUrl: "/api/blade-system/dict-biz/dictionary?code=currency",
|
|
|
+ props: {
|
|
|
+ label: "dictValue",
|
|
|
+ value: "dictKey"
|
|
|
+ },
|
|
|
+ }, {
|
|
|
+ label: '单价',
|
|
|
+ prop: 'price',
|
|
|
+ width: 100
|
|
|
+ }, {
|
|
|
+ label: '数量',
|
|
|
+ prop: 'quantity',
|
|
|
+ width: 100
|
|
|
+ }, {
|
|
|
+ label: '金额',
|
|
|
+ prop: 'amount',
|
|
|
+ width: 100
|
|
|
+ }, {
|
|
|
+ label: '备注',
|
|
|
+ prop: 'remarks',
|
|
|
+ type: 'textarea',
|
|
|
+ minRows: 3,
|
|
|
+ span: 24,
|
|
|
+ width: 100
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ optionTwoBack:{},
|
|
|
+ dataListTwo:[],
|
|
|
+ dataList: [],
|
|
|
+ tradingBoxFilesList:[]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ if (this.onLoad.id){
|
|
|
+ this.refresh(this.onLoad.id)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //选择费用名称
|
|
|
+ selectValue(value){
|
|
|
+ console.log(value)
|
|
|
+ },
|
|
|
+ refresh(id){
|
|
|
+ console.log(id)
|
|
|
+ detail({id:id}).then(res=>{
|
|
|
+ console.log(res)
|
|
|
+ this.form = res.data.data
|
|
|
+ this.dataList = res.data.data.tradingBoxItemsList
|
|
|
+ this.dataListTwo = res.data.data.tradingBoxFeesList
|
|
|
+ this.tradingBoxFilesList = res.data.data.tradingBoxFilesList
|
|
|
+ delete this.form.tradingBoxItemsList
|
|
|
+ delete this.form.tradingBoxFeesList
|
|
|
+ delete this.form.tradingBoxFilesList
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //新增修改
|
|
|
+ editCustomer(){
|
|
|
+ let data = {
|
|
|
+ ...this.form,
|
|
|
+ tradingBoxItemsList:this.dataList,
|
|
|
+ tradingBoxFeesList:this.dataListTwo,
|
|
|
+ tradingBoxFilesList:this.tradingBoxFilesList,
|
|
|
+ type:"buy"
|
|
|
+ }
|
|
|
+ submit(data).then(res=>{
|
|
|
+ console.log(res)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ rowSave(form, done, loading, index) {
|
|
|
+ console.log(form)
|
|
|
+ done(form)
|
|
|
+ },
|
|
|
+ //删除图片
|
|
|
+ uploadDelete(file, column) {
|
|
|
+ return new Promise((resolve, reject)=>{
|
|
|
+ this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ if (this.formTwo.tradingBoxFilesList[file.uid].id){
|
|
|
+ tradingBoxFiles(this.formTwo.tradingBoxFilesList[file.uid].id).then(res => {
|
|
|
+ this.$message({
|
|
|
+ type: 'success',
|
|
|
+ message: '删除成功!'
|
|
|
+ });
|
|
|
+ resolve();
|
|
|
+ })
|
|
|
+ }else {
|
|
|
+ resolve();
|
|
|
+ }
|
|
|
+ }).catch(()=>{
|
|
|
+ reject();
|
|
|
+ this.$message({
|
|
|
+ type: "info",
|
|
|
+ message: "已取消删除"
|
|
|
+ });
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getGSData(row){
|
|
|
+ this.form.purchaseCompanyName = row.cname
|
|
|
+ },
|
|
|
+ backToList() {
|
|
|
+ this.$emit("backToList");
|
|
|
+ },
|
|
|
+ //自定义列保存
|
|
|
+ async saveColumnTwo(ref, option, optionBack, code) {
|
|
|
+ /**
|
|
|
+ * 已定义全局方法,直接使用,saveColumnData保存列数据方法,参数传值(表格名称,当前表格的option数据)
|
|
|
+ * 已定义全局方法,直接使用,getColumnName方法用来获取枚举值,参数根据自己定义的code值获取中文名
|
|
|
+ * 一定要执行异步操作,要等接口成功返回,才能执行下一行代码
|
|
|
+ */
|
|
|
+ const inSave = await this.saveColumnData(this.getColumnName(code), this[option]);
|
|
|
+ if (inSave) {
|
|
|
+ this.$message.success("保存成功");
|
|
|
+ //关闭窗口
|
|
|
+ this.$refs[ref].$refs.dialogColumn.columnBox = false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //自定义列重置
|
|
|
+ async resetColumnTwo(ref, option, optionBack, code) {
|
|
|
+ this[option] = this[optionBack];
|
|
|
+ const inSave = await this.delColumnData(this.getColumnName(code), this[optionBack]);
|
|
|
+ if (inSave) {
|
|
|
+ this.$message.success("重置成功");
|
|
|
+ this.$refs[ref].$refs.dialogColumn.columnBox = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+::v-deep .el-form-item {
|
|
|
+ margin-bottom: 8px;
|
|
|
+}
|
|
|
+</style>
|