前端

src/views/contractManagement/storageContract.vue

@@ -0,0 +1,938 @@
+<template>
+  <div>
+    <BaseHeaderLayout :leftSpan="8">
+      <template slot="left">
+        <ws-button type="primary" @click="handleAdd()"
+          v-hasPermission="`contractManagement.dcContract.dcContractInfo.add`">添加</ws-button>
+        <ws-button @click="exportlist()" v-hasPermission="
+            `contractManagement.dcContract.dcContractInfo.view`
+          ">导出</ws-button>
+      </template>
+      <template slot="right">
+        <span style="width: 142px; display: inline-block; color: #8890b1">状态：</span>
+        <ws-select v-model="searchTypeText" placeholder="" class="typeselect" @change="selecttaskType"
+          :value="searchType">
+          <ws-option v-for="item in taskTypeList" :key="item.value" :label="item.value" :value="item.value"
+            style="color: #8890b1" />
+        </ws-select>
+        <el-date-picker v-model="value2" type="daterange" align="right" unlink-panels range-separator="至"
+          start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
+        </el-date-picker>
+        <el-input v-model="searchKeyWord" placeholder="可按照合同编号、买方名称、卖方名称进行查找" clearable maxlength="500" type="input"
+          class="findValue" @keyup.enter.native="find()"></el-input>
+        <ws-button class="find" type="primary" @click="find()"><img width="16" height="16" style="
+              vertical-align: text-top;
+              position: relative;
+              top: 0px;
+              left: -8px;
+            " src="../../../public/img/sousuo.png" alt="" /></ws-button>
+      </template>
+    </BaseHeaderLayout>
+    <el-table class="wenzi" :data="contractList.records" style="width: 100%; margin-top: 10px"
+      height="calc(100% - 105px)">
+      <el-table-column type="index" label="序号">
+        <template scope="scope">
+          <span v-if="scope.$index < 9">0{{ scope.$index + 1 }}</span>
+          <span v-else>{{ scope.$index + 1 }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="contractNo" label="合同编号">
+      </el-table-column>
+      <el-table-column prop="goodsName" label="货名"></el-table-column>
+      <el-table-column prop="buyer" label="买方"> </el-table-column>
+      <el-table-column prop="seller" label="卖方"> </el-table-column>
+      <el-table-column prop="weight" label="重量（吨）"> </el-table-column>
+      <el-table-column prop="completedQuantity" label="已完成（吨）">
+    <!--    <template slot-scope="scope">
+          <span style="color: #5473e8; font-weight: 600">{{
+            scope.row.completedQuantity
+          }}</span>
+        </template> -->
+      </el-table-column>
+      <el-table-column prop="grainMoney" label="粮款（元）"> </el-table-column>
+      <el-table-column prop="storageFeeNew" label="代储费（元）"> </el-table-column>
+      <el-table-column width='120' prop="total" label="合计应收（元）">
+      </el-table-column>
+      <el-table-column prop="received" label="已收（元）"> </el-table-column>
+      <el-table-column width='120' prop="goodsNames" label="已开发票（元）"> </el-table-column>
+      <el-table-column prop="status" label="状态">
+        <template slot-scope="scope">
+          <span v-if="scope.row.approveStatus">{{
+            scope.row.approveStatus
+          }}</span>
+          <el-popover v-else placement="left" trigger="click" visible-arrow="false" @show="history(scope.row)">
+            <template>
+              <span slot="reference">
+                <span v-if="scope.row.status == '待执行'" class="executory"></span>
+                <span v-if="scope.row.status == '执行中'" class="inExecution"></span>
+                <span v-if="scope.row.status == '已完成'" class="done"></span>{{ scope.row.status }}
+              </span>
+            </template>
+            <div>
+              <p style="margin-top: 0; padding-left: 10px">操作历史</p>
+              <div v-for="(item, index) in historyList" :key="index" class="flex">
+                <div class="vertical-text vertical-text-left">
+                  {{ item.updateDate }}
+                </div>
+                <div>
+                  <div class="vertical-circle"></div>
+                  <div v-if="index != historyList.length - 1" class="vertical-line"></div>
+                </div>
+                <div class="vertical-text">
+                  {{ item.operateUser }}<br />{{ item.dealMsg }}
+                </div>
+              </div>
+            </div>
+          </el-popover>
+          <img v-if="!scope.row.approveStatus" width="17" height="18"
+            style="vertical-align: text-top; position: relative; top: -1px" src="../../../public/img/edit.png"
+            @click="editClick(scope.row)" alt="" />
+        </template>
+      </el-table-column>
+      <el-table-column prop="addressUrl" label="附件">
+        <template slot-scope="scope">
+          <img width="18" height="20" style="vertical-align: text-top; position: relative; top: -1px"
+            src="../../../public/img/fujian.png" @click="fujian(scope.row)" alt="" />
+          <span v-if="scope.row.addressUrlArray != null">
+            {{
+              scope.row.addressUrlArray.length == 0
+                ? ''
+                : scope.row.addressUrlArray.length
+            }}
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="signingDate" label="签订日期"> </el-table-column>
+      <el-table-column prop="address" label="操作" width="160">
+        <template slot-scope="scope">
+          <img width="16" height="16" style="vertical-align: text-top; margin: 0 6px"
+            src="../../../public/img/chakan.png" @click="handleExamine(scope.row)" v-hasPermission="
+              `contractManagement.dcContract.dcContractInfo.view`
+            " alt="" />
+          <div v-if="
+              (scope.row.approveStatus != '待决策人审核' &&
+                !scope.row.approveStatus)
+            " style="display: inline-block">
+            <img width="17" height="16" style="vertical-align: text-top; margin: 0 6px"
+              src="../../../public/img/bianji.png" @click="handleEdit(scope.row)" v-hasPermission="
+                `contractManagement.dcContract.dcContractInfo.edit`
+              " alt="" />
+          </div>
+          <img width="16" height="17" style="
+              vertical-align: text-top;
+              position: relative;
+              top: -1px;
+              margin: 0 6px;
+            " v-if="scope.row.status != '执行中'&&scope.row.status != '已完成'" src="../../../public/img/shanchu.png"
+            v-hasPermission="
+              `contractManagement.dcContract.dcContractInfo.delete`
+            " @click="handleDelete(scope.row)" alt="" />
+          <img width="16" height="17" style="
+                vertical-align: text-top;
+                position: relative;
+                top: -1px;
+                margin: 0 6px;
+              " v-if="scope.row.status == '执行中'||scope.row.status == '已完成'" src="../../../public/img/daichu.png"
+            v-hasPermission="
+                `contractManagement.dcContract.dcContractInfo.list`
+              " @click="handleRecord(scope.row)" alt="" />
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
+      :page-size="deptCircularPage.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="deptBudgetTotal">
+    </el-pagination>
+
+    <WinseaContentModal v-model="accessoryTFs" :title="$t('system.noticeCircular.information')"
+      @on-cancel="handleClose">
+      <ws-upload ref="upload" :size-limit="size" @onChange="onChange" :comp-id="compId" :appendix-ids="appendixIdss"
+        accept=".jpg, .jpeg, .png, .pdf, .doc, .zip, .rar" />
+    </WinseaContentModal>
+  </div>
+</template>
+<script>
+  import {
+    getList,
+    export3,
+    editstatus,
+    billoperatehis,
+    deletecontract,
+    editInfo,
+  } from '@/model/contarct/index'
+  import {
+    downloadFile
+  } from '@/utils/batchDown'
+  import Pagination from '@/components/Pagination'
+  import WsUpload from '@/components/WsUpload'
+  import {
+    dayjs,
+    EventBus
+  } from 'base-core-lib'
+  export default {
+    name: 'viewSpareMoney',
+    components: {
+      WsUpload,
+      Pagination,
+    },
+    watch: {
+      vesselId(val) {
+        this.getList()
+      },
+      // isShow(val) {
+      //   this.showType = val
+      // },
+    },
+    data() {
+      return {
+        id: '',
+        size:0,
+        //弹出框
+        dialogViewSpareMoney: false,
+        // 是否显示
+        // showType: true,
+        // 年
+        year: '',
+        deptBudgetTotal: 0,
+        currentPage: 1,
+        pageSize: 9999,
+        searchType: 1,
+        searchTypeText: '未完成',
+        searchKeyWord: '',
+        contractType: 1,
+        goodsType: 1,
+        startDate: null,
+        endDate: null,
+        addressUrls: [],
+        deptCircularPage: {},
+        date: {
+          year: dayjs().format('YYYY'),
+          month: dayjs().format('MM'),
+        },
+        contractList: [],
+        deptBudgetList: {},
+        historyList: [],
+        appendixIdss: [],
+        compId: localStorage.getItem('ws-pf_compId'),
+        accessoryTFs: false,
+        taskTypeList: [{
+            value: '未完成',
+            type: 1,
+          },
+          {
+            value: '已完成',
+            type: 2,
+          },
+          {
+            value: '全部合同',
+            type: '',
+          },
+        ],
+        pickerOptions: {
+          shortcuts: [{
+              text: '本周',
+              onClick(picker) {
+                const end = new Date()
+                const start = new Date()
+                var thisDay = start.getDay()
+                var thisDate = start.getDate()
+                if (thisDay != 0) {
+                  start.setDate(thisDate - thisDay)
+                }
+                picker.$emit('pick', [start, end])
+              },
+            },
+            {
+              text: '本月',
+              onClick(picker) {
+                const end = new Date()
+                const start = new Date()
+                start.setDate(1)
+                picker.$emit('pick', [start, end])
+              },
+            },
+            {
+              text: '本季度',
+              onClick(picker) {
+                var oDate = new Date()
+
+                var thisYear = oDate.getFullYear()
+                var thisMonth = oDate.getMonth() + 1
+
+                var n = Math.ceil(thisMonth / 3) // 季度
+
+                var Month = n * 3 - 1
+
+                var start = new Date(thisYear, Month - 2, 1)
+                var end = new Date()
+
+                picker.$emit('pick', [start, end])
+              },
+            },
+          ],
+        },
+        value2: '',
+      }
+    },
+    activated() {
+      //cg.viewBudget
+      //cg.viewSpareMoney
+      // this.getVesselData();
+      this.getList()
+      // this.showType = this.isShow
+    },
+    methods: {
+      onChange() {
+        this.$refs.upload
+          .handleSaveBill()
+          .then(async (response) => {
+            this.deptBudgetList.addressUrl = response
+            this.deptBudgetList.id = this.id
+            this.deptBudgetList.flag = 1
+            editInfo(this.deptBudgetList)
+              .toPromise()
+              .then((response) => {
+                this.accessoryTFs = false
+                this.$message.success('上传成功')
+                this.getList()
+              })
+          })
+          .catch((res) => {
+            EventBus.$emit('error', (JSON.parse(res) || {}).message)
+            this.$refs.upload.clearFiles()
+          })
+      },
+      dateFormat(fmt, date) {
+        let ret
+        const opt = {
+          'Y+': date.getFullYear().toString(), // 年
+          'm+': (date.getMonth() + 1).toString(), // 月
+          'd+': date.getDate().toString(), // 日
+          'H+': date.getHours().toString(), // 时
+          // "M+": date.getMinutes().toString(),         // 分
+          // "S+": date.getSeconds().toString()          // 秒
+          // 有其他格式化字符需求可以继续添加，必须转化成字符串
+        }
+        for (let k in opt) {
+          ret = new RegExp('(' + k + ')').exec(fmt)
+          if (ret) {
+            fmt = fmt.replace(
+              ret[1],
+              ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, '0')
+            )
+          }
+        }
+        return fmt
+      },
+
+      handleClose() {
+        this.dialogViewSpareMoney = false
+      },
+      handleSizeChange(val) {
+        console.log(`每页 ${val} 条`)
+        this.pageSize = val
+        this.getList()
+      },
+      handleCurrentChange(val) {
+        this.currentPage = val
+        console.log(`当前页: ${val}`)
+        this.getList()
+      },
+      getList() {
+        getList({
+            compId: localStorage.getItem('ws-pf_compId'),
+            contractType: this.contractType,
+            goodsType: this.goodsType,
+            currentPage: this.currentPage,
+            pageSize: this.pageSize,
+            searchType: this.searchType,
+            searchKeyWord: this.searchKeyWord,
+            agreementType: '代储合同',
+            startDate: this.startDate,
+            endDate: this.endDate,
+            contrPage: this.contrPage,
+          })
+          .toPromise()
+          .then((response) => {
+            for (var i = 0; i < response.records.length; i++) {
+              if (response.records[i].completedQuantity) {
+                response.records[i].completedQuantity = response.records[i].completedQuantity.toFixed(3)
+              }
+              if (response.records[i].grainMoney && response.records[i].storageFeeNew) {
+                response.records[i].total = response.records[i].grainMoney + response.records[i].storageFeeNew
+              } else if (response.records[i].grainMoney) {
+                response.records[i].total = response.records[i].grainMoney
+              } else if (response.records[i].storageFeeNew) {
+                response.records[i].total = response.records[i].storageFeeNew
+              }else{
+                response.records[i].total = 0
+              }
+              if (response.records[i].grainMoneyEd && response.records[i].depositReceived) {
+                response.records[i].received = response.records[i].grainMoneyEd + response.records[i].depositReceived
+              } else if (response.records[i].grainMoneyEd) {
+                response.records[i].received = response.records[i].grainMoneyEd
+              } else if (response.records[i].depositReceived) {
+                response.records[i].received = response.records[i].depositReceived
+              }else{
+                response.records[i].received = 0
+              }
+              if (response.records[i].addressUrl != null) {
+                if (response.records[i].addressUrl) {
+                  response.records[i].addressUrlArray =
+                    response.records[i].addressUrl.split(',')
+                }
+              } else {
+                response.records[i].addressUrlArray = []
+              }
+            }
+            this.deptCircularPage.currentPage = response.current
+            this.deptCircularPage.pageSize = response.size
+            this.deptBudgetTotal = response.total
+            this.contractList = response
+            for (var i = 0; i < response.records.length; i++) {
+              var arr = new Array()
+              this.addressUrls[i] = new Array()
+              if (this.contractList.records[i].addressUrl != null) {
+                arr = this.contractList.records[i].addressUrl.split(',')
+                this.addressUrls[i] = arr
+              }
+            }
+          })
+      },
+      // 上传附件
+      uploadSuccess(data, files, url) {
+        console.log(data, files, url)
+
+        // this.deptBudgetList.
+        // this.formData.append('files', files)
+        // this.feedbackObj.uploadNameAttachment = data.appendixName
+        // this.feedbackObj.pathUploadAttachment = data.appendixPath
+        // // this.newAppendixs = files
+        // this.onChangeFlag = true
+      },
+      editClick(row) {
+        var status = ''
+        if (row.status == '待执行' || row.status == '已完成') {
+          status = '执行中'
+        } else if (row.status == '执行中') {
+          status = '已完成'
+        }
+        this.$confirm(`是否将状态改为${status}`, '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning',
+          })
+          .then(() => {
+            editstatus({
+                id: row.id,
+              })
+              .toPromise()
+              .then((response) => {
+                this.$notify.success({
+                  title: '成功',
+                  message: '状态修改成功',
+                })
+                this.getList()
+              })
+              .catch((response) => {
+                // EventBus.$emit('error', this.$t('showMessage.asteriskRequired'))
+              })
+          })
+          .catch(() => {
+            return false
+          })
+      },
+      selecttaskType(e) {
+        for (var i = 0; i < this.taskTypeList.length; i++) {
+          if (this.taskTypeList[i].value == e) {
+            this.searchType = this.taskTypeList[i].type
+            this.find()
+          }
+        }
+      },
+      fujian(row) {
+        this.id = row.id
+        this.accessoryTFs = true
+        this.appendixIdss = row.addressUrl
+        console.log(this.appendixIdss)
+      },
+      handleExamine(row) {
+        console.log(row)
+        this.$router.push({
+          name: 'storageContractExamine',
+          query: {
+            id: row.id,
+            status: row.status,
+          },
+        })
+      },
+      handleAdd() {
+        this.$router.push({
+          path: 'storageContractAdd',
+        })
+      },
+      handleEdit(row) {
+        this.$router.push({
+          name: 'storageContractEdit',
+          query: {
+            id: row.id,
+          },
+        })
+      },
+      // 关闭 dialog时 处理文件url 初始化upload组件
+      history(row) {
+        console.log(row)
+        billoperatehis({
+            id: row.id,
+          })
+          .toPromise()
+          .then((response) => {
+            this.historyList = response
+          })
+      },
+      find() {
+        if (this.value2) {
+          this.startDate = this.dateFormat('YYYY-mm-dd', this.value2[0])
+          this.endDate = this.dateFormat('YYYY-mm-dd', this.value2[1])
+        } else {
+          this.startDate = ''
+          this.endDate = ''
+        }
+        this.currentPage = 1
+        this.getList()
+      },
+      async exportlist() {
+        const {
+          data
+        } = await export3({
+          compId: localStorage.getItem('ws-pf_compId'),
+          contractType: this.contractType,
+          goodsType: this.goodsType,
+          currentPage: this.currentPage,
+          pageSize: this.pageSize,
+          searchType: this.searchType,
+          searchKeyWord: this.searchKeyWord,
+          agreementType: '代储合同',
+          startDate: this.startDate,
+          endDate: this.endDate,
+          contrPage: this.contrPage,
+        }, {}, {
+          responseType: 'blob',
+        }).toPromise()
+        downloadFile({
+          res: data,
+          fileName: `${
+          this.date.year + (this.date.month ? `-${this.date.month}` : '')
+        }_代储合同`,
+          type: 'xls',
+        })
+      },
+      // deletecontract(){},
+      //删除
+      handleDelete(row) {
+        var text = ''
+        if (row.deliverType == 1) {
+          text =
+            '删除该合同将同时永久删除合同对应的临时仓库相关数据，是否确定删除？'
+        } else {
+          text = '合同删除后不可恢复，是否继续删除？'
+        }
+        this.$confirm(text, '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning',
+          })
+          .then(() => {
+            deletecontract({
+                id: row.id,
+              })
+              .toPromise()
+              .then((response) => {
+                this.$notify.success({
+                  title: '成功',
+                  message: '删除成功',
+                })
+                this.getList()
+              })
+              .catch((response) => {})
+          })
+          .catch(() => {
+            return false
+          })
+      },
+      //记录
+      handleRecord(row) {
+        this.$router.push({
+          name: 'storageContractRecord',
+          query: {
+            contractNo: row.contractNo,
+            buyer: row.buyer,
+            weight: row.weight,
+            completedQuantity: row.completedQuantity,
+            total: row.total,
+            received: row.received,
+            storageFee:row.storageFee,
+            storageFeeStartdate:row.storageFeeStartdate,
+            storageFeeEnddate:row.storageFeeEnddate,
+            storageFeeWeight:row.storageFeeWeight,
+            contractId:row.id,
+            status:row.status
+          },
+        })
+      },
+    },
+  }
+</script>
+<style lang="scss" scoped>
+  .vertical-text-left {
+    width: 62px;
+    text-align: right;
+  }
+
+  .flex {
+    display: flex;
+  }
+
+  .el-range-editor.el-input__inner {
+    margin-left: 10px;
+  }
+
+  /deep/.base_header_layout .grid-content.right .find.el-button--primary {
+    width: 30px;
+    margin-left: -10px;
+    border-top-left-radius: 0px;
+    border-bottom-left-radius: 0px;
+  }
+
+  .el-button--primary {
+    background-color: #5878e8;
+    border-color: #5878e8;
+  }
+
+  .el-button--default {
+    border: 1px solid #5473e8;
+    color: #5473e8;
+  }
+
+  .warning {
+    width: 100%;
+    height: 2px;
+    background: red;
+  }
+
+  .executory,
+  .inExecution,
+  .done {
+    width: 6px;
+    height: 6px;
+    display: inline-block;
+    border-radius: 50%;
+    position: relative;
+    top: -1px;
+  }
+
+  .executory {
+    background: #ff9f24;
+  }
+
+  .inExecution {
+    background: #5878e8;
+  }
+
+  .done {
+    background: #50cad4;
+  }
+
+  .top-grade {
+    background: linear-gradient(90deg, #5678e9, #7993f6);
+    color: #fff;
+    padding: 3px;
+    border-radius: 2px;
+  }
+
+  .second-class {
+    background: linear-gradient(90deg, #50cdd9, #82e2ea);
+    color: #fff;
+    padding: 3px;
+    border-radius: 2px;
+  }
+
+  .third-class {
+    background: linear-gradient(90deg, #ffa735, #ffbf70);
+    color: #fff;
+    padding: 3px;
+    border-radius: 2px;
+  }
+
+  .substandard {
+    background: linear-gradient(90deg, #b2b4bb, #ced0d5);
+    color: #fff;
+    padding: 3px;
+    border-radius: 2px;
+  }
+
+  .wrap {
+    width: 400px;
+    position: absolute;
+    top: 131px;
+    left: 794px;
+    transform-origin: right center;
+    z-index: 2005;
+  }
+
+  .vertical-line {
+    height: 64px;
+    border-left: 2px solid #e9ecf7;
+    margin-left: 4px;
+    padding: 0 3px;
+    // border-image: -webkit-linear-gradient(#00eba7, #08b8e6) 30 30;
+    // border-image: -moz-linear-gradient(#00eba7, #08b8e6) 30 30;
+    // border-image: linear-gradient(#00eba7, #08b8e6) 30 30;
+  }
+
+  .el-pagination {
+    padding: 10px 15px;
+    margin-bottom: 0;
+    text-align: center;
+  }
+
+  /deep/.el-pager li.active {
+    color: #5878e8;
+    cursor: default;
+  }
+
+  /deep/.el-pager li:hover {
+    color: #5878e8;
+    cursor: default;
+  }
+
+  .vertical-circle {
+    width: 10px;
+    height: 10px;
+    border: 2px solid #5878e8;
+    background-color: #ffffff;
+    -webkit-border-radius: 100px;
+  }
+
+  .vertical-circle:first-child {
+    color: red;
+  }
+
+  .vertical-text {
+    margin: 0 10px;
+    color: #8890b1;
+    font-size: 12px;
+    margin-top: -4px;
+  }
+
+  /deep/.el-table .el-table__header .cell,
+  /deep/.el-table .el-table__body .cell {
+    text-align: center;
+  }
+
+  .typeselect {
+    width: 500px;
+  }
+
+  .padding-xs {
+    padding: 15px;
+    text-align: right;
+  }
+
+  .clearfix:after {
+    content: '';
+    display: block;
+    clear: both;
+  }
+
+  .el-table {
+    font-size: 16px;
+  }
+
+  .taskType {
+    width: 100%;
+    background-color: #fff;
+    margin-top: 2px;
+    margin-bottom: 10px;
+    list-style: none;
+
+    // padding-bottom: 20px;
+    li {
+      float: left;
+      border: 1px solid #6ea0f3;
+      border-radius: 5px;
+      max-width: 190px;
+      padding: 0 5px;
+      text-align: center;
+      margin: 10px 20px;
+      cursor: pointer;
+      font-size: 14px;
+
+      p {
+        margin: 8px 0px;
+
+        span {
+          color: #e74c3c;
+        }
+      }
+    }
+
+    li:hover {
+      background-color: #e4eeff;
+      color: #1d6ced;
+    }
+  }
+
+  .el-date-editor--date {
+    margin: 0 10px;
+  }
+
+  .findValue {
+    margin: 0 10px;
+  }
+
+  /deep/.findValue .el-input__inner {
+    border-top-right-radius: 0px;
+    border-bottom-right-radius: 0px;
+  }
+
+  .button-container {
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #fff;
+    width: 100%;
+    height: 50px;
+    padding: 0 10px;
+
+    &>div {
+      margin-left: 10px;
+      display: flex;
+      flex-wrap: nowrap;
+      flex-direction: row;
+
+      &>span {
+        line-height: 50px;
+      }
+    }
+
+    /deep/.auditFlow-box {
+      position: unset;
+      margin-left: 10px;
+
+      &/deep/.auditFlow-icon {
+        width: auto;
+        padding-right: 30px;
+      }
+
+      &/deep/.auditFlow-main {
+        position: absolute;
+      }
+    }
+  }
+
+  .box-app {
+    display: inline-block;
+    float: left;
+    margin-left: 30px;
+    line-height: 50px;
+  }
+
+  /deep/.el-dialog {
+    .el-form-item {
+      margin-bottom: 0 !important;
+
+      .el-input--medium {
+        textarea {
+          min-height: 100px !important;
+        }
+      }
+    }
+  }
+
+  .collapse-bottom {
+    margin-bottom: 20px;
+  }
+
+  .input-main .textarea .el-textarea__inner {
+    width: 100%;
+    z-index: 1;
+  }
+
+  /*.crt-main .textarea /deep/ .el-form-item__label {*/
+  /*  height: 82px;*/
+  /*}*/
+  // 控制select为只读的时候显示样式
+
+  .hide-sel {
+    .el-input__inner {
+      border: 0px;
+    }
+
+    .el-icon-arrow-up {
+      display: none;
+    }
+
+    .el-textarea__inner {
+      background-color: #fff !important;
+      border: 0;
+    }
+
+    .el-date-editor {
+      i {
+        display: none;
+      }
+    }
+
+    .is-disabled {
+      .el-input__inner:hover {
+        background-color: #fff !important;
+        border: 0;
+      }
+
+      color: #606266;
+
+      .el-input__inner {
+        background-color: #fff !important;
+        border: 0;
+        color: #606266;
+      }
+
+      .el-textarea__inner {
+        background-color: #fff !important;
+        border: 0;
+        color: #606266;
+      }
+    }
+  }
+
+  // 控制select为只读的时候显示样式
+  /deep/.ws-class-table-col {
+    height: auto;
+    padding: 0px 2px;
+
+    /deep/.el-input__inner {
+      padding: 0px 2px;
+    }
+  }
+
+  /deep/.is-disabled {
+    .el-input__prefix,
+    .el-input__suffix {
+      display: none;
+    }
+
+    .el-input__inner {
+      background-color: #fff;
+      border-color: #fff !important;
+      color: #000 !important;
+      font-size: 14px;
+      cursor: text;
+      padding: 0 !important;
+    }
+  }
+
+  /deep/.typeselect .el-input__inner {
+    color: #8890b1;
+  }
+</style>

src/views/contractManagement/storageContractAdd.vue

@@ -0,0 +1,1957 @@
+<template>
+  <div class="container">
+    <el-row>
+      <el-col :span="12">
+        <h2 class="bg-left title">创建代储合同</h2>
+      </el-col>
+      <el-col :span="12" class="bg-right">
+        <el-button class="bg-bottom" type="primary" size="small" @click="returnsales()"><img width="6" height="10"
+            style="vertion-align: bottom; margin-right: 3px" src="../../../public/img/lujing.png" alt="" />返回
+        </el-button>
+      </el-col>
+    </el-row>
+    <div class="center">
+      <ws-form ref="deptBudgetList" :model="deptBudgetList">
+        <div class="remark">
+          <h3>基本信息</h3>
+          <p style="color: #8890b1">
+            &nbsp;&nbsp;注：基本信息和货物信息均为必填项，“<span style="color:red">*</span>”
+            标记的条目提交后不可修改。
+          </p>
+        </div>
+        <!--基本信息-->
+        <ws-info-table>
+          <!--合同编号-->
+          <ws-form-item label="合同编号" span="1" prop="contractNo" class="readonly">
+            <ws-input v-model="deptBudgetList.contractNo" placeholder="请输入合同编号" maxlength="50" size="small"
+              :rules="ruleDeptBudget" />
+          </ws-form-item>
+          <!--运输方式-->
+        <ws-form-item label="运输方式" span="1" prop="shippingType">
+          <ws-input v-model="deptBudgetList.shippingType" placeholder="请输入运输方式" maxlength="100" size="small" />
+        </ws-form-item>
+         
+          <!--买方-->
+          <ws-form-item label="买方" span="1" prop="buyer" class="readonly">
+            <el-select v-model="deptBudgetList.buyer" placeholder="请选择买方名称" class="typeselect" filterable clearable
+              @change="buyerSelect">
+              <el-option v-for="(item,index) in customerinfo" :key="index" :label="item.customerName"
+                :value="item.customerName" />
+            </el-select>
+          </ws-form-item>
+           <!--结算方式-->
+          <ws-form-item label="结算方式" span="1" prop="settlementMethod">
+            <ws-input v-model="deptBudgetList.settlementMethod" placeholder="请输入结算方式" maxlength="120" size="small" />
+          </ws-form-item>
+           <!--卖方-->
+          <ws-form-item label="卖方" span="1" prop="seller" class="readonly">
+            <el-autocomplete class="inline-input" v-model="deptBudgetList.seller" :fetch-suggestions="querySearch2"
+              placeholder="请输入卖方名称" @select="handleSelect"></el-autocomplete>
+          </ws-form-item>
+          <ws-form-item label="交货方式" span="1" prop="seller" class="readonly">
+          <el-radio v-model="deptBudgetList.deliverType" label="1">我方送货</el-radio>
+          <el-radio v-model="deptBudgetList.deliverType" label="2">对方自提</el-radio>
+          <!-- <el-radio v-model="deptBudgetList.deliverType" v-if="deptBudgetList.priceType == '随行就市'" disabled label="1">
+              我方自提</el-radio>
+            <el-radio v-model="deptBudgetList.deliverType" v-else label="1">我方自提</el-radio>
+            <el-radio v-model="deptBudgetList.deliverType" v-if="deptBudgetList.priceType == '随行就市'" disabled label="2">
+              对方送货</el-radio>
+            <el-radio v-model="deptBudgetList.deliverType" v-else label="2">对方送货</el-radio> -->
+        </ws-form-item>
+        <!--买方电话-->
+          <ws-form-item label="买方电话" span="1" prop="contractNo">
+            <el-autocomplete class="inline-input" v-model="deptBudgetList.buyerPhone" :fetch-suggestions="querySearch3"
+              placeholder="请输入买方电话" @select="handleSelect"></el-autocomplete>
+          </ws-form-item>
+           <!--包装方式-->
+        <ws-form-item label="包装方式" span="1" prop="packingMethod">
+          <ws-select v-model="deptBudgetList.packingMethod" placeholder="" class="typeselect" :value="value1"
+            @change="selectpacking">
+            <ws-option v-for="item in packtypeList" :key="item.constKey" :label="item.constValue"
+              :value="item.constValue" />
+          </ws-select>
+        </ws-form-item>
+         <!--卖方电话-->
+          <ws-form-item label="卖方电话" span="1" prop="sellerPhone">
+            <!-- <ws-input v-model="deptBudgetList.sellerPhone" placeholder="请输入卖方电话" maxlength="100" size="small" /> -->
+            <el-autocomplete class="inline-input" v-model="deptBudgetList.sellerPhone" :fetch-suggestions="querySearch4"
+              placeholder="请输入卖方电话" @select="handleSelect"></el-autocomplete>
+          </ws-form-item>
+           <!--验收方式-->
+          <ws-form-item label="验收方式" span="1" prop="acceptanceMethod">
+            <el-select v-model="deptBudgetList.acceptanceMethod" placeholder="请选择验收方式" style="width: 100%" clearable
+              filterable @change="selectunitList">
+              <el-option v-for="(item, index) in unitList" :key="item.constValue" :label="item.constValue"
+                :value="item.constValue">
+                <span class="unit-left" style="float: left">
+                  <span v-if="item.flag == 'delete'">
+                    {{ item.constValue }}</span>
+                  <!-- 新增文本框 -->
+                  <div style="width: 160px" v-if="item.flag !== 'delete'" @click.stop>
+                    <ws-input v-model="item.constValue" clearable maxlength="10" style="width: 100%"></ws-input>
+                  </div>
+                </span>
+                <span style="float: right; color: #8492a6; font-size: 13px">
+                  <!-- 对号 -->
+                  <i class="el-icon-check" style="line-height: 29px; margin-left: 10px" v-if="item.flag !== 'delete'"
+                    @click.stop="saveClick(item, index)"></i>
+                  <!-- 编辑 -->
+                  <i class="el-icon-edit" style="line-height: 29px; margin-left: 10px" v-if="item.flag == 'delete'"
+                    @click.stop="editClick(item, index)"></i>
+                  <!-- 删除 -->
+                  <i class="el-icon-delete" style="line-height: 29px" @click.stop="deleteClick(item, index)"></i>
+                </span>
+              </el-option>
+              <!-- 新增按钮 -->
+              <el-option value="" label="">
+                <div style="
+                    text-align: right;
+                    border-top: 1px solid #dcdfe6;
+                    padding: 5px;
+                  ">
+                  <ws-button type="primary" @click.stop="addClick">{{
+                    $t('button.add')
+                  }}</ws-button>
+                </div>
+              </el-option>
+            </el-select>
+          </ws-form-item>
+          <!--重量（吨）-->
+          <ws-form-item label="重量（吨）" span="1" prop="weight">
+            <ws-input @input="weightchange" v-model="deptBudgetList.weight" placeholder="请输入重量（吨）" maxlength="100"
+              size="small" />
+          </ws-form-item>
+          <!--交货日期（起）-->
+          <ws-form-item label="交货日期（起）" span="1" prop="deliveryDateStart">
+            <ws-date-picker v-model="deptBudgetList.deliveryDateStart" type="date" placeholder="请选择交货日期（起）"
+              value-format="yyyy-MM-dd" />
+          </ws-form-item>
+         <!--溢短装（%）-->
+          <ws-form-item label="溢短装（%）" span="1" prop="overShort">
+            <ws-input v-model="deptBudgetList.overShort" placeholder="请输入溢短装比例（%）" maxlength="100" size="small" />
+          </ws-form-item>
+          <!--交货日期（止）-->
+          <ws-form-item label="交货日期（止）" span="1" prop="deliveryDateEnd">
+            <ws-date-picker v-model="deptBudgetList.deliveryDateEnd" type="date" placeholder="请选择交货日期（止）"
+              value-format="yyyy-MM-dd" />
+          </ws-form-item>
+          <ws-form-item label="货源所在地区" span="1" prop="sourceGoods">
+          <!-- <el-cascader
+            :options="options_"
+            v-model="selectedOptions"
+            clearable
+            size="large"
+            placeholder="请选择货源所在地区"
+            style="width: 200%"
+            @change="handleChange"
+          /> -->
+          <el-button @click="mapInputClick('source')" class='address-btn'>
+            {{newSelectedOptions}}
+          </el-button>
+        </ws-form-item>
+        <ws-form-item label="货源详细地址" span="1" prop="sourceGoods">
+          <ws-input v-model="deptBudgetList.sourceGoods" placeholder="请输入货源详细地址" maxlength="20" size="small" />
+        </ws-form-item>
+          <ws-form-item label="交货所在地区" span="1" prop="placeDelivery">
+            <el-button @click="mapInputClick('deliveryProv')" class="address-btn">
+              {{ newSelectedOptions1 }}
+            </el-button>
+          </ws-form-item>
+          <ws-form-item label="交货详细地址" span="1" prop="placeDelivery">
+            <ws-input v-model="deptBudgetList.placeDelivery" placeholder="请输入交货详细地址" maxlength="20" size="small" />
+          </ws-form-item>
+          <ws-form-item label="代储费(元/吨·天)" span="1" prop="storageFee">
+            <ws-input v-model="deptBudgetList.storageFee" placeholder="请输入仓储费" maxlength="20" size="small" />
+          </ws-form-item>
+          <!--合同单价（元/吨）-->
+        <ws-form-item class="readonly" label="合同单价（元/吨）" span="1" prop="unitContractPrice">
+          <ws-input @input="pricechange" v-model="deptBudgetList.unitContractPrice" placeholder="请输入合同单价"
+            maxlength="100" size="small" />
+        </ws-form-item>
+        <ws-form-item label="代储费起算重量" span="1" prop="storageFeeWeight">
+            <ws-input v-model="deptBudgetList.storageFeeWeight" placeholder="请输入代储费起算重量" maxlength="20" size="small" />
+          </ws-form-item>
+          <!--合同总价-->
+        <ws-form-item label="合同总价" span="1" prop="totalContractPrice">
+          <ws-input v-model="deptBudgetList.totalContractPrice" placeholder="请输入合同总价" maxlength="100" size="small" />
+        </ws-form-item>
+        <ws-form-item label="代储费起算日期" span="1" prop="storageFeeStartdate">
+            <ws-date-picker v-model="deptBudgetList.storageFeeStartdate" type="date" placeholder="请选择代储费起算日期"
+              value-format="yyyy-MM-dd" />
+          </ws-form-item>
+          <!--签订日期-->
+          <ws-form-item label="签订日期" span="1" prop="signingDate">
+            <ws-date-picker v-model="deptBudgetList.signingDate" type="date" placeholder="请选择合同签订日期"
+              value-format="yyyy-MM-dd" />
+          </ws-form-item>
+          <ws-form-item label="代储费预计终止日期" span="1" prop="storageFeeEnddate">
+            <ws-date-picker v-model="deptBudgetList.storageFeeEnddate" type="date" placeholder="请选择代储费预计终止日期"
+              value-format="yyyy-MM-dd" />
+          </ws-form-item>
+          <ws-form-item label="最终实际成交量（吨）" span="1" prop="finalTradingVolume">
+            <ws-input v-model="deptBudgetList.finalTradingVolume" placeholder="请输入最终实际成交量" maxlength="100"
+              size="small" />
+          </ws-form-item>
+        </ws-info-table>
+      </ws-form>
+    </div>
+    <div class="wenzi">
+      <h3>货物信息</h3>
+    </div>
+    <div class="center">
+      <ws-form ref="deptBudgetList" :rules="ruleDeptBudget" :model="deptBudgetList">
+        <!--货物信息-->
+
+        <ws-info-table>
+          <!--货名-->
+          <ws-form-item label="货名" span="1" prop="goodsName" class="readonly">
+            <ws-select v-model="deptBudgetList.contractGoodsInfo.goodsName" placeholder="" class="typeselect"
+              @change="selectgoodsName">
+              <ws-option v-for="item in goodnameList" :key="item.constKey" :label="item.constValue"
+                :value="item.constValue" />
+            </ws-select>
+          </ws-form-item>
+
+          <!--水分（%）<=-->
+          <ws-form-item label="水分（%）<=" span="1" prop="waterContent">
+            <ws-input v-model="deptBudgetList.contractGoodsInfo.waterContent" placeholder="请输入水分占比" maxlength="100"
+              size="small" />
+          </ws-form-item>
+
+          <!--品级-->
+          <ws-form-item label="品级" span="1" prop="grade" class="readonly">
+            <ws-select v-model="deptBudgetList.contractGoodsInfo.grade" placeholder="" class="typeselect"
+              @change="selectgrade">
+              <ws-option v-for="item in gradeList" :key="item.constKey" :label="item.constValue"
+                :value="item.constValue" />
+            </ws-select>
+          </ws-form-item>
+
+          <!--杂质（%）<=-->
+          <ws-form-item label="杂质（%）<=" span="1" prop="impurity">
+            <ws-input v-model="deptBudgetList.contractGoodsInfo.impurity" placeholder="请输入杂质占比（%）" maxlength="40"
+              size="small" />
+          </ws-form-item>
+
+          <!--容重(克/升)>=-->
+          <ws-form-item label="容重(克/升)>=" span="1" prop="bulkDensity">
+            <ws-input v-model="deptBudgetList.contractGoodsInfo.bulkDensity" placeholder="请输入容重" maxlength="40"
+              size="small" />
+          </ws-form-item>
+
+          <!--霉变粒（%）<=-->
+          <ws-form-item label="霉变粒（%）<=" span="1" prop="mildewGrain">
+            <ws-input v-model="deptBudgetList.contractGoodsInfo.mildewGrain" placeholder="请输入霉变粒占比（%）" maxlength="40"
+              size="small" />
+          </ws-form-item>
+
+          <!--热损伤（%）<=-->
+          <ws-form-item label="热损伤（%）<=" span="1" prop="jiaorenli">
+            <ws-input v-model="deptBudgetList.contractGoodsInfo.jiaorenli" placeholder="请输入输入热损伤占比（%）" maxlength="40"
+              size="small" />
+          </ws-form-item>
+          <!--不完善粒（%）<=-->
+          <ws-form-item label="不完善粒（%）<=" span="1" prop="imperfectGrain">
+            <ws-input v-model="deptBudgetList.contractGoodsInfo.imperfectGrain" placeholder="请输入不完善粒占比（%）"
+              maxlength="40" size="small" />
+          </ws-form-item>
+        </ws-info-table>
+      </ws-form>
+    </div>
+
+    <div class="wenzi">
+      <h3>流程信息</h3>
+    </div>
+    <div class="center">
+      <ws-form ref="deptBudgetList" :rules="ruleDeptBudget" :model="deptBudgetList">
+        <!--流程信息-->
+
+        <ws-info-table>
+          <!--合同收入（元）-->
+          <ws-form-item label="合同收入（元）" span="1" prop="goodsNameKey">
+            <ws-input v-model="deptBudgetList.contractProcessInfo.goodsNameKey" placeholder="请输入合同收入（元）" maxlength="100"
+              size="small" />
+          </ws-form-item>
+
+          <!--已开发票（元）-->
+          <ws-form-item label="已开销售发票（元）" span="1" prop="goodsName">
+            <ws-input v-model="deptBudgetList.contractProcessInfo.goodsName" placeholder="请输入已开发票金额" maxlength="100"
+              size="small" />
+          </ws-form-item>
+
+          <!--费用支出（元）-->
+          <ws-form-item label="费用支出（元）" span="1" prop="waterContent">
+            <ws-input v-model="deptBudgetList.contractProcessInfo.waterContent" placeholder="请输入费用支出（元）" maxlength="100"
+              size="small" />
+          </ws-form-item>
+
+          <!--未开发票（元）-->
+          <ws-form-item label="未开销售发票（元）" span="1" prop="impurity">
+            <ws-input v-model="deptBudgetList.contractProcessInfo.impurity" placeholder="请输入未开发票金额" maxlength="100"
+              size="small" />
+          </ws-form-item>
+
+          <!--未回款（元）-->
+          <ws-form-item label="未回款（元）" span="1" prop="mildewGrain">
+            <ws-input v-model="deptBudgetList.contractProcessInfo.mildewGrain" placeholder="请输入未回款（元）" maxlength="100"
+              size="small" />
+          </ws-form-item>
+          <!--双章原件回收情况-->
+          <ws-form-item label="双章原件回收情况" span="1" prop="grade">
+            <ws-select v-model="deptBudgetList.contractProcessInfo.grade" placeholder="" class="typeselect"
+              @change="selectpackingMethod">
+              <ws-option v-for="item in ChapterTwoList" :key="item.constKey" :label="item.constValue"
+                :value="item.constValue" />
+            </ws-select>
+          </ws-form-item>
+        </ws-info-table>
+      </ws-form>
+    </div>
+
+    <div class="wenzi">
+      <h3>备注信息</h3>
+    </div>
+    <div class="ce">
+      <ws-form ref="deptBudgetList" :rules="ruleDeptBudget" :model="deptBudgetList">
+        <!--备注信息-->
+        <ws-input v-model="deptBudgetList.remarks" type="textarea" row="3" placeholder="请输入备注信息，不超过200字"
+          maxlength="3000" />
+        <ws-upload ref="upload" :comp-id="compId" :appendix-ids="deptBudgetList.addressUrl" :size-limit="size"
+          @onChange="onChange" accept=".jpg, .jpeg, .png, .pdf, .doc, .zip, .rar"
+          v-hasPermission="`contractManagement.salesContract.salesContractInfo.appl`" />
+      </ws-form>
+      <div v-if="dialogVisible" class="map">
+        <map-drag @marker="marker" :isShowaddress="true" v-on:addressListen="getAddress" :type="type">
+        </map-drag>
+      </div>
+    </div>
+    <div style="text-align: right; padding: 10px" class="center">
+      <el-button class="bg-bottom" type="primary" size="small" @click="submit(deptBudgetList)">提交</el-button>
+    </div>
+  </div>
+</template>
+<script>
+  import {
+    packList,
+    addList,
+    xiala,
+    addxiala,
+    editxiala,
+    delxiala,
+    getRelationContractNo,
+    getcustomerinfo,
+    getstafffind
+  } from '@/model/contarct/index'
+  import {
+    getstaff,
+  } from '@/model/warehouse/index'
+  import WsUpload from '@/components/WsUpload'
+  import {
+    regionData,
+    CodeToText,
+    TextToCode
+  } from 'element-china-area-data'
+  import thirdPartyInspectionReportAddVue from '../system/shipInspection/thirdPartyInspectionReportAdd.vue'
+  import mapDrag from '@/components/mapdrag/mapdrag'
+  export default {
+    name: 'viewSpareMoney',
+    components: {
+      WsUpload,
+      mapDrag,
+    },
+    watch: {
+      vesselId(val) {
+        this.getVesselData()
+      },
+      isShow(val) {
+        this.showType = val
+      },
+    },
+    data() {
+      return {
+        options: [],
+        staffList: [],
+        restaurants1: [],
+        restaurants2: [],
+        restaurants3: [],
+        restaurants4: [],
+        customerinfo: [],
+        //弹出框
+        dialogViewSpareMoney: false,
+        dialogApproveFormVisible: false,
+        // 船舶类型
+        monetaryKey: null,
+        // 表格显示数据
+        tableDate: [],
+        // 是否显示
+        showType: true,
+        // 年
+        year: '',
+        type: '',
+        dialogVisible: false,
+        options_: regionData,
+        value1: '袋装',
+        selectedOptions: [],
+        newSelectedOptions: '请选择货源所在地',
+        selectedOptions1: [],
+        newSelectedOptions1: '请选择交货所在地区',
+        // 提交类型
+        submitType: true,
+        tableData: [{
+          date: 1111,
+          name: 'qqqq',
+          address: 'errrtt',
+        }, ],
+        trainingMethods: {},
+        packtypeList: [],
+        compId: localStorage.getItem('ws-pf_compId'),
+        mainReportAdd: {},
+        appendixIdsAdd: '',
+        size: 10,
+        unitList: [],
+        goodnameList: [],
+        gradeList: [],
+        ChapterTwoList: [],
+        deptBudgetList: {
+          deliverType: '1',
+          agreementType: '代储合同',
+          finalTradingVolume: 0,
+          totalContractPrice: 0,
+          contractGoodsInfo: {
+            goodsName: '',
+          },
+          buyerPhone: '',
+          contractProcessInfo: {},
+          addressUrl: '',
+          // sourceGoods: '',
+          sourceProvince :'',
+          sourceCity :'',
+          sourceArea :'',
+          sourceGoods: '',
+          sourceLocation :'',
+          placeDelivery: '',
+          settlementWeightMethod: '1',
+        },
+        pickerBeginDateBefore: {
+          disabledDate: (time) => {
+            return time.getTime() > Date.now()
+          },
+        },
+        ruleDeptBudget: {
+          contractNo: [{
+              required: true,
+              message: '请输入活动名称',
+              trigger: 'blur',
+            },
+            {
+              min: 6,
+              max: 50,
+              message: '长度在 6 到 50 个字符',
+              trigger: 'blur',
+            },
+          ],
+        },
+        selectIntendedShip: {},
+        interviewTypeList: {},
+        fileList: [],
+        priceTypeList: ['定价销售', '随行就市'],
+        contractNoList: [],
+        feedbackLeaders: [], //收货反馈负责人
+      }
+    },
+    activated() {
+      // this.newSelectedOptions = '请选择货源所在地'
+      this.newSelectedOptions1 = '请选择交货所在地'
+      this.deptBudgetList.packingMethod = '散装'
+      this.deptBudgetList.packingMethodKey = 1
+      this.deptBudgetList.contractGoodsInfo.goodsName = '玉米'
+      this.deptBudgetList.contractGoodsInfo.goodsNameKey = 1
+      this.deptBudgetList.contractProcessInfo.grade = '未回收'
+      this.deptBudgetList.contractProcessInfo.gradeKey = 1
+      this.deptBudgetList.contractGoodsInfo.grade = '一等品'
+      this.deptBudgetList.contractGoodsInfo.gradeKey = 1
+      getstafffind({
+          roles: 'd6a5c8a52da544309259f91f75de1ec6'
+        })
+        .toPromise()
+        .then((response) => {
+          this.options = response
+          this.staffList = response
+        })
+      this.loaddata()
+      // this.showType = this.isShow
+    },
+    mounted() {
+      this.restaurants1 = JSON.parse(localStorage.getItem('deptBudgetList_data1'));
+      this.restaurants2 = JSON.parse(localStorage.getItem('deptBudgetList_data2'));
+      this.restaurants3 = JSON.parse(localStorage.getItem('deptBudgetList_data3'));
+      this.restaurants4 = JSON.parse(localStorage.getItem('deptBudgetList_data4'));
+      if (!this.restaurants1) this.restaurants1 = [];
+      if (!this.restaurants2) this.restaurants2 = [];
+      if (!this.restaurants3) this.restaurants3 = [];
+      if (!this.restaurants4) this.restaurants4 = [];
+    },
+    methods: {
+      selectstaff(e) {
+        this.deptBudgetList.personCharge = ''
+        for (var i = 0; i < this.staffList.length; i++) {
+          for (var j = 0; j < e.length; j++) {
+            if (this.staffList[i].staffMobilePhone == e[j]) {
+              this.deptBudgetList.personCharge += this.staffList[i].staffName + ' ' + this.staffList[i]
+                .staffMobilePhone + ','
+            }
+          }
+        }
+        // console.log(this.deptBudgetList)
+      },
+      feedbackLeaderChange(e) {
+        this.deptBudgetList.feedbackLeader = this.feedbackLeaders[e].staffName
+        this.deptBudgetList.feedbackLeaderPhone = this.feedbackLeaders[e].staffMobilePhone
+      },
+      buyerSelect(item) {
+        // console.log(item)
+        for (let i = 0; i < this.customerinfo.length; i++) {
+          console.log(this.customerinfo[i].customerName, item)
+          if (this.customerinfo[i].customerName == item) {
+            this.deptBudgetList.buyerPhone = this.customerinfo[i].customerPhone
+          }
+        }
+      },
+      querySearch1(queryString, cb) {
+        var restaurants1 = this.restaurants1;
+        var results = queryString ? restaurants1.filter(this.createFilter(queryString)) : restaurants1;
+        // 调用 callback 返回建议列表的数据
+        cb(results);
+      },
+      querySearch2(queryString, cb) {
+        var restaurants2 = this.restaurants2;
+        var results = queryString ? restaurants2.filter(this.createFilter(queryString)) : restaurants2;
+        // 调用 callback 返回建议列表的数据
+        cb(results);
+      },
+      querySearch3(queryString, cb) {
+        var restaurants3 = this.restaurants3;
+        var results = queryString ? restaurants3.filter(this.createFilter(queryString)) : restaurants3;
+        // 调用 callback 返回建议列表的数据
+        cb(results);
+      },
+      querySearch4(queryString, cb) {
+        var restaurants4 = this.restaurants4;
+        var results = queryString ? restaurants4.filter(this.createFilter(queryString)) : restaurants4;
+        // 调用 callback 返回建议列表的数据
+        cb(results);
+      },
+      createFilter(queryString) {
+        return (restaurant) => {
+          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
+        };
+      },
+      handleSelect(item) {
+        console.log(item);
+      },
+      marker: function(item) {
+        this.deptBudgetList.warehousePositioning =
+          item.lnglat.lat + ',' + item.lnglat.lng
+      },
+      getAddress(data) {
+        console.log('getAddress', data)
+        if (data[4] == 'source') {
+          this.newSelectedOptions = data[0] + '/' + data[1] + '/' + data[2]
+          this.deptBudgetList.sourceProvince = data[0]
+          this.deptBudgetList.sourceCity = data[1]
+          this.deptBudgetList.sourceArea = data[2]
+          this.deptBudgetList.sourceGoods = data[3]
+          this.deptBudgetList.sourceLocation = data[5].lat + ',' + data[5].lng
+        } else {
+          this.newSelectedOptions1 = data[0] + '/' + data[1] + '/' + data[2]
+          this.deptBudgetList.deliveryProvince = data[0]
+          this.deptBudgetList.deliveryCity = data[1]
+          this.deptBudgetList.deliveryArea = data[2]
+          this.deptBudgetList.placeDelivery = data[3]
+          this.deptBudgetList.deliveryLocation = data[5].lat + ',' + data[5].lng
+        }
+      },
+      mapInputClick(type) {
+        this.dialogVisible = true
+        this.type = type
+      },
+      blurMap() {
+        this.dialogVisible = false
+      },
+      focusMap() {
+        this.dialogVisible = true
+      },
+      // 关闭 dialog时 处理文件url 初始化upload组件
+      handleClose() {
+        this.dialogViewSpareMoney = false
+      },
+      handleChange(value) {
+        this.selectedOptions = value
+      },
+      handleChange1(value) {
+        this.selectedOptions1 = value
+      },
+      returnsales() {
+        this.deptBudgetList = {
+          deliverType: '1',
+          agreementType: '代储合同',
+          finalTradingVolume: 0,
+          totalContractPrice: 0,
+          contractGoodsInfo: {
+            goodsName: '',
+          },
+          buyerPhone: '',
+          contractProcessInfo: {},
+          addressUrl: '',
+          // sourceGoods: '',
+          placeDelivery: '',
+          settlementWeightMethod: '1',
+        }
+        this.$router.push({
+          path: 'storageContract',
+        })
+      },
+      loaddata() {
+        this.getUnitList()
+        packList({
+            constId: 'CON2',
+          })
+          .toPromise()
+          .then((response) => {
+            this.goodnameList = response
+          })
+          // 包装方式
+        packList({
+            constId: 'CON1'
+          })
+          .toPromise()
+          .then((response) => {
+            this.packtypeList = response
+          })
+        // 品级
+        packList({
+            constId: 'CON3',
+          })
+          .toPromise()
+          .then((response) => {
+            this.gradeList = response
+          })
+        // 双章
+        packList({
+            constId: 'CON4',
+          })
+          .toPromise()
+          .then((response) => {
+            this.ChapterTwoList = response
+          })
+        getcustomerinfo({
+            compId: localStorage.getItem('ws-pf_compId'),
+          }).toPromise()
+          .then((response) => {
+            var arr = []
+            for (let i = 0; i < response.length; i++) {
+              if (response[i].customerType == '个人客户') {
+                arr.push({
+                  customerName: response[i].customerName,
+                  customerPhone: response[i].customerPhone
+                })
+              } else {
+                arr.push({
+                  customerName: response[i].compName,
+                  customerPhone: response[i].customerPhone
+                })
+              }
+            }
+            this.customerinfo = arr
+          })
+      },
+      selectRelation(e) {
+        for (var i = 0; i < this.contractNoList.length; i++) {
+          if (this.contractNoList[i].contractNo == e) {
+            this.deptBudgetList = this.contractNoList[i]
+            this.deptBudgetList.agreementNo = this.contractNoList[i].contractNo
+            this.deptBudgetList.contractNo = this.contractNoList[i].contractNo
+            this.deptBudgetList.agreementType = '补充协议'
+            // this.newSelectedOptions = this.contractNoList[i].sourceProvince + this.contractNoList[i].sourceCity + this
+            //   .contractNoList[i].sourceArea
+            // this.deptBudgetList.sourceGoods = this.contractNoList[i].sourceGoods
+            this.newSelectedOptions1 = this.contractNoList[i].deliveryProvince + this.contractNoList[i].deliveryCity +
+              this.contractNoList[i].deliveryArea
+            this.deptBudgetList.placeDelivery = this.contractNoList[i].placeDelivery
+          }
+        }
+      },
+      onChange() {
+        this.$refs.upload
+          .handleSaveBill()
+          .then(async (response) => {
+            this.deptBudgetList.addressUrl = response
+          })
+          .catch((res) => {
+            EventBus.$emit('error', (JSON.parse(res) || {}).message)
+            this.$refs.upload.clearFiles()
+          })
+      },
+      getUnitList() {
+        xiala({
+            compId: localStorage.getItem('ws-pf_compId'),
+            constCode: 'TYPEYAN',
+          })
+          .toPromise()
+          .then((response) => {
+            this.unitList = response
+            let currItem
+            this.unitList.forEach((item, index, arr) => {
+              item.flag = 'delete'
+              if (this.vModel == item.constKey) {
+                currItem = item
+              }
+            })
+            //
+            if (currItem) {
+              this.selectContract(currItem.constValue)
+            }
+          })
+      },
+
+      submit() {
+        // if (this.deptBudgetList.placeDelivery.indexOf('省') > -1) {
+        //   this.$message({
+        //     message: '请手动删除详细地址中省市区/市，避免重复显示省市区/市！',
+        //     type: 'warning',
+        //   })
+        //   return
+        // }
+        if (!this.deptBudgetList.contractNo) {
+          this.$message({
+            message: '合同编号不能为空',
+            type: 'warning',
+          })
+          return
+        }
+        if (
+          this.deptBudgetList.contractNo.length < 6 ||
+          this.deptBudgetList.contractNo.length > 50
+        ) {
+          this.$message({
+            message: '合同编号长度不符合要求,请输入6到50个字符之内！',
+            type: 'warning',
+          })
+          return
+        }
+        if (!this.deptBudgetList.shippingType) {
+          this.$message({
+            message: '运输方式不能为空',
+            type: 'warning',
+          })
+          return
+        }
+        if (
+          this.deptBudgetList.shippingType.length < 1 ||
+          this.deptBudgetList.shippingType.length > 20
+        ) {
+          this.$message({
+            message: '运输方式长度不符合要求,请输入1到20个字符之内！',
+            type: 'warning',
+          })
+          return
+        }
+        if (!this.deptBudgetList.buyer) {
+          this.$message({
+            message: '买方名称不能为空',
+            type: 'warning',
+          })
+          return
+        }
+        if (this.deptBudgetList.buyer.length > 30) {
+          this.$message({
+            message: '买方名称长度不符合要求,请输入30个字符之内！',
+            type: 'warning',
+          })
+          return
+        }
+        if (!this.deptBudgetList.settlementMethod) {
+          this.$message({
+            message: '结算方式不能为空',
+            type: 'warning',
+          })
+          return
+        }
+        if (
+          this.deptBudgetList.settlementMethod.length < 1 ||
+          this.deptBudgetList.settlementMethod.length > 20
+        ) {
+          this.$message({
+            message: '结算方式长度不符合要求,请输入1到20个字符之内！',
+            type: 'warning',
+          })
+          return
+        }
+        if (!this.deptBudgetList.seller) {
+          this.$message({
+            message: '请输入卖方名称！',
+            type: 'warning',
+          })
+          return
+        }
+        if (this.deptBudgetList.seller.length > 30) {
+          this.$message({
+            message: '卖方名称长度不符合要求,请输入30个字符之内！',
+            type: 'warning',
+          })
+          return
+        }
+        if (!this.deptBudgetList.buyerPhone) {
+          this.$message({
+            message: '请输入买方电话！',
+            type: 'warning',
+          })
+          return
+        }
+        // if (isNaN(this.deptBudgetList.buyerPhone)) {
+        //   this.$message({
+        //     message: '输入买方电话有误!',
+        //     type: 'warning',
+        //   })
+        //   return
+        // }
+        if (!this.deptBudgetList.sellerPhone) {
+          this.$message({
+            message: '请输入卖方电话！',
+            type: 'warning',
+          })
+          return
+        }
+        if (isNaN(this.deptBudgetList.sellerPhone)) {
+          this.$message({
+            message: '输入卖方电话有误！',
+            type: 'warning',
+          })
+          return
+        }
+        // if (this.deptBudgetList.deliverType == '2') {
+        //   if (!this.deptBudgetList.feedbackLeader) {
+        //     this.$message({
+        //       message: '请选择收货反馈负责人',
+        //       type: 'warning',
+        //     })
+        //     return
+        //   }
+        // }
+
+        if (!this.deptBudgetList.acceptanceMethod) {
+          this.$message({
+            message: '请选择验收方式',
+            type: 'warning',
+          })
+          return
+        }
+        if (!this.deptBudgetList.weight) {
+          this.$message({
+            message: '请输入重量！',
+            type: 'warning',
+          })
+          return
+        }
+        if (
+          isNaN(this.deptBudgetList.weight) ||
+          (String(this.deptBudgetList.weight).indexOf('.') != -1 &&
+            String(this.deptBudgetList.weight).length -
+            (String(this.deptBudgetList.weight).indexOf('.') + 1) >
+            3) ||
+          this.deptBudgetList.weight < 0 ||
+          this.deptBudgetList.weight > 200000
+        ) {
+          this.$message({
+            message: '输入重量有误！',
+            type: 'warning',
+          })
+          return
+        }
+        if (!this.deptBudgetList.storageFeeNew) {
+          this.$message({
+            message: '代储费不能为空！',
+            type: 'warning',
+          })
+          return
+        }
+        if (!this.deptBudgetList.storageFeeWeight) {
+          this.$message({
+            message: '代储费起算重量不能为空！',
+            type: 'warning',
+          })
+          return
+        }
+        if (
+          isNaN(this.deptBudgetList.storageFeeNew) ||
+          (String(this.deptBudgetList.storageFeeNew).indexOf('.') != -1 &&
+            String(this.deptBudgetList.storageFeeNew).length -
+            (String(this.deptBudgetList.storageFeeNew).indexOf('.') + 1) >
+            2) ||
+          this.deptBudgetList.storageFeeNew < 0 ||
+          this.deptBudgetList.storageFeeNew > 1000
+        ) {
+          this.$message({
+            message: '代储费填写错误！',
+            type: 'warning',
+          })
+          return
+        }
+        if (
+          isNaN(this.deptBudgetList.storageFeeWeight) ||
+          (String(this.deptBudgetList.storageFeeWeight).indexOf('.') != -1 &&
+            String(this.deptBudgetList.storageFeeWeight).length -
+            (String(this.deptBudgetList.storageFeeWeight).indexOf('.') + 1) >
+            3) ||
+          this.deptBudgetList.storageFeeWeight < 0 ||
+          this.deptBudgetList.storageFeeWeight > 200000
+        ) {
+          this.$message({
+            message: '代储费起算重量填写错误！',
+            type: 'warning',
+          })
+          return
+        }
+        if (!this.deptBudgetList.deliveryDateStart) {
+          this.$message({
+            message: '请选择交货日期（起）',
+            type: 'warning',
+          })
+          return
+        }
+        if (!this.deptBudgetList.overShort) {
+          this.$message({
+            message: '请输入溢短装！',
+            type: 'warning',
+          })
+          return
+        }
+        if (
+          isNaN(this.deptBudgetList.overShort) ||
+          (String(this.deptBudgetList.overShort).indexOf('.') != -1 &&
+            String(this.deptBudgetList.overShort).length -
+            (String(this.deptBudgetList.overShort).indexOf('.') + 1) >
+            2) ||
+          this.deptBudgetList.overShort < 0 ||
+          this.deptBudgetList.overShort > 50
+        ) {
+          this.$message({
+            message: '溢短装输入有误！',
+            type: 'warning',
+          })
+          return
+        }
+        if (!this.deptBudgetList.deliveryDateEnd) {
+          this.$message({
+            message: '请选择交货日期（止）',
+            type: 'warning',
+          })
+          return
+        }
+        if (!this.deptBudgetList.unitContractPrice) {
+            this.$message({
+              message: '请输入合同单价！',
+              type: 'warning',
+            })
+            return
+          }
+          if (
+            isNaN(this.deptBudgetList.unitContractPrice) ||
+            (String(this.deptBudgetList.unitContractPrice).indexOf('.') != -1 &&
+              String(this.deptBudgetList.unitContractPrice).length -
+              (String(this.deptBudgetList.unitContractPrice).indexOf('.') + 1) >
+              2) ||
+            this.deptBudgetList.unitContractPrice <= 0 ||
+            this.deptBudgetList.unitContractPrice > 10000
+          ) {
+            this.$message({
+              message: '合同单价输入有误！',
+              type: 'warning',
+            })
+            return
+          }
+          if (!this.deptBudgetList.totalContractPrice) {
+            this.$message({
+              message: '请输入合同总价！',
+              type: 'warning',
+            })
+            return
+          }
+          if (
+            isNaN(this.deptBudgetList.totalContractPrice) ||
+            (String(this.deptBudgetList.totalContractPrice).indexOf('.') != -1 &&
+              String(this.deptBudgetList.totalContractPrice).length -
+              (String(this.deptBudgetList.totalContractPrice).indexOf('.') +
+                1) >
+              2) ||
+            this.deptBudgetList.totalContractPrice <= 0 ||
+            this.deptBudgetList.totalContractPrice > 1000000000
+          ) {
+            this.$message({
+              message: '合同总价输入有误！',
+              type: 'warning',
+            })
+            return
+          }
+        //时间
+        if (
+          new Date(this.deptBudgetList.deliveryDateStart).getTime() >
+          new Date(this.deptBudgetList.deliveryDateEnd).getTime()
+        ) {
+          this.$message({
+            message: '交货日期（止）选择错误',
+            type: 'warning',
+          })
+          return
+        }
+        if (!this.newSelectedOptions) {
+          this.$message({
+            message: '请选择货源所在地区！',
+            type: 'warning',
+          })
+          return
+        }
+        if (!this.deptBudgetList.sourceGoods) {
+          this.$message({
+            message: '请输入货源详细地址！',
+            type: 'warning',
+          })
+          return
+        }
+        if (!this.newSelectedOptions1) {
+          this.$message({
+            message: '请选择交货所在地区！',
+            type: 'warning',
+          })
+          return
+        }
+        if (!this.deptBudgetList.placeDelivery) {
+          this.$message({
+            message: '请输入交货详细地址！',
+            type: 'warning',
+          })
+          return
+        }
+        if (!this.deptBudgetList.signingDate) {
+          this.$message({
+            message: '请选择签订日期',
+            type: 'warning',
+          })
+          return
+        }
+        if (
+          isNaN(this.deptBudgetList.finalTradingVolume) ||
+          (String(this.deptBudgetList.finalTradingVolume).indexOf('.') != -1 &&
+            String(this.deptBudgetList.finalTradingVolume).length -
+            (String(this.deptBudgetList.finalTradingVolume).indexOf('.') + 1) >
+            3) ||
+          this.deptBudgetList.finalTradingVolume < 0 ||
+          this.deptBudgetList.finalTradingVolume > 200000
+        ) {
+          this.$message({
+            message: '最终实际成交量有误！',
+            type: 'warning',
+          })
+          return
+        }
+        //货物信息
+        if (!this.deptBudgetList.contractGoodsInfo.goodsName) {
+          this.$message({
+            message: '请选择货名',
+            type: 'warning',
+          })
+          return
+        }
+        if (!this.deptBudgetList.contractGoodsInfo.waterContent) {
+          this.$message({
+            message: '请输入水分',
+            type: 'warning',
+          })
+          return
+        }
+        if (
+          (this.deptBudgetList.contractGoodsInfo.waterContent &&
+            String(this.deptBudgetList.contractGoodsInfo.waterContent).indexOf(
+              '.'
+            ) != -1 &&
+            String(this.deptBudgetList.contractGoodsInfo.waterContent).length -
+            (String(this.deptBudgetList.contractGoodsInfo.waterContent).indexOf(
+                '.'
+              ) +
+              1) >
+            2) ||
+          this.deptBudgetList.contractGoodsInfo.waterContent > 40 ||
+          this.deptBudgetList.contractGoodsInfo.waterContent < 0
+        ) {
+          this.$message({
+            message: '水分输入错误',
+            type: 'warning',
+          })
+          return
+        }
+        if (!this.deptBudgetList.contractGoodsInfo.grade) {
+          this.$message({
+            message: '请选择品级',
+            type: 'warning',
+          })
+          return
+        }
+        if (!this.deptBudgetList.contractGoodsInfo.impurity) {
+          this.$message({
+            message: '请输入杂质',
+            type: 'warning',
+          })
+          return
+        }
+        if (
+          (this.deptBudgetList.contractGoodsInfo.impurity &&
+            String(this.deptBudgetList.contractGoodsInfo.impurity).indexOf('.') !=
+            -1 &&
+            String(this.deptBudgetList.contractGoodsInfo.impurity).length -
+            (String(this.deptBudgetList.contractGoodsInfo.impurity).indexOf(
+                '.'
+              ) +
+              1) >
+            2) ||
+          this.deptBudgetList.contractGoodsInfo.impurity > 40 ||
+          this.deptBudgetList.contractGoodsInfo.impurity < 0
+        ) {
+          this.$message({
+            message: '杂质输入错误',
+            type: 'warning',
+          })
+          return
+        }
+        if (!this.deptBudgetList.contractGoodsInfo.bulkDensity) {
+          this.$message({
+            message: '请输入容重',
+            type: 'warning',
+          })
+          return
+        }
+        if (
+          (this.deptBudgetList.contractGoodsInfo.bulkDensity &&
+            String(this.deptBudgetList.contractGoodsInfo.bulkDensity).indexOf(
+              '.'
+            ) != -1 &&
+            String(this.deptBudgetList.contractGoodsInfo.bulkDensity).length -
+            (String(this.deptBudgetList.contractGoodsInfo.bulkDensity).indexOf(
+                '.'
+              ) +
+              1) >
+            2) ||
+          this.deptBudgetList.contractGoodsInfo.bulkDensity > 1000 ||
+          this.deptBudgetList.contractGoodsInfo.bulkDensity < 0
+        ) {
+          this.$message({
+            message: '容重输入错误',
+            type: 'warning',
+          })
+          return
+        }
+        if (!this.deptBudgetList.contractGoodsInfo.mildewGrain) {
+          this.$message({
+            message: '请输入霉变粒',
+            type: 'warning',
+          })
+          return
+        }
+        if (
+          !this.deptBudgetList.contractGoodsInfo.mildewGrain ||
+          (String(this.deptBudgetList.contractGoodsInfo.mildewGrain).indexOf(
+              '.'
+            ) != -1 &&
+            String(this.deptBudgetList.contractGoodsInfo.mildewGrain).length -
+            (String(this.deptBudgetList.contractGoodsInfo.mildewGrain).indexOf(
+                '.'
+              ) +
+              1) >
+            2) ||
+          this.deptBudgetList.contractGoodsInfo.mildewGrain > 40 ||
+          this.deptBudgetList.contractGoodsInfo.mildewGrain < 0
+        ) {
+          this.$message({
+            message: '霉变粒输入错误',
+            type: 'warning',
+          })
+          return
+        }
+        if (!this.deptBudgetList.contractGoodsInfo.jiaorenli) {
+          this.$message({
+            message: '请输入热损伤',
+            type: 'warning',
+          })
+          return
+        }
+        if (
+          !this.deptBudgetList.contractGoodsInfo.jiaorenli ||
+          (String(this.deptBudgetList.contractGoodsInfo.jiaorenli).indexOf('.') !=
+            -1 &&
+            String(this.deptBudgetList.contractGoodsInfo.jiaorenli).length -
+            (String(this.deptBudgetList.contractGoodsInfo.jiaorenli).indexOf(
+                '.'
+              ) +
+              1) >
+            2) ||
+          this.deptBudgetList.contractGoodsInfo.jiaorenli > 40 ||
+          this.deptBudgetList.contractGoodsInfo.jiaorenli < 0
+        ) {
+          this.$message({
+            message: '热损伤输入错误',
+            type: 'warning',
+          })
+          return
+        }
+        if (!this.deptBudgetList.contractGoodsInfo.imperfectGrain) {
+          this.$message({
+            message: '请输入不完善粒',
+            type: 'warning',
+          })
+          return
+        }
+        if (
+          !this.deptBudgetList.contractGoodsInfo.imperfectGrain ||
+          (String(this.deptBudgetList.contractGoodsInfo.imperfectGrain).indexOf(
+              '.'
+            ) != -1 &&
+            String(this.deptBudgetList.contractGoodsInfo.imperfectGrain).length -
+            (String(
+                this.deptBudgetList.contractGoodsInfo.imperfectGrain
+              ).indexOf('.') +
+              1) >
+            2) ||
+          this.deptBudgetList.contractGoodsInfo.imperfectGrain > 40 ||
+          this.deptBudgetList.contractGoodsInfo.imperfectGrain < 0
+        ) {
+          this.$message({
+            message: '不完善粒输入错误',
+            type: 'warning',
+          })
+          return
+        }
+        if (this.deptBudgetList.contractProcessInfo.goodsNameKey) {
+
+          if (
+            !this.deptBudgetList.contractProcessInfo.goodsNameKey > 1000000000 ||
+            this.deptBudgetList.contractProcessInfo.goodsNameKey < 100 ||
+            (String(this.deptBudgetList.contractProcessInfo.goodsNameKey).indexOf(
+                '.'
+              ) != -1 &&
+              String(this.deptBudgetList.contractProcessInfo.goodsNameKey).length -
+              (String(
+                  this.deptBudgetList.contractProcessInfo.goodsNameKey
+                ).indexOf('.') +
+                1) >
+              2)
+          ) {
+            this.$message({
+              message: '合同收入金额输入错误',
+              type: 'warning',
+            })
+            return
+          }
+        }
+        if (
+          this.deptBudgetList.contractProcessInfo.waterContent > 10000000 ||
+          this.deptBudgetList.contractProcessInfo.waterContent < 0 ||
+          (String(this.deptBudgetList.contractProcessInfo.waterContent).indexOf(
+              '.'
+            ) != -1 &&
+            String(this.deptBudgetList.contractProcessInfo.waterContent).length -
+            (String(
+                this.deptBudgetList.contractProcessInfo.waterContent
+              ).indexOf('.') +
+              1) >
+            2)
+        ) {
+          this.$message({
+            message: '费用支出输入错误',
+            type: 'warning',
+          })
+          return
+        }
+        if (
+          (this.deptBudgetList.contractProcessInfo.goodsName > 1000000000) |
+          (this.deptBudgetList.contractProcessInfo.goodsName < 0) ||
+          (String(this.deptBudgetList.contractProcessInfo.goodsName).indexOf(
+              '.'
+            ) != -1 &&
+            String(this.deptBudgetList.contractProcessInfo.goodsName).length -
+            (String(this.deptBudgetList.contractProcessInfo.goodsName).indexOf(
+                '.'
+              ) +
+              1) >
+            2)
+        ) {
+          this.$message({
+            message: '已开发票金额输入错误',
+            type: 'warning',
+          })
+          return
+        }
+        if (
+          (this.deptBudgetList.contractProcessInfo.impurity > 1000000000) |
+          (this.deptBudgetList.contractProcessInfo.impurity < 0) ||
+          (String(this.deptBudgetList.contractProcessInfo.impurity).indexOf(
+              '.'
+            ) != -1 &&
+            String(this.deptBudgetList.contractProcessInfo.impurity).length -
+            (String(this.deptBudgetList.contractProcessInfo.impurity).indexOf(
+                '.'
+              ) +
+              1) >
+            2)
+        ) {
+          this.$message({
+            message: '未开发票金额输入错误',
+            type: 'warning',
+          })
+          return
+        }
+        if (
+          (!this.deptBudgetList.contractProcessInfo.mildewGrain > 1000000000) |
+          (this.deptBudgetList.contractProcessInfo.mildewGrain < 0) ||
+          (String(this.deptBudgetList.contractProcessInfo.mildewGrain).indexOf(
+              '.'
+            ) != -1 &&
+            String(this.deptBudgetList.contractProcessInfo.mildewGrain).length -
+            (String(
+                this.deptBudgetList.contractProcessInfo.mildewGrain
+              ).indexOf('.') +
+              1) >
+            2)
+        ) {
+          this.$message({
+            message: '未回款金额输入错误',
+            type: 'warning',
+          })
+          return
+        }
+        this.$refs.deptBudgetList.validate((valid) => {
+          if (valid) {
+            if(this.deptBudgetList.personPhone){
+              this.deptBudgetList.personPhone=this.deptBudgetList.personPhone.toString()
+            }
+            this.deptBudgetList.compId = this.compId
+            this.deptBudgetList.contractType = 1
+            this.deptBudgetList.goodsType = 1
+            addList(this.deptBudgetList)
+              .toPromise()
+              .then((response) => {
+                // 存储买方、卖方、买方电话、卖方电话
+                let _data = {
+                  byer: this.deptBudgetList.buyer,
+                  seller: this.deptBudgetList.seller,
+                  buyerPhone: this.deptBudgetList.buyerPhone,
+                  sellerPhone: this.deptBudgetList.sellerPhone
+                }
+                if (this.restaurants1.length <= 20) {
+                  this.restaurants1 = this.restaurants1.filter(function(val) {
+                    if (val.value != _data.byer) {
+                      return val
+                    }
+                  })
+                  this.restaurants1.unshift({
+                    value: _data.byer
+                  })
+                } else {
+                  this.restaurants1.unshift({
+                    value: _data.byer
+                  }).pop({
+                    value: _data.byer
+                  })
+                }
+                localStorage.setItem('deptBudgetList_data1', JSON.stringify(this.restaurants1));
+                if (this.restaurants2.length <= 20) {
+                  this.restaurants2 = this.restaurants2.filter(function(val) {
+                    if (val.value != _data.seller) {
+                      return val
+                    }
+                  })
+                  this.restaurants2.unshift({
+                    value: _data.seller
+                  })
+                } else {
+                  this.restaurants2.unshift({
+                    value: _data.seller
+                  }).pop({
+                    value: _data.seller
+                  })
+                }
+                localStorage.setItem('deptBudgetList_data2', JSON.stringify(this.restaurants2));
+                if (this.restaurants2.length <= 20) {
+                  this.restaurants3 = this.restaurants3.filter(function(val) {
+                    if (val.value != _data.buyerPhone) {
+                      return val
+                    }
+                  })
+                  this.restaurants3.unshift({
+                    value: _data.buyerPhone
+                  })
+                } else {
+                  this.restaurants3.unshift({
+                    value: _data.buyerPhone
+                  }).pop({
+                    value: _data.buyerPhone
+                  })
+                }
+                localStorage.setItem('deptBudgetList_data3', JSON.stringify(this.restaurants3));
+                if (this.restaurants4.length <= 20) {
+                  this.restaurants4 = this.restaurants3.filter(function(val) {
+                    if (val.value != _data.sellerPhone) {
+                      return val
+                    }
+                  })
+                  this.restaurants4.unshift({
+                    value: _data.sellerPhone
+                  })
+                } else {
+                  this.restaurants4.unshift({
+                    value: _data.sellerPhone
+                  }).pop({
+                    value: _data.sellerPhone
+                  })
+                }
+                localStorage.setItem('deptBudgetList_data4', JSON.stringify(this.restaurants4));
+                this.$message.success('添加成功')
+                this.deptBudgetList = {
+                  deliverType: '1',
+                  agreementType: '代储合同',
+                  finalTradingVolume: 0,
+                  totalContractPrice: 0,
+                  contractGoodsInfo: {
+                    goodsName: '',
+                  },
+                  buyerPhone: '',
+                  contractProcessInfo: {},
+                  addressUrl: '',
+                  // sourceGoods: '',
+                  placeDelivery: '',
+                  settlementWeightMethod: '1',
+                }
+
+                this.$router.push({
+                  path: 'storageContract',
+                })
+              })
+          } else {
+            EventBus.$emit('error', this.$t('showMessage.asteriskRequired'))
+            return false
+          }
+        })
+      },
+      resetForm(deptBudgetList) {
+        this.$refs[deptBudgetList].resetFields()
+      },
+      saveClick(item, index) {
+        console.log(item)
+
+        if (Object.is(item.id, 1)) {
+          return
+        }
+        if (Object.is(this.unitList[index].flag, 'delete')) {
+          this.$set(this.unitList, index, {
+            flag: 'check',
+          })
+        } else {
+          this.$set(this.unitList, index, {
+            flag: 'delete',
+          })
+        }
+        if (!item.constValue) {
+          this.unitList.splice(index, 1)
+          return
+        }
+        if (item.flag == 'add') {
+          item.constKey = Math.random() * 20
+          this.trainingMethods.compId = localStorage.getItem('ws-pf_compId')
+          this.trainingMethods.constKey = item.constKey
+          this.trainingMethods.constCode = 'TYPEYAN'
+          this.trainingMethods.constValue = item.constValue
+          this.trainingMethods.id = item.id
+          addxiala(this.trainingMethods)
+            .toPromise()
+            .then((response) => {
+              this.getUnitList()
+            })
+        } else if (item.flag == 'check') {
+          this.trainingMethods.compId = localStorage.getItem('ws-pf_compId')
+          this.trainingMethods.constKey = item.constKey
+          this.trainingMethods.constCode = 'TYPEYAN'
+          this.trainingMethods.constValue = item.constValue
+          this.trainingMethods.id = item.id
+          editxiala(this.trainingMethods)
+            .toPromise()
+            .then((response) => {
+              this.getUnitList()
+            })
+        }
+      },
+      handleExamine() {},
+      approve() {},
+      addClick() {
+        this.unitList.push({
+          flag: 'add',
+          constValue: '',
+          constKey: '',
+        })
+      },
+      selectChapterTwo(e) {
+        for (var i = 0; i < this.ChapterTwoList.length; i++) {
+          if (this.ChapterTwoList[i].constValue == e) {
+            this.deptBudgetList.gradeKey = this.ChapterTwoList[i].constKey
+          }
+        }
+      },
+      selectunitList(e) {
+        for (var i = 0; i < this.unitList.length; i++) {
+          if (this.unitList[i].constValue == e) {
+            this.deptBudgetList.packingMethodKey = this.unitList[i].constKey
+          }
+        }
+      },
+      selectgrade(e) {
+        for (var i = 0; i < this.gradeList.length; i++) {
+          if (this.gradeList[i].constValue == e) {
+            this.deptBudgetList.gradeKey = this.gradeList[i].constKey
+            this.deptBudgetList.contractGoodsInfo.gradeKey =
+              this.gradeList[i].constKey
+          }
+        }
+      },
+      selectgoodsName(e) {
+        for (var i = 0; i < this.goodnameList.length; i++) {
+          if (this.goodnameList[i].constValue == e) {
+            this.deptBudgetList.goodsNameKey = this.goodnameList[i].constKey
+            this.deptBudgetList.contractGoodsInfo.goodsNameKey =
+              this.goodnameList[i].constKey
+          }
+        }
+      },
+      selectpackingMethod(e) {
+        for (var i = 0; i < this.ChapterTwoList.length; i++) {
+          if (this.ChapterTwoList[i].constValue == e) {
+            this.deptBudgetList.acceptanceMethodKey =
+              this.ChapterTwoList[i].constKey
+          }
+        }
+      },
+      selectpacking(e) {
+        for (var i = 0; i < this.packtypeList.length; i++) {
+          if (this.packtypeList[i].constValue == e) {
+            this.deptBudgetList.packingMethodKey = this.packtypeList[i].constKey
+          }
+        }
+      },
+      selectpriceType(e) {
+        if (e == '随行就市') {
+          this.deptBudgetList.deliverType = '1'
+        }
+      },
+      weightchange(e) {
+        this.deptBudgetList.finalTradingVolume = e
+      },
+      pricechange(e) {
+        this.deptBudgetList.totalContractPrice = e * this.deptBudgetList.weight
+      },
+      // 编辑
+      editClick(item, index) {
+        const map = JSON.parse(JSON.stringify(item))
+        if (Object.is(item.id, 1)) {
+          return
+        }
+        if (Object.is(this.unitList[index].flag, 'delete')) {
+          map.flag = 'check'
+          this.$set(this.unitList, index, map)
+        } else {
+          map.flag = 'delete'
+          this.$set(this.unitList, index, map)
+        }
+      },
+      // 删除
+      deleteClick(item, index) {
+        if (Object.is(item.constKey, 1)) {
+          return
+        }
+        if (!item.constValue) {
+          this.unitList.splice(index, 1)
+          return
+        }
+        delxiala({
+            id: this.unitList[index].id,
+          })
+          .toPromise()
+          .then((response) => {
+            this.getUnitList()
+            this.pleaseChoose = ''
+          })
+      },
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  /deep/.ws-info-table .el-form-item .el-form-item__content {
+    padding: 0 25px;
+  }
+
+  /deep/.ws-info-table .el-form-item {
+    border-right: 1px solid #cdd2dc;
+    border-bottom: 1px solid #cdd2dc;
+  }
+
+  .title {
+    position: relative;
+  }
+
+  .title::before {
+    content: '';
+    display: inline-block;
+    width: 5px;
+    height: 30px;
+    background: #5473e8;
+    position: absolute;
+    left: 0;
+  }
+
+  .el-button--primary {
+    background-color: #5878e8;
+    border-color: #5878e8;
+  }
+
+  .upload-demo {
+    margin-top: 10px;
+  }
+
+  .el-col {
+    background: #f6f7fc;
+  }
+
+  .readonly {
+    position: relative;
+  }
+
+  .readonly:after {
+    content: '*';
+    color: #ff2727;
+    position: absolute;
+    right: 8px;
+    z-index: 10;
+    top: 21%;
+    font-size: 20px;
+  }
+
+  /deep/.ws-info-table .el-form-item .el-form-item__content {
+    padding: 0 25px;
+    border-left: 1px solid #cdd2dc;
+    background: #fafbfc;
+  }
+
+  /deep/.ws-info-table .el-form-item .el-form-item__label {
+    width: 140px;
+    text-align: center;
+    background: #f0f2f6;
+    // border: 1px solid #cdd2dc;
+  }
+
+  .button-container {
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #fff;
+    width: 100%;
+    height: 50px;
+    padding: 0 10px;
+
+    &>div {
+      margin-left: 10px;
+      display: flex;
+      flex-wrap: nowrap;
+      flex-direction: row;
+
+      &>span {
+        line-height: 50px;
+      }
+    }
+
+    /deep/.auditFlow-box {
+      position: unset;
+      margin-left: 10px;
+
+      &/deep/.auditFlow-icon {
+        width: auto;
+        padding-right: 30px;
+      }
+
+      &/deep/.auditFlow-main {
+        position: absolute;
+      }
+    }
+  }
+
+  .box-app {
+    display: inline-block;
+    float: left;
+    margin-left: 30px;
+    line-height: 50px;
+  }
+
+  /deep/.el-dialog {
+    .el-form-item {
+      margin-bottom: 0 !important;
+
+      .el-input--medium {
+        textarea {
+          min-height: 100px !important;
+        }
+      }
+    }
+  }
+
+  .collapse-bottom {
+    margin-bottom: 20px;
+  }
+
+  .input-main .textarea .el-textarea__inner {
+    width: 100%;
+    z-index: 1;
+  }
+
+  .bg-left {
+    padding-left: 30px;
+  }
+
+  .bg-right {
+    padding-right: 10px;
+    text-align: right;
+  }
+
+  .bg-bottom {
+    margin: 16px 0px;
+  }
+
+  .wenzi {
+    width: 70%;
+    margin: 0 auto;
+  }
+
+  .wenzi h3 {
+    display: inline-block;
+    left: 10px;
+  }
+
+  .wenzi p {
+    display: inline-block;
+  }
+
+  .center {
+    width: 70%;
+    margin: 0 auto;
+  }
+
+  .el-form-item {
+    width: 50%;
+  }
+
+  .el-form-item__label {
+    text-align: center;
+  }
+
+  .ce {
+    width: 70%;
+    margin: 0 auto;
+  }
+
+  /*.crt-main .textarea /deep/ .el-form-item__label {*/
+  /*  height: 82px;*/
+  /*}*/
+  // 控制select为只读的时候显示样式
+
+  .hide-sel {
+    .el-input__inner {
+      border: 0px;
+    }
+
+    .el-icon-arrow-up {
+      display: none;
+    }
+
+    .el-textarea__inner {
+      background-color: #fff !important;
+      border: 0;
+    }
+
+    .el-date-editor {
+      i {
+        display: none;
+      }
+    }
+
+    .is-disabled {
+      .el-input__inner:hover {
+        background-color: #fff !important;
+        border: 0;
+      }
+
+      color: #606266;
+
+      .el-input__inner {
+        background-color: #fff !important;
+        border: 0;
+        color: #606266;
+      }
+
+      .el-textarea__inner {
+        background-color: #fff !important;
+        border: 0;
+        color: #606266;
+      }
+    }
+  }
+
+  /deep/.ws-info-table .el-form-item .el-form-item__label {
+    width: 130px;
+  }
+
+  //*号
+  .unchangeable {
+    position: absolute;
+    width: 9px;
+    height: 22px;
+    font-size: 16px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #ff2727;
+    line-height: 22px;
+    display: inline-block;
+    right: 14px;
+  }
+
+  /deep/.el-input,
+  /deep/.el-date-editor {
+    font-size: 13px;
+  }
+
+  /deep/.el-textarea {
+    width: 101%;
+    margin: 0px;
+  }
+
+  /deep/el-date-editor--date {
+    width: 200px;
+  }
+
+  .unchanged {
+    position: absolute;
+    left: 37px;
+    width: 102px;
+    height: 14px;
+    font-size: 14px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #afb5cb;
+    line-height: 14px;
+  }
+
+  /deep/.el-input--small .el-input__inner {
+    height: 32px;
+    line-height: 32px;
+  }
+
+  // 控制select为只读的时候显示样式
+  /deep/.ws-class-table-col {
+    height: auto;
+    padding: 0px 2px;
+
+    /deep/.el-input__inner {
+      padding: 0px 2px;
+    }
+  }
+
+  /deep/.is-disabled {
+    .el-input__prefix,
+    .el-input__suffix {
+      display: none;
+    }
+
+    .el-input__inner {
+      background-color: #fff;
+      border-color: #fff !important;
+      color: #000 !important;
+      font-size: 14px;
+      cursor: text;
+      padding: 0 !important;
+    }
+  }
+
+  .winseaview-view {
+    padding: 0 0 20px;
+  }
+
+  .container {
+    overflow: scroll;
+    height: 93vh;
+  }
+
+  .addressUrls {
+    width: 100%;
+    display: flex;
+    margin-top: 10px;
+  }
+
+  .addressUrls-item {
+    position: relative;
+    display: flex;
+  }
+
+  .icon-guanbi {
+    position: absolute;
+    right: 8px;
+  }
+
+  .addressUrl {
+    margin: 0px 10px;
+    border-radius: 3px;
+  }
+
+  //上传文件成功标识
+  /deep/.el-upload-list__item-status-label {
+    position: absolute;
+    right: 22px;
+    top: -1px;
+    line-height: inherit;
+    display: none;
+  }
+
+  .map {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: auto;
+    width: 850px;
+    height: 400px;
+    background: gainsboro;
+    border-radius: 20px;
+    padding: 10px;
+    box-sizing: border-box;
+    z-index: 99;
+  }
+
+  .amap-container {
+    width: 100% !important;
+  }
+
+  .address-btn {
+    width: 100%;
+    text-align: left;
+    color: #000;
+    border: 1px solid #ccc;
+  }
+
+  .inline-input {
+    width: 100%;
+  }
+</style>

src/views/contractManagement/storageContractEdit.vue

@@ -0,0 +1,1800 @@
+<template>
+  <div class="container">
+    <el-row>
+      <el-col :span="12">
+        <h2 class="bg-left title">修改合同信息</h2>
+      </el-col>
+      <el-col :span="12" class="bg-right">
+        <el-button class="bg-bottom" type="primary" size="small" @click="returnsales()"><img width="6" height="10"
+            style="vertion-align: bottom; margin-right: 3px" src="../../../public/img/lujing.png" alt="" />返回
+        </el-button>
+      </el-col>
+    </el-row>
+    <div class="center">
+      <ws-form ref="deptBudgetList" :rules="ruleDeptBudget" :model="deptBudgetList">
+         <div class="remark">
+      <h3>基本信息</h3>
+      <p style="color: #8890b1">
+          &nbsp;&nbsp;注：基本信息和货物信息均为必填项，“<span style="color:red">*</span>”
+          标记的条目提交后不可修改。
+        </p>
+    </div>
+         <!--基本信息-->
+        <ws-info-table>
+          <!--合同编号-->
+          <ws-form-item label="合同编号" span="1" prop="contractNo" class="readonly">
+            <ws-input v-model="deptBudgetList.contractNo" placeholder="请输入合同编号" maxlength="50" size="small"
+              :rules="ruleDeptBudget" />
+          </ws-form-item>
+          <!--运输方式-->
+        <ws-form-item label="运输方式" span="1" prop="shippingType">
+          <ws-input v-model="deptBudgetList.shippingType" placeholder="请输入运输方式" maxlength="100" size="small" />
+        </ws-form-item>
+         
+          <!--买方-->
+          <ws-form-item label="买方" span="1" prop="buyer" class="readonly">
+            <el-select v-model="deptBudgetList.buyer" placeholder="请选择买方名称" class="typeselect" filterable clearable
+              @change="buyerSelect">
+              <el-option v-for="(item,index) in customerinfo" :key="index" :label="item.customerName"
+                :value="item.customerName" />
+            </el-select>
+          </ws-form-item>
+           <!--结算方式-->
+          <ws-form-item label="结算方式" span="1" prop="settlementMethod">
+            <ws-input v-model="deptBudgetList.settlementMethod" placeholder="请输入结算方式" maxlength="120" size="small" />
+          </ws-form-item>
+           <!--卖方-->
+          <ws-form-item label="卖方" span="1" prop="seller" class="readonly">
+            <el-autocomplete class="inline-input" v-model="deptBudgetList.seller" :fetch-suggestions="querySearch2"
+              placeholder="请输入卖方名称" @select="handleSelect"></el-autocomplete>
+          </ws-form-item>
+          <ws-form-item label="交货方式" span="1" prop="seller" class="readonly">
+          <el-radio v-model="deptBudgetList.deliverType" label="1">我方送货</el-radio>
+          <el-radio v-model="deptBudgetList.deliverType" label="2">对方自提</el-radio>
+          <!-- <el-radio v-model="deptBudgetList.deliverType" v-if="deptBudgetList.priceType == '随行就市'" disabled label="1">
+              我方自提</el-radio>
+            <el-radio v-model="deptBudgetList.deliverType" v-else label="1">我方自提</el-radio>
+            <el-radio v-model="deptBudgetList.deliverType" v-if="deptBudgetList.priceType == '随行就市'" disabled label="2">
+              对方送货</el-radio>
+            <el-radio v-model="deptBudgetList.deliverType" v-else label="2">对方送货</el-radio> -->
+        </ws-form-item>
+        <!--买方电话-->
+          <ws-form-item label="买方电话" span="1" prop="contractNo">
+            <el-autocomplete class="inline-input" v-model="deptBudgetList.buyerPhone" :fetch-suggestions="querySearch3"
+              placeholder="请输入买方电话" @select="handleSelect"></el-autocomplete>
+          </ws-form-item>
+           <!--包装方式-->
+        <ws-form-item label="包装方式" span="1" prop="packingMethod">
+          <ws-select v-model="deptBudgetList.packingMethod" placeholder="" class="typeselect" :value="value1"
+            @change="selectpacking">
+            <ws-option v-for="item in packtypeList" :key="item.constKey" :label="item.constValue"
+              :value="item.constValue" />
+          </ws-select>
+        </ws-form-item>
+         <!--卖方电话-->
+          <ws-form-item label="卖方电话" span="1" prop="sellerPhone">
+            <!-- <ws-input v-model="deptBudgetList.sellerPhone" placeholder="请输入卖方电话" maxlength="100" size="small" /> -->
+            <el-autocomplete class="inline-input" v-model="deptBudgetList.sellerPhone" :fetch-suggestions="querySearch4"
+              placeholder="请输入卖方电话" @select="handleSelect"></el-autocomplete>
+          </ws-form-item>
+           <!--验收方式-->
+          <ws-form-item label="验收方式" span="1" prop="acceptanceMethod">
+            <el-select v-model="deptBudgetList.acceptanceMethod" placeholder="请选择验收方式" style="width: 100%" clearable
+              filterable @change="selectunitList">
+              <el-option v-for="(item, index) in unitList" :key="item.constValue" :label="item.constValue"
+                :value="item.constValue">
+                <span class="unit-left" style="float: left">
+                  <span v-if="item.flag == 'delete'">
+                    {{ item.constValue }}</span>
+                  <!-- 新增文本框 -->
+                  <div style="width: 160px" v-if="item.flag !== 'delete'" @click.stop>
+                    <ws-input v-model="item.constValue" clearable maxlength="10" style="width: 100%"></ws-input>
+                  </div>
+                </span>
+                <span style="float: right; color: #8492a6; font-size: 13px">
+                  <!-- 对号 -->
+                  <i class="el-icon-check" style="line-height: 29px; margin-left: 10px" v-if="item.flag !== 'delete'"
+                    @click.stop="saveClick(item, index)"></i>
+                  <!-- 编辑 -->
+                  <i class="el-icon-edit" style="line-height: 29px; margin-left: 10px" v-if="item.flag == 'delete'"
+                    @click.stop="editClick(item, index)"></i>
+                  <!-- 删除 -->
+                  <i class="el-icon-delete" style="line-height: 29px" @click.stop="deleteClick(item, index)"></i>
+                </span>
+              </el-option>
+              <!-- 新增按钮 -->
+              <el-option value="" label="">
+                <div style="
+                    text-align: right;
+                    border-top: 1px solid #dcdfe6;
+                    padding: 5px;
+                  ">
+                  <ws-button type="primary" @click.stop="addClick">{{
+                    $t('button.add')
+                  }}</ws-button>
+                </div>
+              </el-option>
+            </el-select>
+          </ws-form-item>
+          <!--重量（吨）-->
+          <ws-form-item label="重量（吨）" span="1" prop="weight">
+            <ws-input @input="weightchange" v-model="deptBudgetList.weight" placeholder="请输入重量（吨）" maxlength="100"
+              size="small" />
+          </ws-form-item>
+          <!--交货日期（起）-->
+          <ws-form-item label="交货日期（起）" span="1" prop="deliveryDateStart">
+            <ws-date-picker v-model="deptBudgetList.deliveryDateStart" type="date" placeholder="请选择交货日期（起）"
+              value-format="yyyy-MM-dd" />
+          </ws-form-item>
+         <!--溢短装（%）-->
+          <ws-form-item label="溢短装（%）" span="1" prop="overShort">
+            <ws-input v-model="deptBudgetList.overShort" placeholder="请输入溢短装比例（%）" maxlength="100" size="small" />
+          </ws-form-item>
+          <!--交货日期（止）-->
+          <ws-form-item label="交货日期（止）" span="1" prop="deliveryDateEnd">
+            <ws-date-picker v-model="deptBudgetList.deliveryDateEnd" type="date" placeholder="请选择交货日期（止）"
+              value-format="yyyy-MM-dd" />
+          </ws-form-item>
+          <ws-form-item label="货源所在地区" span="1" prop="sourceGoods">
+          <!-- <el-cascader
+            :options="options_"
+            v-model="selectedOptions"
+            clearable
+            size="large"
+            placeholder="请选择货源所在地区"
+            style="width: 200%"
+            @change="handleChange"
+          /> -->
+          <el-button @click="mapInputClick('source')" class='address-btn'>
+            {{newSelectedOptions}}
+          </el-button>
+        </ws-form-item>
+        <ws-form-item label="货源详细地址" span="1" prop="sourceGoods">
+          <ws-input v-model="deptBudgetList.sourceGoods" placeholder="请输入货源详细地址" maxlength="20" size="small" />
+        </ws-form-item>
+          <ws-form-item label="交货所在地区" span="1" prop="placeDelivery">
+            <el-button @click="mapInputClick('deliveryProv')" class="address-btn">
+              {{ newSelectedOptions1 }}
+            </el-button>
+          </ws-form-item>
+          <ws-form-item label="交货详细地址" span="1" prop="placeDelivery">
+            <ws-input v-model="deptBudgetList.placeDelivery" placeholder="请输入交货详细地址" maxlength="20" size="small" />
+          </ws-form-item>
+          <ws-form-item label="代储费(元/吨·天)" span="1" prop="storageFee">
+            <ws-input v-model="deptBudgetList.storageFee" placeholder="请输入仓储费" maxlength="20" size="small" />
+          </ws-form-item>
+          <!--合同单价（元/吨）-->
+        <ws-form-item class="readonly" label="合同单价（元/吨）" span="1" prop="unitContractPrice">
+          <ws-input @input="pricechange" v-model="deptBudgetList.unitContractPrice" placeholder="请输入合同单价"
+            maxlength="100" size="small" />
+        </ws-form-item>
+        <ws-form-item label="代储费起算重量" span="1" prop="storageFeeWeight">
+            <ws-input v-model="deptBudgetList.storageFeeWeight" placeholder="请输入代储费起算重量" maxlength="20" size="small" />
+          </ws-form-item>
+          <!--合同总价-->
+        <ws-form-item label="合同总价" span="1" prop="totalContractPrice">
+          <ws-input v-model="deptBudgetList.totalContractPrice" placeholder="请输入合同总价" maxlength="100" size="small" />
+        </ws-form-item>
+        <ws-form-item label="代储费起算日期" span="1" prop="storageFeeStartdate">
+            <ws-date-picker v-model="deptBudgetList.storageFeeStartdate" type="date" placeholder="请选择代储费起算日期"
+              value-format="yyyy-MM-dd" />
+          </ws-form-item>
+          <!--签订日期-->
+          <ws-form-item label="签订日期" span="1" prop="signingDate">
+            <ws-date-picker v-model="deptBudgetList.signingDate" type="date" placeholder="请选择合同签订日期"
+              value-format="yyyy-MM-dd" />
+          </ws-form-item>
+          <ws-form-item label="代储费预计终止日期" span="1" prop="storageFeeEnddate">
+            <ws-date-picker v-model="deptBudgetList.storageFeeEnddate" type="date" placeholder="请选择代储费预计终止日期"
+              value-format="yyyy-MM-dd" />
+          </ws-form-item>
+          <ws-form-item label="最终实际成交量（吨）" span="1" prop="finalTradingVolume">
+            <ws-input v-model="deptBudgetList.finalTradingVolume" placeholder="请输入最终实际成交量" maxlength="100"
+              size="small" />
+          </ws-form-item>
+        </ws-info-table>
+      </ws-form>
+    </div>
+    <!-- <base-card> -->
+    <div class="wenzi">
+      <h3>货物信息</h3>
+    </div>
+    <div class="center">
+      <ws-form ref="deptBudgetList" :rules="ruleDeptBudget" :model="deptBudgetList">
+        <!--货物信息-->
+        <ws-info-table>
+          <!--货名-->
+          <ws-form-item label="货名" span="1" prop="goodsName">
+            <div class="unchanged">
+              {{ deptBudgetList.contractGoodsInfo.goodsName }}
+            </div>
+            <span class="unchangeable">*</span>
+          </ws-form-item>
+
+          <!--水分（%）<=-->
+          <ws-form-item label="水分（%）<=" span="1" prop="contractNo">
+            <ws-input v-model="deptBudgetList.contractGoodsInfo.waterContent" placeholder="请输入水分（%）" maxlength="100"
+              size="small" />
+          </ws-form-item>
+
+          <!--品级-->
+          <ws-form-item label="品级" span="1" prop="grade">
+            <div class="unchanged">
+              {{ deptBudgetList.contractGoodsInfo.grade }}
+            </div>
+            <span class="unchangeable">*</span>
+          </ws-form-item>
+
+          <!--杂质（%）<=-->
+          <ws-form-item label="杂质（%）<=" span="1" prop="contractNo">
+            <ws-input v-model="deptBudgetList.contractGoodsInfo.impurity" placeholder="请输入杂质（%）" maxlength="100"
+              size="small" />
+          </ws-form-item>
+
+          <!--容重(克/升)>=-->
+          <ws-form-item label="容重(克/升)>=" span="1" prop="contractNo">
+            <ws-input v-model="deptBudgetList.contractGoodsInfo.bulkDensity" placeholder="请输入容重(克/升)" maxlength="100"
+              size="small" />
+          </ws-form-item>
+
+          <!--霉变粒（%）<=-->
+          <ws-form-item label="霉变粒（%）<=" span="1" prop="contractNo">
+            <ws-input v-model="deptBudgetList.contractGoodsInfo.mildewGrain" placeholder="请输入霉变粒（%）" maxlength="100"
+              size="small" />
+          </ws-form-item>
+
+          <!--热损伤（%）<=-->
+          <ws-form-item label="热损伤（%）<=" span="1" prop="contractNo">
+            <ws-input v-model="deptBudgetList.contractGoodsInfo.jiaorenli" placeholder="请输入热损伤（%）" maxlength="100"
+              size="small" />
+          </ws-form-item>
+          <!--不完善粒（%）<=-->
+          <ws-form-item label="不完善粒（%）<=" span="1" prop="contractNo">
+            <ws-input v-model="deptBudgetList.contractGoodsInfo.imperfectGrain" placeholder="请输入不完善粒（%）" maxlength="100"
+              size="small" />
+          </ws-form-item>
+        </ws-info-table>
+      </ws-form>
+    </div>
+    <div class="wenzi">
+      <h3>流程信息</h3>
+    </div>
+    <div class="center">
+      <ws-form ref="deptBudgetList" :rules="ruleDeptBudget" :model="deptBudgetList">
+        <!--流程信息-->
+
+        <ws-info-table>
+          <!--合同收入（元）-->
+          <ws-form-item label="合同收入（元）" span="1" prop="goodsNameKey">
+            <ws-input v-model="deptBudgetList.contractProcessInfo.goodsNameKey" placeholder="请输入合同收入（元）" maxlength="100"
+              size="small" />
+          </ws-form-item>
+
+          <!--已开发票（元）-->
+          <ws-form-item label="已开发票（元）" span="1" prop="goodsName">
+            <ws-input v-model="deptBudgetList.contractProcessInfo.goodsName" placeholder="请输入已开发票（元））" maxlength="100"
+              size="small" />
+          </ws-form-item>
+
+          <!--费用支出（元）-->
+          <ws-form-item label="费用支出（元）" span="1" prop="contractNo">
+            <ws-input v-model="deptBudgetList.contractProcessInfo.waterContent" placeholder="请输入费用支出（元）" maxlength="100"
+              size="small" />
+          </ws-form-item>
+
+          <!--未开发票（元）-->
+          <ws-form-item label="未开发票（元）" span="1" prop="contractNo">
+            <ws-input v-model="deptBudgetList.contractProcessInfo.impurity" placeholder="请输入未开发票（元）" maxlength="100"
+              size="small" />
+          </ws-form-item>
+          <!--未回款（元）-->
+          <ws-form-item label="未回款（元）" span="1" prop="contractNo">
+            <ws-input v-model="deptBudgetList.contractProcessInfo.mildewGrain" placeholder="请输入未回款（元）" maxlength="100"
+              size="small" />
+          </ws-form-item>
+          <!--双章原件回收情况-->
+          <ws-form-item label="双章原件回收情况" span="1" prop="grade">
+            <ws-select v-model="deptBudgetList.contractProcessInfo.grade" placeholder="" class="typeselect"
+              @change="selectpackingMethod">
+              <ws-option v-for="item in ChapterTwoList" :key="item.constKey" :label="item.constValue"
+                :value="item.constValue" />
+            </ws-select>
+          </ws-form-item>
+        </ws-info-table>
+      </ws-form>
+    </div>
+
+    <div class="wenzi">
+      <h3>备注信息</h3>
+    </div>
+    <div class="center">
+      <ws-form ref="deptBudgetList" :rules="ruleDeptBudget" :model="deptBudgetList">
+        <!--备注信息-->
+        <ws-input v-model="deptBudgetList.remarks" type="textarea" row="3" placeholder="请输入备注信息，不超过200字"
+          maxlength="200" />
+        <ws-upload ref="upload" :comp-id="compId" :appendix-ids="deptBudgetList.addressUrl" :editable="false" accept=".jpg, .jpeg, .png, .pdf, .doc, .zip, .rar" v-hasPermission="
+            `contractManagement.salesContract.salesContractInfo.appl`"/>
+      </ws-form>
+    </div>
+    <div v-if="dialogVisible" class="map">
+      <map-drag @marker="marker" :isShowaddress="true" v-on:addressListen="getAddress" :type="type">
+      </map-drag>
+    </div>
+    <div style="text-align: right; padding: 10px" class="center">
+      <el-button class="bg-bottom" type="primary" size="small" @click="submit()">提交</el-button>
+    </div>
+  </div>
+</template>
+<script>
+  import {
+    regionData,
+    CodeToText,
+    TextToCode
+  } from 'element-china-area-data'
+  import WsUpload from '@/components/WsUpload'
+  import mapDrag from '@/components/mapdrag/mapdrag'
+  import {
+    examineList,
+    editInfo,
+    packList,
+    xiala,
+    addxiala,
+    editxiala,
+    delxiala,
+    getRelationContractNo,
+    getstafffind,
+    getcustomerinfo
+  } from '@/model/contarct/index'
+  import { getstaff, } from '@/model/warehouse/index'
+  export default {
+    name: 'viewSpareMoney',
+    components: {
+      WsUpload,
+      mapDrag
+    },
+    watch: {
+      vesselId(val) {
+        this.loaddata()
+      },
+      isShow(val) {
+        this.showType = val
+      },
+    },
+    data() {
+      return {
+        type: '',
+        dialogVisible: false,
+        newSelectedOptions1: '请选择交货所在地区',
+        newSelectedOptions: '请选择货源所在地',
+        //弹出框
+        dialogViewSpareMoney: false,
+        dialogApproveFormVisible: false,
+        // 船舶类型
+        monetaryKey: null,
+        customerinfo: [],
+        // 表格显示数据
+        tableDate: [],
+        // 是否显示
+        showType: true,
+        // 年
+        year: '',
+        // 提交类型
+        submitType: true,
+        options_: regionData,
+        options:[],
+        restaurants1: [],
+        restaurants2: [],
+        restaurants3: [],
+        restaurants4: [],
+        tableData: [{
+          date: 1111,
+          name: 'qqqq',
+          address: 'errrtt'
+        }],
+        value1: '袋装',
+        pickerBeginDateBefore: {
+          disabledDate: (time) => {
+            return time.getTime() > Date.now()
+          },
+        },
+        selectunitList: {},
+        uploadSuccess: {},
+        selectgrade: {},
+        goodnameList: {},
+        unitList: {},
+        packtypeList: [],
+        compId: localStorage.getItem('ws-pf_compId'),
+        appendixIdsAdd: '',
+        size: 10,
+        deptBudgetList: {
+          contractGoodsInfo: {
+            goodsName: '',
+          },
+          contractProcessInfo: {},
+          sourceGoods:'',
+          placeDelivery:'',
+        },
+        ruleDeptBudget: {},
+        trainingMethods: {},
+        isEdited: false,
+        registered: {},
+        selectCrtDuty: {},
+        dutyList: {},
+        sexList: {},
+        selectDuty: {},
+        gradeList: {},
+        
+        ChapterTwoList: {},
+        selectIntendedShip: {},
+        interviewTypeList: {},
+        feedbackLeaders:[],//收货反馈负责人
+      }
+    },
+    activated() {
+      //cg.viewBudget
+      //cg.viewSpareMoney
+      // this.getVesselData();
+      getstafffind({
+          roles: 'd6a5c8a52da544309259f91f75de1ec6'
+        })
+        .toPromise()
+        .then((response) => {
+          this.options = response
+          this.staffList = response
+        })
+        this.restaurants1 = JSON.parse(localStorage.getItem('deptBudgetList_data1'));
+      this.restaurants2 = JSON.parse(localStorage.getItem('deptBudgetList_data2'));
+      this.restaurants3 = JSON.parse(localStorage.getItem('deptBudgetList_data3'));
+      this.restaurants4 = JSON.parse(localStorage.getItem('deptBudgetList_data4'));
+      if (!this.restaurants1) this.restaurants1 = [];
+      if (!this.restaurants2) this.restaurants2 = [];
+      if (!this.restaurants3) this.restaurants3 = [];
+      if (!this.restaurants4) this.restaurants4 = [];
+      this.loaddata()
+      this.editInfo()
+      this.showType = this.isShow
+      // console.log(this.$route.params)
+      this.showType = this.isShow
+    },
+    methods: {
+      createFilter(queryString) {
+        return (restaurant) => {
+          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
+        };
+      },
+      selectstaff(e) {
+        this.deptBudgetList.personCharge = ''
+        for (var i = 0; i < this.staffList.length; i++) {
+          for (var j = 0; j < e.length; j++) {
+            if (this.staffList[i].staffMobilePhone == e[j]) {
+              this.deptBudgetList.personCharge += this.staffList[i].staffName + ' ' + this.staffList[i]
+                .staffMobilePhone + ','
+            }
+          }
+        }
+        console.log(this.deptBudgetList)
+      },
+      buyerSelect(item) {
+        // console.log(item)
+        for (let i = 0; i < this.customerinfo.length; i++) {
+          console.log(this.customerinfo[i].customerName, item)
+          if (this.customerinfo[i].customerName == item) {
+            this.deptBudgetList.buyerPhone = this.customerinfo[i].customerPhone
+          }
+        }
+      },
+      weightchange(e) {
+        this.deptBudgetList.finalTradingVolume = e
+      },
+      pricechange(e) {
+        this.deptBudgetList.totalContractPrice = e * this.deptBudgetList.weight
+      },
+      selectpackingMethod(e) {
+        for (var i = 0; i < this.packtypeList.length; i++) {
+          if (this.packtypeList[i].constValue == e) {
+            this.deptBudgetList.acceptanceMethodKey =
+              this.packtypeList[i].constKey
+          }
+        }
+      },
+      selectpacking(e) {
+        for (var i = 0; i < this.packtypeList.length; i++) {
+          if (this.packtypeList[i].constValue == e) {
+            this.deptBudgetList.packingMethodKey = this.packtypeList[i].constKey
+          }
+        }
+      },
+      handleSelect(item) {
+        console.log(item);
+      },
+       feedbackLeaderChange(e){
+        this.deptBudgetList.feedbackLeader = this.feedbackLeaders[e].staffName
+        this.deptBudgetList.feedbackLeaderPhone = this.feedbackLeaders[e].staffMobilePhone
+        console.log(  this.deptBudgetList.feedbackLeader,this.deptBudgetList.feedbackLeaderPhone)
+      },
+      marker(item) {
+        this.deptBudgetList.warehousePositioning =
+          item.lnglat.lat + ',' + item.lnglat.lng
+      },
+      getAddress(data) {
+        console.log('getAddress', data)
+        if (data[4] == 'source') {
+          this.newSelectedOptions = data[0] + '/' + data[1] + '/' + data[2]
+          this.deptBudgetList.sourceProvince = data[0]
+          this.deptBudgetList.sourceCity = data[1]
+          this.deptBudgetList.sourceArea = data[2]
+          this.deptBudgetList.sourceGoods = data[3]
+          this.deptBudgetList.sourceLocation=data[5].lat+','+data[5].lng
+        } else {
+          this.newSelectedOptions1 = data[0] + '/' + data[1] + '/' + data[2]
+          this.deptBudgetList.deliveryProvince = data[0]
+          this.deptBudgetList.deliveryCity = data[1]
+          this.deptBudgetList.deliveryArea = data[2]
+          this.deptBudgetList.placeDelivery = data[3]
+          this.deptBudgetList.deliveryLocation=data[5].lat+','+data[5].lng
+        }
+      },
+      mapInputClick(type) {
+        this.dialogVisible = true
+        this.type = type
+      },
+      blurMap() {
+        this.dialogVisible = false
+      },
+      focusMap() {
+        this.dialogVisible = true
+      },
+      // 关闭 dialog时 处理文件url 初始化upload组件
+      handleClose() {
+        this.dialogViewSpareMoney = false
+      },
+      returnsales() {
+        this.deptBudgetList = {}
+        this.$router.push({
+          path: 'storageContract'
+        })
+      },
+      handleChange(value) {
+        this.selectedOptions = value
+      },
+      handleChange1(value) {
+        this.selectedOptions1 = value
+      },
+      // 上传附件
+      onChange() {
+        this.$refs.upload
+          .handleSaveBill()
+          .then(async response => {
+            this.deptBudgetList.addressUrl = response
+          })
+          .catch(res => {
+            EventBus.$emit('error', (JSON.parse(res) || {}).message)
+            this.$refs.upload.clearFiles()
+          })
+      },
+      loaddata() {
+        // 数据
+        examineList({
+            id: this.$route.query.id
+          })
+          .toPromise()
+          .then((response) => {
+            if(response.sourceProvince&&response.sourceCity&&response.sourceArea){
+              this.newSelectedOptions=response.sourceProvince+ '/' + response.sourceCity + '/' + response.sourceArea
+            }else if(response.sourceProvince&&response.sourceArea){
+              this.newSelectedOptions=response.sourceProvince+ '/' + response.sourceArea
+            }
+            if(response.deliveryProvince&&response.deliveryCity&&response.deliveryArea){
+               this.newSelectedOptions1=response.deliveryProvince+ '/' + response.deliveryCity + '/' + response.deliveryArea
+            }else if(response.deliveryProvince&&response.deliveryArea){
+
+            }
+            
+            this.deptBudgetList = response
+            // var arr=this.deptBudgetList.personCharge.split(',')
+            // for (let i = 0; i < arr.length; i++) {
+            //   if(arr[i].split(' ')[0]!=''){
+            //     name.push(arr[i].split(' ')[0])
+            //   }
+            // }
+            // this.
+            // console.log(name)
+            if (this.deptBudgetList.deliverType == 1) {
+              this.deptBudgetList.deliverType1 = '我方送货'
+            } else if (this.deptBudgetList.deliverType == 2) {
+              this.deptBudgetList.deliverType1 = '对方自提'
+            }
+            if (this.deptBudgetList.agreementType == 1) {
+              this.deptBudgetList.agreementType1 = '销售合同'
+            } else if (this.deptBudgetList.agreementType == 2) {
+              this.deptBudgetList.agreementType1 = '补充协议'
+            }
+          })
+        // 包装方式
+        packList({
+            constId: 'CON1'
+          })
+          .toPromise()
+          .then((response) => {
+            this.packtypeList = response
+          })
+        // 验收方式
+        this.getUnitList()
+        // 货名
+        packList({
+            constId: 'CON2'
+          })
+          .toPromise()
+          .then((response) => {
+            this.goodnameList = response
+          })
+        // 品级
+        packList({
+            constId: 'CON3'
+          })
+          .toPromise()
+          .then((response) => {
+            this.gradeList = response
+          })
+          getcustomerinfo({
+            compId: localStorage.getItem('ws-pf_compId'),
+          }).toPromise()
+          .then((response) => {
+            var arr = []
+            for (let i = 0; i < response.length; i++) {
+              if (response[i].customerType == '个人客户') {
+                arr.push({
+                  customerName: response[i].customerName,
+                  customerPhone: response[i].customerPhone
+                })
+              } else {
+                arr.push({
+                  customerName: response[i].compName,
+                  customerPhone: response[i].customerPhone
+                })
+              }
+            }
+            this.customerinfo = arr
+          })
+        // 双章
+        packList({
+            constId: 'CON4'
+          })
+          .toPromise()
+          .then((response) => {
+            this.ChapterTwoList = response
+          })
+            // 收货反馈负责人
+           getstaff({
+            compId: localStorage.getItem('ws-pf_compId')
+          })
+          .toPromise()
+          .then((response) => {
+            this.feedbackLeaders = response
+          })
+      },
+
+      getUnitList() {
+        xiala({
+            compId: localStorage.getItem('ws-pf_compId'),
+            constCode: 'TYPEYAN',
+          })
+          .toPromise()
+          .then((response) => {
+            this.unitList = response
+            let currItem
+            this.unitList.forEach((item, index, arr) => {
+              item.flag = 'delete'
+              if (this.vModel == item.constKey) {
+                currItem = item
+              }
+            })
+            if (currItem) {
+              this.selectContract(currItem.constValue)
+            }
+          })
+      },
+      // 编辑
+      editClick(item, index) {
+        const map = JSON.parse(JSON.stringify(item))
+        if (Object.is(item.id, 1)) {
+          return
+        }
+        if (Object.is(this.unitList[index].flag, 'delete')) {
+          map.flag = 'check'
+          this.$set(this.unitList, index, map)
+        } else {
+          map.flag = 'delete'
+          this.$set(this.unitList, index, map)
+        }
+      },
+      // 删除
+      deleteClick(item, index) {
+        if (Object.is(item.constKey, 1)) {
+          return
+        }
+        if (!item.constValue) {
+          this.unitList.splice(index, 1)
+          return
+        }
+        delxiala({
+            id: this.unitList[index].id
+          })
+          .toPromise()
+          .then((response) => {
+            this.getUnitList()
+            this.pleaseChoose = ''
+          })
+      },
+      querySearch1(queryString, cb) {
+        var restaurants1 = this.restaurants1;
+        var results = queryString ? restaurants1.filter(this.createFilter(queryString)) : restaurants1;
+        // 调用 callback 返回建议列表的数据
+        cb(results);
+      },
+      querySearch2(queryString, cb) {
+        var restaurants2 = this.restaurants2;
+        var results = queryString ? restaurants2.filter(this.createFilter(queryString)) : restaurants2;
+        // 调用 callback 返回建议列表的数据
+        cb(results);
+      },
+      querySearch3(queryString, cb) {
+        var restaurants3 = this.restaurants3;
+        var results = queryString ? restaurants3.filter(this.createFilter(queryString)) : restaurants3;
+        // 调用 callback 返回建议列表的数据
+        cb(results);
+      },
+      querySearch4(queryString, cb) {
+        var restaurants4 = this.restaurants4;
+        var results = queryString ? restaurants4.filter(this.createFilter(queryString)) : restaurants4;
+        // 调用 callback 返回建议列表的数据
+        cb(results);
+      },
+      saveClick(item, index) {
+        //  console.log(item)
+
+        if (Object.is(item.id, 1)) {
+          return
+        }
+        if (Object.is(this.unitList[index].flag, 'delete')) {
+          this.$set(this.unitList, index, {
+            flag: 'check'
+          })
+        } else {
+          this.$set(this.unitList, index, {
+            flag: 'delete'
+          })
+        }
+        if (!item.constValue) {
+          this.unitList.splice(index, 1)
+          return
+        }
+        if (item.flag == 'add') {
+          item.constKey = Math.random() * 20
+          this.trainingMethods.compId = localStorage.getItem('ws-pf_compId')
+          this.trainingMethods.constKey = item.constKey
+          this.trainingMethods.constCode = 'TYPEYAN'
+          this.trainingMethods.constValue = item.constValue
+          this.trainingMethods.id = item.id
+          addxiala(this.trainingMethods)
+            .toPromise()
+            .then((response) => {
+              this.getUnitList()
+            })
+        } else if (item.flag == 'check') {
+          this.trainingMethods.compId = localStorage.getItem('ws-pf_compId')
+          this.trainingMethods.constKey = item.constKey
+          this.trainingMethods.constCode = 'TYPEYAN'
+          this.trainingMethods.constValue = item.constValue
+          this.trainingMethods.id = item.id
+          editxiala(this.trainingMethods)
+            .toPromise()
+            .then((response) => {
+              this.getUnitList()
+            })
+        }
+      },
+      addClick() {
+        this.unitList.push({
+          flag: 'add',
+          constValue: '',
+          constKey: '',
+        })
+      },
+      submit() {
+        if (!this.deptBudgetList.contractNo) {
+          this.$message({
+            message: '合同编号不能为空',
+            type: 'warning',
+          })
+          return
+        }
+        if (
+          this.deptBudgetList.contractNo.length < 6 ||
+          this.deptBudgetList.contractNo.length > 50
+        ) {
+          this.$message({
+            message: '合同编号长度不符合要求,请输入6到50个字符之内！',
+            type: 'warning',
+          })
+          return
+        }
+        if (!this.deptBudgetList.shippingType) {
+          this.$message({
+            message: '运输方式不能为空',
+            type: 'warning',
+          })
+          return
+        }
+        if (
+          this.deptBudgetList.shippingType.length < 1 ||
+          this.deptBudgetList.shippingType.length > 20
+        ) {
+          this.$message({
+            message: '运输方式长度不符合要求,请输入1到20个字符之内！',
+            type: 'warning',
+          })
+          return
+        }
+        if (!this.deptBudgetList.buyer) {
+          this.$message({
+            message: '买方名称不能为空',
+            type: 'warning',
+          })
+          return
+        }
+        if (this.deptBudgetList.buyer.length > 30) {
+          this.$message({
+            message: '买方名称长度不符合要求,请输入30个字符之内！',
+            type: 'warning',
+          })
+          return
+        }
+        if (!this.deptBudgetList.settlementMethod) {
+          this.$message({
+            message: '结算方式不能为空',
+            type: 'warning',
+          })
+          return
+        }
+        if (
+          this.deptBudgetList.settlementMethod.length < 1 ||
+          this.deptBudgetList.settlementMethod.length > 20
+        ) {
+          this.$message({
+            message: '结算方式长度不符合要求,请输入1到20个字符之内！',
+            type: 'warning',
+          })
+          return
+        }
+        if (!this.deptBudgetList.seller) {
+          this.$message({
+            message: '请输入卖方名称！',
+            type: 'warning',
+          })
+          return
+        }
+        if (this.deptBudgetList.seller.length > 30) {
+          this.$message({
+            message: '卖方名称长度不符合要求,请输入30个字符之内！',
+            type: 'warning',
+          })
+          return
+        }
+        if (!this.deptBudgetList.buyerPhone) {
+          this.$message({
+            message: '请输入买方电话！',
+            type: 'warning',
+          })
+          return
+        }
+        // if (isNaN(this.deptBudgetList.buyerPhone)) {
+        //   this.$message({
+        //     message: '输入买方电话有误!',
+        //     type: 'warning',
+        //   })
+        //   return
+        // }
+        if (!this.deptBudgetList.sellerPhone) {
+          this.$message({
+            message: '请输入卖方电话！',
+            type: 'warning',
+          })
+          return
+        }
+        if (isNaN(this.deptBudgetList.sellerPhone)) {
+          this.$message({
+            message: '输入卖方电话有误！',
+            type: 'warning',
+          })
+          return
+        }
+        // if (this.deptBudgetList.deliverType == '2') {
+        //   if (!this.deptBudgetList.feedbackLeader) {
+        //     this.$message({
+        //       message: '请选择收货反馈负责人',
+        //       type: 'warning',
+        //     })
+        //     return
+        //   }
+        // }
+
+        if (!this.deptBudgetList.acceptanceMethod) {
+          this.$message({
+            message: '请选择验收方式',
+            type: 'warning',
+          })
+          return
+        }
+        if (!this.deptBudgetList.weight) {
+          this.$message({
+            message: '请输入重量！',
+            type: 'warning',
+          })
+          return
+        }
+        if (
+          isNaN(this.deptBudgetList.weight) ||
+          (String(this.deptBudgetList.weight).indexOf('.') != -1 &&
+            String(this.deptBudgetList.weight).length -
+            (String(this.deptBudgetList.weight).indexOf('.') + 1) >
+            3) ||
+          this.deptBudgetList.weight < 0 ||
+          this.deptBudgetList.weight > 200000
+        ) {
+          this.$message({
+            message: '输入重量有误！',
+            type: 'warning',
+          })
+          return
+        }
+        if (!this.deptBudgetList.storageFee) {
+          this.$message({
+            message: '代储费不能为空！',
+            type: 'warning',
+          })
+          return
+        }
+        if (!this.deptBudgetList.storageFeeWeight) {
+          this.$message({
+            message: '代储费起算重量不能为空！',
+            type: 'warning',
+          })
+          return
+        }
+        if (
+          isNaN(this.deptBudgetList.storageFee) ||
+          (String(this.deptBudgetList.storageFee).indexOf('.') != -1 &&
+            String(this.deptBudgetList.storageFee).length -
+            (String(this.deptBudgetList.storageFee).indexOf('.') + 1) >
+            2) ||
+          this.deptBudgetList.storageFee < 0 ||
+          this.deptBudgetList.storageFee > 1000
+        ) {
+          this.$message({
+            message: '代储费填写错误！',
+            type: 'warning',
+          })
+          return
+        }
+        if (
+          isNaN(this.deptBudgetList.storageFeeWeight) ||
+          (String(this.deptBudgetList.storageFeeWeight).indexOf('.') != -1 &&
+            String(this.deptBudgetList.storageFeeWeight).length -
+            (String(this.deptBudgetList.storageFeeWeight).indexOf('.') + 1) >
+            3) ||
+          this.deptBudgetList.storageFeeWeight < 0 ||
+          this.deptBudgetList.storageFeeWeight > 200000
+        ) {
+          this.$message({
+            message: '代储费起算重量填写错误！',
+            type: 'warning',
+          })
+          return
+        }
+        if (!this.deptBudgetList.deliveryDateStart) {
+          this.$message({
+            message: '请选择交货日期（起）',
+            type: 'warning',
+          })
+          return
+        }
+        if (!this.deptBudgetList.overShort) {
+          this.$message({
+            message: '请输入溢短装！',
+            type: 'warning',
+          })
+          return
+        }
+        if (
+          isNaN(this.deptBudgetList.overShort) ||
+          (String(this.deptBudgetList.overShort).indexOf('.') != -1 &&
+            String(this.deptBudgetList.overShort).length -
+            (String(this.deptBudgetList.overShort).indexOf('.') + 1) >
+            2) ||
+          this.deptBudgetList.overShort < 0 ||
+          this.deptBudgetList.overShort > 50
+        ) {
+          this.$message({
+            message: '溢短装输入有误！',
+            type: 'warning',
+          })
+          return
+        }
+        if (!this.deptBudgetList.deliveryDateEnd) {
+          this.$message({
+            message: '请选择交货日期（止）',
+            type: 'warning',
+          })
+          return
+        }
+        if (!this.deptBudgetList.unitContractPrice) {
+            this.$message({
+              message: '请输入合同单价！',
+              type: 'warning',
+            })
+            return
+          }
+          if (
+            isNaN(this.deptBudgetList.unitContractPrice) ||
+            (String(this.deptBudgetList.unitContractPrice).indexOf('.') != -1 &&
+              String(this.deptBudgetList.unitContractPrice).length -
+              (String(this.deptBudgetList.unitContractPrice).indexOf('.') + 1) >
+              2) ||
+            this.deptBudgetList.unitContractPrice <= 0 ||
+            this.deptBudgetList.unitContractPrice > 10000
+          ) {
+            this.$message({
+              message: '合同单价输入有误！',
+              type: 'warning',
+            })
+            return
+          }
+          if (!this.deptBudgetList.totalContractPrice) {
+            this.$message({
+              message: '请输入合同总价！',
+              type: 'warning',
+            })
+            return
+          }
+          if (
+            isNaN(this.deptBudgetList.totalContractPrice) ||
+            (String(this.deptBudgetList.totalContractPrice).indexOf('.') != -1 &&
+              String(this.deptBudgetList.totalContractPrice).length -
+              (String(this.deptBudgetList.totalContractPrice).indexOf('.') +
+                1) >
+              2) ||
+            this.deptBudgetList.totalContractPrice <= 0 ||
+            this.deptBudgetList.totalContractPrice > 1000000000
+          ) {
+            this.$message({
+              message: '合同总价输入有误！',
+              type: 'warning',
+            })
+            return
+          }
+        //时间
+        if (
+          new Date(this.deptBudgetList.deliveryDateStart).getTime() >
+          new Date(this.deptBudgetList.deliveryDateEnd).getTime()
+        ) {
+          this.$message({
+            message: '交货日期（止）选择错误',
+            type: 'warning',
+          })
+          return
+        }
+        if (!this.newSelectedOptions) {
+          this.$message({
+            message: '请选择货源所在地区！',
+            type: 'warning',
+          })
+          return
+        }
+        if (!this.deptBudgetList.sourceGoods) {
+          this.$message({
+            message: '请输入货源详细地址！',
+            type: 'warning',
+          })
+          return
+        }
+        if (!this.newSelectedOptions1) {
+          this.$message({
+            message: '请选择交货所在地区！',
+            type: 'warning',
+          })
+          return
+        }
+        if (!this.deptBudgetList.placeDelivery) {
+          this.$message({
+            message: '请输入交货详细地址！',
+            type: 'warning',
+          })
+          return
+        }
+        if (!this.deptBudgetList.signingDate) {
+          this.$message({
+            message: '请选择签订日期',
+            type: 'warning',
+          })
+          return
+        }
+        if (
+          isNaN(this.deptBudgetList.finalTradingVolume) ||
+          (String(this.deptBudgetList.finalTradingVolume).indexOf('.') != -1 &&
+            String(this.deptBudgetList.finalTradingVolume).length -
+            (String(this.deptBudgetList.finalTradingVolume).indexOf('.') + 1) >
+            3) ||
+          this.deptBudgetList.finalTradingVolume < 0 ||
+          this.deptBudgetList.finalTradingVolume > 200000
+        ) {
+          this.$message({
+            message: '最终实际成交量有误！',
+            type: 'warning',
+          })
+          return
+        }
+        //货物信息
+        if (!this.deptBudgetList.contractGoodsInfo.goodsName) {
+          this.$message({
+            message: '请选择货名',
+            type: 'warning',
+          })
+          return
+        }
+        if (!this.deptBudgetList.contractGoodsInfo.waterContent) {
+          this.$message({
+            message: '请输入水分',
+            type: 'warning',
+          })
+          return
+        }
+        if (
+          (this.deptBudgetList.contractGoodsInfo.waterContent &&
+            String(this.deptBudgetList.contractGoodsInfo.waterContent).indexOf(
+              '.'
+            ) != -1 &&
+            String(this.deptBudgetList.contractGoodsInfo.waterContent).length -
+            (String(this.deptBudgetList.contractGoodsInfo.waterContent).indexOf(
+                '.'
+              ) +
+              1) >
+            2) ||
+          this.deptBudgetList.contractGoodsInfo.waterContent > 40 ||
+          this.deptBudgetList.contractGoodsInfo.waterContent < 0
+        ) {
+          this.$message({
+            message: '水分输入错误',
+            type: 'warning',
+          })
+          return
+        }
+        if (!this.deptBudgetList.contractGoodsInfo.grade) {
+          this.$message({
+            message: '请选择品级',
+            type: 'warning',
+          })
+          return
+        }
+        if (!this.deptBudgetList.contractGoodsInfo.impurity) {
+          this.$message({
+            message: '请输入杂质',
+            type: 'warning',
+          })
+          return
+        }
+        if (
+          (this.deptBudgetList.contractGoodsInfo.impurity &&
+            String(this.deptBudgetList.contractGoodsInfo.impurity).indexOf('.') !=
+            -1 &&
+            String(this.deptBudgetList.contractGoodsInfo.impurity).length -
+            (String(this.deptBudgetList.contractGoodsInfo.impurity).indexOf(
+                '.'
+              ) +
+              1) >
+            2) ||
+          this.deptBudgetList.contractGoodsInfo.impurity > 40 ||
+          this.deptBudgetList.contractGoodsInfo.impurity < 0
+        ) {
+          this.$message({
+            message: '杂质输入错误',
+            type: 'warning',
+          })
+          return
+        }
+        if (!this.deptBudgetList.contractGoodsInfo.bulkDensity) {
+          this.$message({
+            message: '请输入容重',
+            type: 'warning',
+          })
+          return
+        }
+        if (
+          (this.deptBudgetList.contractGoodsInfo.bulkDensity &&
+            String(this.deptBudgetList.contractGoodsInfo.bulkDensity).indexOf(
+              '.'
+            ) != -1 &&
+            String(this.deptBudgetList.contractGoodsInfo.bulkDensity).length -
+            (String(this.deptBudgetList.contractGoodsInfo.bulkDensity).indexOf(
+                '.'
+              ) +
+              1) >
+            2) ||
+          this.deptBudgetList.contractGoodsInfo.bulkDensity > 1000 ||
+          this.deptBudgetList.contractGoodsInfo.bulkDensity < 0
+        ) {
+          this.$message({
+            message: '容重输入错误',
+            type: 'warning',
+          })
+          return
+        }
+        if (!this.deptBudgetList.contractGoodsInfo.mildewGrain) {
+          this.$message({
+            message: '请输入霉变粒',
+            type: 'warning',
+          })
+          return
+        }
+        if (
+          !this.deptBudgetList.contractGoodsInfo.mildewGrain ||
+          (String(this.deptBudgetList.contractGoodsInfo.mildewGrain).indexOf(
+              '.'
+            ) != -1 &&
+            String(this.deptBudgetList.contractGoodsInfo.mildewGrain).length -
+            (String(this.deptBudgetList.contractGoodsInfo.mildewGrain).indexOf(
+                '.'
+              ) +
+              1) >
+            2) ||
+          this.deptBudgetList.contractGoodsInfo.mildewGrain > 40 ||
+          this.deptBudgetList.contractGoodsInfo.mildewGrain < 0
+        ) {
+          this.$message({
+            message: '霉变粒输入错误',
+            type: 'warning',
+          })
+          return
+        }
+        if (!this.deptBudgetList.contractGoodsInfo.jiaorenli) {
+          this.$message({
+            message: '请输入热损伤',
+            type: 'warning',
+          })
+          return
+        }
+        if (
+          !this.deptBudgetList.contractGoodsInfo.jiaorenli ||
+          (String(this.deptBudgetList.contractGoodsInfo.jiaorenli).indexOf('.') !=
+            -1 &&
+            String(this.deptBudgetList.contractGoodsInfo.jiaorenli).length -
+            (String(this.deptBudgetList.contractGoodsInfo.jiaorenli).indexOf(
+                '.'
+              ) +
+              1) >
+            2) ||
+          this.deptBudgetList.contractGoodsInfo.jiaorenli > 40 ||
+          this.deptBudgetList.contractGoodsInfo.jiaorenli < 0
+        ) {
+          this.$message({
+            message: '热损伤输入错误',
+            type: 'warning',
+          })
+          return
+        }
+        if (!this.deptBudgetList.contractGoodsInfo.imperfectGrain) {
+          this.$message({
+            message: '请输入不完善粒',
+            type: 'warning',
+          })
+          return
+        }
+        if (
+          !this.deptBudgetList.contractGoodsInfo.imperfectGrain ||
+          (String(this.deptBudgetList.contractGoodsInfo.imperfectGrain).indexOf(
+              '.'
+            ) != -1 &&
+            String(this.deptBudgetList.contractGoodsInfo.imperfectGrain).length -
+            (String(
+                this.deptBudgetList.contractGoodsInfo.imperfectGrain
+              ).indexOf('.') +
+              1) >
+            2) ||
+          this.deptBudgetList.contractGoodsInfo.imperfectGrain > 40 ||
+          this.deptBudgetList.contractGoodsInfo.imperfectGrain < 0
+        ) {
+          this.$message({
+            message: '不完善粒输入错误',
+            type: 'warning',
+          })
+          return
+        }
+        if (this.deptBudgetList.contractProcessInfo.goodsNameKey) {
+
+          if (
+            !this.deptBudgetList.contractProcessInfo.goodsNameKey > 1000000000 ||
+            this.deptBudgetList.contractProcessInfo.goodsNameKey < 100 ||
+            (String(this.deptBudgetList.contractProcessInfo.goodsNameKey).indexOf(
+                '.'
+              ) != -1 &&
+              String(this.deptBudgetList.contractProcessInfo.goodsNameKey).length -
+              (String(
+                  this.deptBudgetList.contractProcessInfo.goodsNameKey
+                ).indexOf('.') +
+                1) >
+              2)
+          ) {
+            this.$message({
+              message: '合同收入金额输入错误',
+              type: 'warning',
+            })
+            return
+          }
+        }
+        if (
+          this.deptBudgetList.contractProcessInfo.waterContent > 10000000 ||
+          this.deptBudgetList.contractProcessInfo.waterContent < 0 ||
+          (String(this.deptBudgetList.contractProcessInfo.waterContent).indexOf(
+              '.'
+            ) != -1 &&
+            String(this.deptBudgetList.contractProcessInfo.waterContent).length -
+            (String(
+                this.deptBudgetList.contractProcessInfo.waterContent
+              ).indexOf('.') +
+              1) >
+            2)
+        ) {
+          this.$message({
+            message: '费用支出输入错误',
+            type: 'warning',
+          })
+          return
+        }
+        if (
+          (this.deptBudgetList.contractProcessInfo.goodsName > 1000000000) |
+          (this.deptBudgetList.contractProcessInfo.goodsName < 0) ||
+          (String(this.deptBudgetList.contractProcessInfo.goodsName).indexOf(
+              '.'
+            ) != -1 &&
+            String(this.deptBudgetList.contractProcessInfo.goodsName).length -
+            (String(this.deptBudgetList.contractProcessInfo.goodsName).indexOf(
+                '.'
+              ) +
+              1) >
+            2)
+        ) {
+          this.$message({
+            message: '已开发票金额输入错误',
+            type: 'warning',
+          })
+          return
+        }
+        if (
+          (this.deptBudgetList.contractProcessInfo.impurity > 1000000000) |
+          (this.deptBudgetList.contractProcessInfo.impurity < 0) ||
+          (String(this.deptBudgetList.contractProcessInfo.impurity).indexOf(
+              '.'
+            ) != -1 &&
+            String(this.deptBudgetList.contractProcessInfo.impurity).length -
+            (String(this.deptBudgetList.contractProcessInfo.impurity).indexOf(
+                '.'
+              ) +
+              1) >
+            2)
+        ) {
+          this.$message({
+            message: '未开发票金额输入错误',
+            type: 'warning',
+          })
+          return
+        }
+        if (
+          (!this.deptBudgetList.contractProcessInfo.mildewGrain > 1000000000) |
+          (this.deptBudgetList.contractProcessInfo.mildewGrain < 0) ||
+          (String(this.deptBudgetList.contractProcessInfo.mildewGrain).indexOf(
+              '.'
+            ) != -1 &&
+            String(this.deptBudgetList.contractProcessInfo.mildewGrain).length -
+            (String(
+                this.deptBudgetList.contractProcessInfo.mildewGrain
+              ).indexOf('.') +
+              1) >
+            2)
+        ) {
+          this.$message({
+            message: '未回款金额输入错误',
+            type: 'warning',
+          })
+          return
+        }
+        this.$confirm(`确定提交本次修改？`, {
+            cancelButtonText: '取消',
+            confirmButtonText: '确定',
+            type: 'warning'
+          })
+          .then(() => {
+            this.$refs.deptBudgetList.validate((valid) => {
+              if (valid) {
+                
+                this.deptBudgetList.compId = this.compId
+                this.deptBudgetList.contractType = 1
+                editInfo(this.deptBudgetList)
+                  .toPromise()
+                  .then((response) => {
+                    this.$message.success('编辑成功')
+                    this.deptBudgetList = {}
+                    this.$router.push({
+                      path: 'storageContract'
+                    })
+                  })
+              } else {
+                EventBus.$emit('error', this.$t('showMessage.asteriskRequired'))
+                return false
+              }
+            })
+          })
+      },
+      editInfo() {
+        editInfo({})
+      },
+      // getList(){}
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  /deep/.ws-info-table .el-form-item .el-form-item__content {
+    padding: 0 25px;
+  }
+
+  /deep/.ws-info-table .el-form-item {
+    border-right: 1px solid #cdd2dc;
+    border-bottom: 1px solid #cdd2dc;
+  }
+
+  .title {
+    position: relative;
+  }
+
+  .title::before {
+    content: '';
+    display: inline-block;
+    width: 5px;
+    height: 30px;
+    background: #5473e8;
+    position: absolute;
+    left: 0;
+  }
+
+  .el-button--primary {
+    background-color: #5878e8;
+    border-color: #5878e8;
+  }
+
+  .el-col {
+    background: #f6f7fc;
+  }
+
+  .readonly {
+    position: relative;
+  }
+
+  .readonly:after {
+    content: '*';
+    color: #ff2727;
+    position: absolute;
+    right: 8px;
+    z-index: 10;
+    top: 21%;
+    font-size: 20px;
+  }
+
+  /deep/.ws-info-table .el-form-item .el-form-item__content {
+    padding: 0 25px;
+    border-left: 1px solid #cdd2dc;
+    background: #fafbfc;
+  }
+
+  /deep/.ws-info-table .el-form-item .el-form-item__label {
+    width: 140px;
+    text-align: center;
+    background: #f0f2f6;
+    // border: 1px solid #cdd2dc;
+  }
+
+  .button-container {
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #fff;
+    width: 100%;
+    height: 50px;
+    padding: 0 10px;
+
+    &>div {
+      margin-left: 10px;
+      display: flex;
+      flex-wrap: nowrap;
+      flex-direction: row;
+
+      &>span {
+        line-height: 50px;
+      }
+    }
+
+    /deep/.auditFlow-box {
+      position: unset;
+      margin-left: 10px;
+
+      &/deep/.auditFlow-icon {
+        width: auto;
+        padding-right: 30px;
+      }
+
+      &/deep/.auditFlow-main {
+        position: absolute;
+      }
+    }
+  }
+
+  .box-app {
+    display: inline-block;
+
+    margin-left: 30px;
+    line-height: 50px;
+  }
+
+  /deep/.el-dialog {
+    .el-form-item {
+      margin-bottom: 0 !important;
+
+      .el-input--medium {
+        textarea {
+          min-height: 100px !important;
+        }
+      }
+    }
+  }
+
+  .collapse-bottom {
+    margin-bottom: 20px;
+  }
+
+  .input-main .textarea .el-textarea__inner {
+    width: 100%;
+    z-index: 1;
+  }
+
+  .bg-left {
+    padding-left: 30px;
+  }
+
+  .bg-right {
+    padding: 10px;
+    text-align: right;
+  }
+
+  .bg-bottom {
+    margin: 6px 0px;
+  }
+
+  .wenzi {
+    width: 70%;
+    margin: 0 auto;
+  }
+
+  .wenzi h3 {
+    display: inline-block;
+    left: 30px;
+  }
+
+  .wenzi p {
+    display: inline-block;
+  }
+
+  .center {
+    width: 70%;
+    margin: 0 auto;
+  }
+
+  .el-form-item {
+    width: 50%;
+  }
+
+  .el-form-item__label {
+    text-align: center;
+  }
+
+  /*.crt-main .textarea /deep/ .el-form-item__label {*/
+  /*  height: 82px;*/
+  /*}*/
+  // 控制select为只读的时候显示样式
+
+  .hide-sel {
+    .el-input__inner {
+      border: 0px;
+    }
+
+    .el-icon-arrow-up {
+      display: none;
+    }
+
+    .el-textarea__inner {
+      background-color: #fff !important;
+      border: 0;
+    }
+
+    .el-date-editor {
+      i {
+        display: none;
+      }
+    }
+
+    .is-disabled {
+      .el-input__inner:hover {
+        background-color: #fff !important;
+        border: 0;
+      }
+
+      color: #606266;
+
+      .el-input__inner {
+        background-color: #fff !important;
+        border: 0;
+        color: #606266;
+      }
+
+      .el-textarea__inner {
+        background-color: #fff !important;
+        border: 0;
+        color: #606266;
+      }
+    }
+  }
+
+  // 控制select为只读的时候显示样式
+  /deep/.ws-class-table-col {
+    height: auto;
+    padding: 0px 2px;
+
+    /deep/.el-input__inner {
+      padding: 0px 2px;
+    }
+  }
+
+  /deep/.is-disabled {
+    .el-input__prefix,
+    .el-input__suffix {
+      display: none;
+    }
+
+    .el-input__inner {
+      background-color: #fff;
+      border-color: #fff !important;
+      color: #000 !important;
+      font-size: 14px;
+      cursor: text;
+      padding: 0 !important;
+    }
+  }
+
+  .winseaview-view {
+    padding: 0 0 20px;
+  }
+
+  .container {
+    overflow: scroll;
+    height: 93vh;
+  }
+
+  //*号
+  .unchangeable {
+    position: absolute;
+    width: 9px;
+    height: 22px;
+    font-size: 16px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #ff2727;
+    line-height: 22px;
+    display: inline-block;
+    right: 14px;
+  }
+
+  /deep/.el-input,
+  /deep/.el-date-editor {
+    font-size: 13px;
+  }
+
+  /deep/.el-textarea {
+    width: 101%;
+    margin: 0px;
+  }
+
+  /deep/el-date-editor--date {
+    width: 200px;
+  }
+
+  .unchanged {
+    position: absolute;
+    left: 37px;
+    width: 102px;
+    height: 14px;
+    font-size: 14px;
+    font-weight: 400;
+    color: #afb5cb;
+    line-height: 14px;
+  }
+
+  /deep/.el-input--small .el-input__inner {
+    height: 32px;
+    line-height: 32px;
+  }
+
+  /deep/.el-form-item.is-success .el-input__inner,
+  /deep/.el-cascader .el-input .el-input__inner,
+  /deep/.el-textarea__inner {
+    color: #8890b1;
+  }
+
+  .addressUrls {
+    width: 100%;
+    display: flex;
+    margin-top: 10px;
+  }
+
+  .addressUrls-item {
+    position: relative;
+    display: flex;
+  }
+
+  .icon-guanbi {
+    position: absolute;
+    right: 8px;
+  }
+
+  .addressUrl {
+    margin: 0px 10px;
+    border-radius: 3px;
+  }
+
+  //上传文件成功标识
+  /deep/.el-upload-list__item-status-label {
+    position: absolute;
+    right: 22px;
+    top: -1px;
+    line-height: inherit;
+    display: none;
+  }
+
+  .map {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: auto;
+    width: 850px;
+    height: 400px;
+    background: gainsboro;
+    border-radius: 20px;
+    padding: 10px;
+    box-sizing: border-box;
+    z-index: 99;
+  }
+
+  .amap-container {
+    width: 100% !important;
+  }
+
+  .address-btn {
+    width: 100%;
+    text-align: left;
+    color:#000;
+    border:1px solid #ccc;
+  }
+  .inline-input {
+    width: 100%;
+  }
+</style>

src/views/contractManagement/storageContractExamine.vue

@@ -0,0 +1,692 @@
+<!--采购合同查看-->
+<!--2019年5月30日 20:25:16 by jlx-->
+<template>
+  <div class="container">
+    <el-row>
+      <el-col :span="12">
+        <h2 class="bg-left title">查看合同详情</h2>
+      </el-col>
+      <el-col :span="12" class="bg-right">
+        <el-button class="bg-bottom" type="primary" size="small" @click="returnsales()"><img width="6" height="10"
+            style="vertical-align: bottom; margin-right: 3px" src="../../../public/img/lujing.png" alt="" />返回
+        </el-button>
+      </el-col>
+    </el-row>
+
+    <ws-form ref="deptBudgetList" :rules="mainReportAdd" :model="deptBudgetList">
+      <div class="title-top">
+        代储合同<span class="title-number">【编号:{{ deptBudgetList.contractNo }}】</span>
+        <div class="icon" v-if="deptBudgetList.status">
+          <template>
+            <el-popover placement="right" :width="285" trigger="click" visible-arrow="false"
+              @show="history(deptBudgetList.id)">
+              <template>
+                <div slot="reference"> {{deptBudgetList.status }}</div>
+              </template>
+              <div>
+                <p style="margin-top: 0; padding-left: 10px">操作历史</p>
+                <div v-for="(item, index) in historyList" class="flex">
+                  <div class="vertical-text vertical-text-left">
+                    {{ item.updateDate }}
+                  </div>
+                  <div>
+                    <div class="vertical-circle"></div>
+                    <div v-if="index != historyList.length - 1" class="vertical-line"></div>
+                  </div>
+                  <div class="vertical-text">
+                    {{ item.operateUser }}<br />{{ item.dealMsg }}
+                  </div>
+                </div>
+              </div>
+            </el-popover>
+          </template>
+        </div>
+      </div>
+      <div class="remark">
+        <h3>基本信息</h3>
+      </div>
+      <ws-info-table>
+
+        <ws-form-item label="合同编号" span="1" prop="contractNo">
+          {{ deptBudgetList.contractNo }}
+        </ws-form-item>
+        <ws-form-item label="运输方式" span="1" prop="shippingType">
+          {{ deptBudgetList.shippingType }}
+        </ws-form-item>
+        <ws-form-item label="买方" span="1" prop="buyer">
+          {{ deptBudgetList.buyer }}
+        </ws-form-item>
+        <ws-form-item label="结算方式" span="1" prop="settlementMethod">{{ deptBudgetList.settlementMethod }}
+        </ws-form-item>
+         <ws-form-item label="卖方" span="1" prop="seller">{{ deptBudgetList.seller }}
+        </ws-form-item>
+        <ws-form-item label="交货方式" span="1" prop="deliverType1">{{ deptBudgetList.deliverType1 }}
+        </ws-form-item>
+        <ws-form-item label="买方电话" span="1" prop="buyerPhone">{{ deptBudgetList.buyerPhone }}
+        </ws-form-item>
+        <ws-form-item label="包装方式" span="1" prop="packingMethod">
+          {{ deptBudgetList.packingMethod }}
+        </ws-form-item>
+        <ws-form-item label="卖方电话" span="1" prop="sellerPhone">
+          {{ deptBudgetList.sellerPhone }}
+        </ws-form-item>
+        <ws-form-item label="验收方式" span="1" prop="acceptanceMethod">
+          {{ deptBudgetList.acceptanceMethod }}
+        </ws-form-item>
+        <ws-form-item label="重量（吨）" span="1" prop="weight">
+          {{ deptBudgetList.weight }}
+        </ws-form-item>
+        <ws-form-item label="交货日期（起）" span="1" prop="deliveryDateStart">
+          {{ deptBudgetList.deliveryDateStart }}
+        </ws-form-item>
+        <ws-form-item label="溢短装（%）" span="1" prop="overShort">
+          {{ deptBudgetList.overShort }}
+        </ws-form-item>
+        <ws-form-item label="交货日期（止）" span="1" prop="deliveryDateEnd">
+          {{ deptBudgetList.deliveryDateEnd }}
+        </ws-form-item>
+         <ws-form-item label="货源所在地区" span="1">
+          {{ deptBudgetList.sourceProvince }}
+          {{ deptBudgetList.sourceCity }}
+          {{ deptBudgetList.sourceArea }}
+        </ws-form-item>
+        <ws-form-item label="货源详细地址" span="1" prop="sourceGoods">
+          {{ deptBudgetList.sourceGoods }}
+        </ws-form-item>
+        <ws-form-item label="交货地所在地区" span="1">
+          {{ deptBudgetList.deliveryProvince }}
+          {{ deptBudgetList.deliveryCity }}
+          {{ deptBudgetList.deliveryArea }}
+        </ws-form-item>
+        <ws-form-item label="交货地详细地址" span="1" prop=" placeDelivery">
+          {{ deptBudgetList.placeDelivery }}
+        </ws-form-item>
+        <ws-form-item label="代储费(元/吨·天)" span="1" prop="storageFee">
+          {{deptBudgetList.storageFee}}
+        </ws-form-item>
+        <ws-form-item label="合同单价（元/吨）" span="1" prop="unitContractPrice" v-if="deptBudgetList.priceType == '定价采购'">
+          {{ deptBudgetList.unitContractPrice }}
+        </ws-form-item>
+        <ws-form-item label="代储费起算重量" span="1" prop="storageFeeWeight">
+          {{deptBudgetList.storageFeeWeight}}
+        </ws-form-item>
+        <ws-form-item label="合同总价（元）" span="1" prop="totalContractPrice" v-if="deptBudgetList.priceType == '定价采购'">
+          {{ deptBudgetList.totalContractPrice }}
+        </ws-form-item>
+         <ws-form-item label="代储费起算日期" span="1" prop="storageFeeStartdate">
+          {{deptBudgetList.storageFeeStartdate}}
+        </ws-form-item>
+        <ws-form-item label="签订日期" span="1" prop="signingDate">
+          {{ deptBudgetList.signingDate }}
+        </ws-form-item>
+        <ws-form-item label="代储费预计终止日期" span="1" prop="storageFeeEnddate">
+          {{deptBudgetList.storageFeeEnddate}}
+        </ws-form-item>
+        <ws-form-item label="最终实际交易量(吨)" span="1" prop="finalTradingVolume">
+          {{ deptBudgetList.finalTradingVolume }}
+        </ws-form-item>
+        
+      </ws-info-table>
+      <div class="remark">
+        <h3>货物信息</h3>
+      </div>
+      <ws-info-table>
+        <ws-form-item label="货名" span="1" prop="waterContent">
+          {{ deptBudgetList.contractGoodsInfo.goodsName }}
+        </ws-form-item>
+        <ws-form-item label="水分（%）<=" span="1" prop="intendedShipId">
+          {{ deptBudgetList.contractGoodsInfo.waterContent }}
+        </ws-form-item>
+        <ws-form-item label="品级" span="1" prop="grade">
+          {{ deptBudgetList.contractGoodsInfo.grade }}
+        </ws-form-item>
+        <ws-form-item label="杂质（%）<=" span="1" prop="impurity">
+          {{ deptBudgetList.contractGoodsInfo.impurity }}
+        </ws-form-item>
+        <ws-form-item label="容重(克/升)>=" span="1" prop="bulkDensity">
+          {{ deptBudgetList.contractGoodsInfo.bulkDensity }}
+        </ws-form-item>
+        <ws-form-item label="霉变粒（%）<=" span="1" prop="mildewGrain" class="result">
+          {{ deptBudgetList.contractGoodsInfo.mildewGrain }}
+        </ws-form-item>
+        <ws-form-item label="热损伤（%）<=" span="1" prop="jiaorenli">
+          {{ deptBudgetList.contractGoodsInfo.jiaorenli }}
+        </ws-form-item>
+        <ws-form-item label="不完善粒（%）<=" span="1" prop="imperfectGrain" class="result">
+          {{ deptBudgetList.contractGoodsInfo.imperfectGrain }}
+        </ws-form-item>
+      </ws-info-table>
+      <div class="remark">
+        <h3>流程信息</h3>
+      </div>
+      <ws-info-table>
+        <!--已付款（元）-->
+        <ws-form-item label="已付款（元）" span="1" prop="mildewGrain">
+          {{deptBudgetList.contractProcessInfo.mildewGrain}}
+        </ws-form-item>
+        <ws-form-item label="已开销售发票（元）" span="1" prop="goodsName">
+          {{ deptBudgetList.contractProcessInfo.goodsName }}
+        </ws-form-item>
+        <ws-form-item label="费用支出（元）" span="1" prop="waterContent">{{ deptBudgetList.contractProcessInfo.waterContent }}
+        </ws-form-item>
+        <ws-form-item label="未开销售发票（元）" span="1" prop="impurity">{{ deptBudgetList.contractProcessInfo.impurity }}
+        </ws-form-item>
+       <!--未回款（元）-->
+       <ws-form-item label="未回款（元）" span="1" prop="mildewGrain">
+         {{deptBudgetList.contractProcessInfo.mildewGrain}}
+       </ws-form-item>
+        <ws-form-item label="双章原件回收情况" span="1" prop="grade">{{ deptBudgetList.contractProcessInfo.grade }}
+        </ws-form-item>
+      </ws-info-table>
+      <div class="remark">
+        <h3>备注信息</h3>
+      </div>
+      <div style=" color: #afb5cb;margin-left: 20px;">
+        {{ deptBudgetList.remarks }}
+      </div>
+      <ws-upload ref="upload" :comp-id="compId" :appendix-ids="deptBudgetList.addressUrl" :editable="false"
+        accept=".jpg, .jpeg, .png, .pdf, .doc, .zip, .rar" />
+    </ws-form>
+
+    <div style="text-align: right; padding: 10px">
+      <el-button class="bg-bottom" type="primary" size="small" @click="returnsales()">关闭</el-button>
+    </div>
+  </div>
+</template>
+<script>
+  import {
+    packList,
+    xiala,
+    examineList,
+    billoperatehis,
+  } from '@/model/contarct/index'
+  import {
+    gettaskhistories
+  } from '@/model/tasksport/index'
+  import WsUpload from '@/components/WsUpload'
+  export default {
+    name: 'viewSpareMoney',
+    components: {
+      WsUpload,
+    },
+    watch: {
+      vesselId(val) {
+        this.getVesselData()
+      },
+      isShow(val) {
+        this.showType = val
+      },
+    },
+    data() {
+      return {
+        //弹出框
+        dialogViewSpareMoney: false,
+        dialogApproveFormVisible: false,
+        // 船舶类型
+        monetaryKey: null,
+        // 表格显示数据
+        tableDate: [],
+        // 是否显示
+        showType: true,
+        // 年
+        year: '',
+        status: '',
+        // 提交类型
+        submitType: true,
+        historyList: [],
+        tableData: [{
+          date: 1111,
+          name: 'qqqq',
+          address: 'errrtt'
+        }],
+        ruleDeptBudget: [],
+        taskhistories: [],
+        deptBudgetList: {
+          contractProcessInfo: {},
+          contractGoodsInfo: {},
+        },
+        mainReportAdd: {},
+        list: {},
+        compId: localStorage.getItem('ws-pf_compId'),
+      }
+    },
+
+    activated() {
+      this.status = this.$route.query.status
+      this.loaddata()
+      this.showType = this.isShow
+    },
+    methods: {
+      loaddata() {
+        gettaskhistories({
+            businessKey: this.$route.query.id,
+            workflowId: this.$route.query.workflowId
+          }).toPromise()
+          .then((response) => {
+            this.taskhistories = response
+          })
+        // 数据
+        examineList({
+            id: this.$route.query.id
+          })
+          .toPromise()
+          .then((response) => {
+            this.deptBudgetList = response
+            if (this.deptBudgetList.deliverType == 1) {
+              this.deptBudgetList.deliverType1 = '我方自提'
+            } else if (this.deptBudgetList.deliverType == 2) {
+              this.deptBudgetList.deliverType1 = '对方送货'
+            }
+          })
+        // 包装方式
+        packList({
+            constId: 'CON1'
+          })
+          .toPromise()
+          .then((response) => {
+            this.packtypeList = response
+          })
+        // 验收方式
+        this.getUnitList()
+        // 货名
+        packList({
+            constId: 'CON2'
+          })
+          .toPromise()
+          .then((response) => {
+            this.goodnameList = response
+          })
+        // 品级
+        packList({
+            constId: 'CON3'
+          })
+          .toPromise()
+          .then((response) => {
+            this.gradeList = response
+          })
+        // 双章
+        packList({
+            constId: 'CON4'
+          })
+          .toPromise()
+          .then((response) => {
+            this.ChapterTwoList = response
+          })
+      },
+      getUnitList() {
+        xiala({
+            compId: localStorage.getItem('ws-pf_compId'),
+            constCode: 'TYPEYAN',
+          })
+          .toPromise()
+          .then((response) => {
+            this.unitList = response
+            let currItem
+            this.unitList.forEach((item, index, arr) => {
+              item.flag = 'delete'
+              if (this.vModel == item.constKey) {
+                currItem = item
+              }
+            })
+            //
+            if (currItem) {
+              this.selectContract(currItem.constValue)
+            }
+          })
+      },
+      history(id1) {
+        billoperatehis({
+            id: id1
+          })
+          .toPromise()
+          .then((response) => {
+            this.historyList = response
+          })
+      },
+      // 关闭 dialog时 处理文件url 初始化upload组件
+      handleClose() {
+        this.dialogViewSpareMoney = false
+      },
+      returnsales() {
+        this.$router.go(-1)
+      },
+    },
+  }
+</script>
+<style lang="scss" scoped>
+  .status-orange,
+  .status-bule,
+  .status-green {
+    border: 1px solid;
+    border-radius: 30px;
+    padding: 3px 10px;
+    font-size: 16px;
+  }
+
+  .status-orange {
+    border-color: #ff9f24;
+    color: #ff9f24;
+    background: #ffedd5;
+  }
+
+  .status-bule {
+    border-color: #5473e8;
+    color: #5473e8;
+    background: #f0f3fe;
+  }
+
+  .status-green {
+    border-color: #50cad4;
+    color: #50cad4;
+    background: #ecfeff;
+  }
+
+  .el-form {
+    padding: 0 15%;
+  }
+
+  /deep/.ws-info-table .el-form-item {
+    border-right: 1px solid #cdd2dc;
+    border-bottom: 1px solid #cdd2dc;
+  }
+
+  .readonly {
+    position: relative;
+  }
+
+  .readonly:after {
+    content: '*';
+    color: #ff2727;
+    position: absolute;
+    right: 8px;
+    z-index: 10;
+    top: 21%;
+    font-size: 20px;
+  }
+
+  .title {
+    position: relative;
+  }
+
+  .title::before {
+    content: '';
+    display: inline-block;
+    width: 5px;
+    height: 30px;
+    background: #5473e8;
+    position: absolute;
+    left: 0;
+  }
+
+  .el-button--primary {
+    background-color: #5878e8;
+    border-color: #5878e8;
+  }
+
+  .el-col {
+    background: #f6f7fc;
+  }
+
+  /deep/.ws-info-table .el-form-item .el-form-item__content {
+    padding: 0 25px;
+    border-left: 1px solid #cdd2dc;
+    background: #fafbfc;
+    color: #afb5cb;
+  }
+
+  /deep/.ws-info-table .el-form-item .el-form-item__label {
+    width: 140px;
+    text-align: center;
+    background: #f0f2f6;
+    // border: 1px solid #cdd2dc;
+  }
+
+  .button-container {
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #fff;
+    width: 100%;
+    height: 50px;
+    padding: 0 10px;
+
+    &>div {
+      margin-left: 10px;
+      display: flex;
+      flex-wrap: nowrap;
+      flex-direction: row;
+
+      &>span {
+        line-height: 50px;
+      }
+    }
+
+    /deep/.auditFlow-box {
+      position: unset;
+      margin-left: 10px;
+
+      &/deep/.auditFlow-icon {
+        width: auto;
+        padding-right: 30px;
+      }
+
+      &/deep/.auditFlow-main {
+        position: absolute;
+      }
+    }
+  }
+
+  .box-app {
+    display: inline-block;
+    float: left;
+    margin-left: 30px;
+    line-height: 50px;
+  }
+
+  /deep/.el-dialog {
+    .el-form-item {
+      margin-bottom: 0 !important;
+
+      .el-input--medium {
+        textarea {
+          min-height: 100px !important;
+        }
+      }
+    }
+  }
+
+  .collapse-bottom {
+    margin-bottom: 20px;
+  }
+
+  .input-main .textarea .el-textarea__inner {
+    width: 100%;
+    z-index: 1;
+  }
+
+  .bg-left {
+    padding-left: 30px;
+  }
+
+  .bg-right {
+    padding-right: 10px;
+    text-align: right;
+  }
+
+  .bg-bottom {
+    margin: 15px 0px;
+  }
+
+  .wenzi {
+    width: 900px;
+    margin: 0 auto;
+  }
+
+  .wenzi h3 {
+    display: inline-block;
+    left: 10px;
+  }
+
+  .wenzi p {
+    display: inline-block;
+  }
+
+  .center {
+    width: 900px;
+    margin: 0 auto;
+  }
+
+  .el-form-item {
+    width: 50%;
+  }
+
+  .el-form-item__label {
+    text-align: center;
+  }
+
+  .ce {
+    width: 900px;
+    margin: 0 auto;
+  }
+
+  /*.crt-main .textarea /deep/ .el-form-item__label {*/
+  /*  height: 82px;*/
+  /*}*/
+  // 控制select为只读的时候显示样式
+
+  .hide-sel {
+    .el-input__inner {
+      border: 0px;
+    }
+
+    .el-icon-arrow-up {
+      display: none;
+    }
+
+    .el-textarea__inner {
+      background-color: #fff !important;
+      border: 0;
+    }
+
+    .el-date-editor {
+      i {
+        display: none;
+      }
+    }
+
+    .is-disabled {
+      .el-input__inner:hover {
+        background-color: #fff !important;
+        border: 0;
+      }
+
+      color: #606266;
+
+      .el-input__inner {
+        background-color: #fff !important;
+        border: 0;
+        color: #606266;
+      }
+
+      .el-textarea__inner {
+        background-color: #fff !important;
+        border: 0;
+        color: #606266;
+      }
+    }
+  }
+
+  // 控制select为只读的时候显示样式
+  /deep/.ws-class-table-col {
+    height: auto;
+    padding: 0px 2px;
+
+    /deep/.el-input__inner {
+      padding: 0px 2px;
+    }
+  }
+
+  /deep/.is-disabled {
+    .el-input__prefix,
+    .el-input__suffix {
+      display: none;
+    }
+
+    .el-input__inner {
+      background-color: #fff;
+      border-color: #fff !important;
+      color: #000 !important;
+      font-size: 14px;
+      cursor: text;
+      padding: 0 !important;
+    }
+  }
+
+  .winseaview-view {
+    padding: 0 0 20px;
+  }
+
+  .container {
+    overflow: scroll;
+    height: 93vh;
+  }
+
+  /deep/.ws-info-table[data-v-850a44a6] .el-form-item .el-form-item__label {
+    width: 130px;
+  }
+
+  .vertical-text-left {
+    width: 62px;
+    text-align: right;
+  }
+
+  .vertical-text {
+    margin: 0 10px;
+    color: #8890b1;
+    font-size: 12px;
+    margin-top: -4px;
+  }
+
+  .vertical-line {
+    height: 100px;
+    border-left: 2px solid #e9ecf7;
+    margin-left: 4px;
+    padding: 0 3px;
+  }
+
+  .vertical-circle {
+    width: 10px;
+    height: 10px;
+    border: 2px solid #5878e8;
+    background-color: #ffffff;
+    -webkit-border-radius: 100px;
+  }
+
+  .vertical-circle:first-child {
+    color: red;
+  }
+
+  .icon {
+    display: inline-block;
+    width: 60px;
+    background: #ecfeff;
+    border-radius: 12px;
+    border: 1px solid #50cad4;
+    position: relative;
+    font-size: 14px;
+    color: #50cad4;
+    padding: 1px 7px;
+  }
+
+  .title-top {
+    margin-top: 20px;
+    font-size: 21px;
+    font-weight: 600;
+  }
+
+  .title-number {
+    font-size: 14px;
+    font-weight: 400;
+  }
+</style>

src/views/contractManagement/storageContractRecord.vue

@@ -0,0 +1,883 @@
+<!--代储合同记录-->
+<template>
+  <div>
+    <div class="top-btn">
+      <div class="right">
+        <el-date-picker class="date-select" size="small" style="margin: 0 10px 0 0" value-format="yyyy-MM-dd"
+          v-model="value2" @change="datechange" type="daterange" align="right" unlink-panels range-separator="至"
+          start-placeholder="结算时间起" end-placeholder="结算时间止" :picker-options="pickerOptions">
+        </el-date-picker>
+        <!--  -->
+        <el-button type='primary' @click='addRecord' v-if="isSHowAddRecordBtn">生成代储记录</el-button>
+        <el-button type="primary" @click="exportlist"
+          v-hasPermission="`contractManagement.dsContract.dsContractInfo.export`" v-if="isSHowExportBtn">导出
+        </el-button>
+        <el-button type="primary" @click="collectMoney"
+          v-hasPermission="`contractManagement.dsContract.dsContractInfo.shou`" v-if="isSHowExportBtn">收费
+        </el-button>
+        <el-button type='primary' @click='collectMoneyRecord' v-if="isSHowExportBtn">收费记录</el-button>
+      </div>
+    </div>
+    <div class="content-top">
+      <div class="content-top-item">合同编号：{{routeData.contractNo}}</div>
+      <div class="content-top-item">买方：{{routeData.buyer}}</div>
+      <div class="content-top-item">合同量：{{routeData.weight}}</div>
+      <div class="content-top-item">已完成量：{{routeData.completedQuantity}}</div>
+      <div class="content-top-item">应收代储费：{{routeData.total}}</div>
+      <div class="content-top-item">已收代储费：{{routeData.received}}</div>
+    </div>
+    <div v-show="isShowRecord">
+      <el-table :data="recordList" ref="table" style="width: 100%; margin-top: 20px" border height="calc(100% - 190px)">
+        <el-table-column type="index" label="序号">
+          <template scope="scope">
+            <span v-if="scope.$index < 9">0{{ scope.$index + 1 }}</span>
+            <span v-else>{{ scope.$index + 1 }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column class="table_td" prop="goodsName" label="货名"></el-table-column>
+        <el-table-column class="table_td" prop="storageFeeDate" label="日期" width="150"></el-table-column>
+        <el-table-column class="table_td" prop="storageVolume" label="当日入库量（吨）"></el-table-column>
+        <el-table-column class="table_td" prop="deliveryVolume" label="当日出库量（吨）"></el-table-column>
+        <el-table-column class="table_td" prop="dailyBillingReserves" label="当日计费储量（吨）"></el-table-column>
+        <el-table-column class="table_td" prop="storageFee" label="代储费（元/吨天）"></el-table-column>
+        <el-table-column class="table_td" prop="receivable" label="应收(元)"></el-table-column>
+        <el-table-column class="table_td" prop="collectionEdPayable" label="操作" width="300">
+          <template scope="scope">
+            <el-button @click="storageFeeLook(scope.row)">代储费</el-button>
+            <el-button @click="warehousingLook(scope.row)">入库</el-button>
+            <el-button @click="stop(scope.row)" v-if="scope.row.endFlag==0">终止</el-button>
+            <el-button @click="cancelTermination(scope.row)" v-if="scope.row.endFlag==1&&scope.$index==0">取消终止
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
+        :page-size="deptCircularPage.pageSize" layout="total, sizes, prev, pager, next, jumper"
+        :total="deptBudgetTotal">
+      </el-pagination>
+    </div>
+    <!-- 修改代储费 -->
+    <el-dialog :visible.sync="editStorageFee" :append-to-body="true" title="修改代储费" class="sk-dialog"
+      width="400px!important">
+      <div class="sf-dialog">
+        <div class="row">
+          <div class="left">代储费（元/吨·天）</div>
+          <div class="right">
+            <el-input type="number" @mousewheel.native.prevent v-model="editRecordObj.storageFee" placeholder="请输入代储费"
+              maxlength="100" size="small" />
+          </div>
+        </div>
+        <div class="row">
+          <div class="left">起用日期</div>
+          <div class="right">
+            <el-input type="text" @mousewheel.native.prevent v-model="recordObj.storageFeeStartdate" placeholder=""
+              maxlength="100" size="small" disabled />
+          </div>
+        </div>
+        <div class="row row-last">
+          <el-button @click="editStorageFee = false">取消</el-button>
+          <el-button @click="editStorageFeeSubmit" type='primary'>提交</el-button>
+        </div>
+      </div>
+    </el-dialog>
+    <!-- 入库 -->
+    <el-dialog :visible.sync="editWarehousing" :append-to-body="true" title="修改入库量" class="sk-dialog"
+      width="400px!important">
+      <div class="sf-dialog">
+        <div class="row">
+          <div class="left">当日入库量（吨）</div>
+          <div class="right">
+            <el-input type="number" @mousewheel.native.prevent v-model="editWarehousingObj.storageVolume"
+              placeholder="请输入入库量" maxlength="100" size="small" />
+          </div>
+        </div>
+        <div class="row">
+          <div class="left">入库日期</div>
+          <div class="right">
+            <el-input type="text" @mousewheel.native.prevent v-model="rowData.storageFeeDate" placeholder=""
+              maxlength="100" size="small" disabled />
+          </div>
+        </div>
+        <div class="row row-last">
+          <el-button @click="editWarehousing = false">取消</el-button>
+          <el-button @click="editWarehousingSubmit" type='primary'>提交</el-button>
+        </div>
+      </div>
+    </el-dialog>
+    <!-- 生成记录 -->
+    <el-dialog :visible.sync="addRecoredDialog" :append-to-body="true" title="生成记录" class="scjl-dialog"
+      width="400px!important">
+      <div class="sf-dialog">
+        <div class="row">
+          <div class="left">代储费（元/吨·天）</div>
+          <div class="right">
+            <el-input type="number" @mousewheel.native.prevent v-model="recordObj.storageFee" placeholder=""
+              maxlength="100" size="small" disabled />
+          </div>
+        </div>
+        <div class="row">
+          <div class="left">起算日期</div>
+          <div class="right">
+            <el-input type="text" @mousewheel.native.prevent v-model="recordObj.storageFeeStartdate" placeholder=""
+              maxlength="100" size="small" disabled />
+          </div>
+        </div>
+        <div class="row">
+          <div class="left">预计截止日期</div>
+          <div class="right">
+            <el-input type="text" @mousewheel.native.prevent v-model="recordObj.storageFeeEnddate" placeholder=""
+              maxlength="100" size="small" disabled />
+          </div>
+        </div>
+        <div class="row">
+          <div class="left">起算重量（吨）</div>
+          <div class="right">
+            <el-input type="number" @mousewheel.native.prevent v-model="recordObj.storageFeeWeight" placeholder=""
+              maxlength="100" size="small" disabled />
+          </div>
+        </div>
+        <div class="row row-last">
+          <el-button @click="addRecoredDialog = false">取消</el-button>
+          <el-button @click="addRecoredSubmit" type='primary'>提交</el-button>
+        </div>
+      </div>
+    </el-dialog>
+    <!-- 收费 -->
+    <el-dialog :visible.sync="collectForm" :append-to-body="true" title="收费" class="sk-dialog">
+      <div class="sf-dialog">
+        <div class="row">
+          <div class="left">金额（元）</div>
+          <div class="right">
+            <el-input type="number" @mousewheel.native.prevent v-model="chargeObj.amountMoney"
+              placeholder="请输入本次收款金额（元）" maxlength="100" size="small" />
+          </div>
+        </div>
+        <div class="row">
+          <div class="left">收款日期</div>
+          <div class="right">
+            <el-date-picker v-model="chargeObj.collectionDate" type="date" placeholder="选择日期"></el-date-picker>
+          </div>
+        </div>
+        <div class="row">
+          <div class="left">收款截图</div>
+          <el-upload class="avatar-uploader" action="https://www.zthymaoyi.com/upload/admin" :show-file-list="false"
+            :on-success="handleAvatarSuccess">
+            <div v-if='imageUrl.length>0'>
+              <div style='display:inline-block;' v-for='item in imageUrl'>
+                <img :src="item" class="avatar" />
+              </div>
+            </div>
+            <i class="el-icon-plus avatar-uploader-icon"></i>
+          </el-upload>
+        </div>
+        <div class="row row-last">
+          <el-button @click="collectForm = false">取消</el-button>
+          <el-button @click="collectSubmit" type='primary'>提交</el-button>
+        </div>
+      </div>
+    </el-dialog>
+    <!-- 收费记录 -->
+    <el-dialog :visible.sync="dialogVisible" title="收费记录" class="sfjl-dialog">
+      <el-table :data="sfRecordList" ref="table" style="width: 100%; margin-top: 20px" border
+        height="calc(100% - 190px)">
+        <el-table-column type="index" label="序号">
+          <template scope="scope">
+            <span v-if="scope.$index < 9">0{{ scope.$index + 1 }}</span>
+            <span v-else>{{ scope.$index + 1 }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column class="table_td" prop="amountMoney" label="金额(元)"></el-table-column>
+        <el-table-column class="table_td" prop="collectionDate" label="收费日期"></el-table-column>
+        <el-table-column class="table_td" prop="updateDate" label="操作日期"></el-table-column>
+        <el-table-column class="table_td" prop="operator" label="操作人"></el-table-column>
+        <el-table-column class="table_td" prop="collectionScreenshot" label="附件">
+          <template slot-scope="scope">
+            <img width="18" height="20" style="vertical-align: text-top; position: relative; top: -1px"
+              src="../../../public/img/fujian.png" @click="fujian(scope.row)" alt="" />
+            <span v-if="scope.row.addressUrlArray != null">
+              {{scope.row.addressUrlArray.length == 0? "":scope.row.addressUrlArray.length}}
+            </span>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <WinseaContentModal v-model="accessoryTFs" :title="$t('system.noticeCircular.information')"
+        @on-cancel="handleClose">
+        <div class="image-list">
+          <el-image v-for="(item,index) in fjImageList" style="width: 100px; height: 100px" :src="item" fit="fill"
+            :preview-src-list="fjImageList"></el-image>
+        </div>
+      </WinseaContentModal>
+      <div class="close-sfju-dialog">
+        <el-button type='primary' @click='dialogVisible=false'>关闭</el-button>
+      </div>
+
+    </el-dialog>
+  </div>
+</template>
+<script>
+  import {
+    dayjs,
+    EventBus
+  } from 'base-core-lib'
+  import {
+    downloadFile
+  } from '@/utils/batchDown'
+  import {
+    storageFeeRecordList,
+    addStorageFeeRecord,
+    editStorageRecordInfo,
+    storageFeeRecordCharge,
+    feeRecord,
+    stopStorageFeeRecord,
+    exportStorageFee
+  } from '@/model/contarct/index'
+  import download from '../../components/WsDownload/download'
+  import WsUpload from '@/components/WsUpload'
+  export default {
+    components: {
+      WsUpload
+    },
+    watch: {},
+    data() {
+      return {
+        date: {
+          year: dayjs().format('YYYY'),
+          month: dayjs().format('MM'),
+        },
+        termination: true,
+        fjImageList: [],
+        sfRecordList: [],
+        //公司id，合同id，金额，收费截图，收费日期，操作人
+        chargeObj: {
+          compId: '',
+          contractId: '',
+          amountMoney: '',
+          collectionScreenshot: '',
+          collectionDate: "",
+          operator: '',
+        },
+        editWarehousingObj: {
+          id: '',
+          storageVolume: '',
+        },
+        editRecordObj: {
+          id: '',
+          storageFee: '',
+          flag: 1
+        },
+        pickerOptions: {},
+        isSHowExportBtn: false,
+        isSHowAddRecordBtn: false,
+        recordObj: {
+          storageFeeStartdate: ''
+        },
+        editWarehousing: false,
+        editStorageFee: false,
+        addRecoredDialog: false,
+        compId: localStorage.getItem('ws-pf_compId'),
+        id: '',
+        accessoryTFs: false,
+        appendixIdss: [],
+        isShowRecord: false,
+        collectForm: false,
+        routeData: {},
+        //分页
+        currentPage: 1,
+        pageSize: 10,
+        recordList: [],
+        deptCircularPage: {},
+        deptBudgetTotal: 0,
+        dialogVisible: false,
+        //上传截图路径
+        imageUrl: [],
+        rowData: {},
+        value2: [],
+      }
+    },
+    destroyed: function() {
+      this.editWarehousing = false
+      this.editStorageFee = false
+      this.addRecoredDialog = false
+      this.isShowRecord = false
+    },
+    mounted() {
+      let that = this
+      this.routeData = {
+        contractNo: this.$route.query.contractNo,
+        compId: localStorage.getItem('ws-pf_compId'),
+        buyer: this.$route.query.buyer,
+        weight: this.$route.query.weight,
+        completedQuantity: this.$route.query.completedQuantity,
+        total: this.$route.query.total,
+        received: this.$route.query.received,
+        storageFee: this.$route.query.storageFee,
+        storageFeeStartdate: this.$route.query.storageFeeStartdate,
+        storageFeeEnddate: this.$route.query.storageFeeEnddate,
+        storageFeeWeight: this.$route.query.storageFeeWeight,
+        status: this.$route.query.status
+      }
+      this.recordObj = {
+        storageFee: this.$route.query.storageFee,
+        storageFeeStartdate: this.$route.query.storageFeeStartdate,
+        storageFeeEnddate: this.$route.query.storageFeeEnddate,
+        storageFeeWeight: this.$route.query.storageFeeWeight,
+      }
+      this.value2 = [this.$route.query.storageFeeStartdate, this.$route.query.storageFeeEnddate]
+      this.pickerOptions = {
+        disabledDate(time) {
+          return (time.getTime() < (new Date(that.recordObj.storageFeeStartdate).getTime() - 86400000)) || (time
+            .getTime() >
+            new Date(that.recordObj.storageFeeEnddate).getTime())
+        }
+      }
+      this.getList()
+    },
+    methods: {
+      // 收费记录附件
+      fujian(row) {
+        this.id = row.id
+        this.accessoryTFs = true
+        this.appendixIdss = row.collectionScreenshot
+        console.log(this.appendixIdss)
+      },
+      // 代储费
+      storageFeeLook(row) {
+        if (this.routeData.status == '已完成') {
+          this.$message({
+            message: '合同已完成，不可操作！',
+            type: 'warning',
+          })
+          return
+        }
+        this.editRecordObj.id = row.id;
+        this.editRecordObj.storageFee = row.storageFee
+        this.editStorageFee = true
+
+        // this.customerInfo = true
+        // this.viewLock = true
+        // this.getCustomerNumberCard(row)
+      },
+      // 入库
+      warehousingLook(row) {
+        if (this.routeData.status == '已完成') {
+          this.$message({
+            message: '合同已完成，不可操作！',
+            type: 'warning',
+          })
+          return
+        }
+        this.rowData = row
+        this.editWarehousingObj = {
+          id: row.id,
+          storageVolume: row.storageVolume,
+        }
+        this.editWarehousing = true
+
+        // this.getCustomerNumberCard(row)
+      },
+      // 修改代储费
+      editStorageFeeSubmit() {
+        if (!this.editRecordObj.storageFee && this.editRecordObj.storageFee != 0) {
+          this.$message({
+            message: '代储费不能为空！',
+            type: 'warning',
+          })
+          return
+        }
+        this.editRecordObj.storageFee = Number(this.editRecordObj.storageFee)
+        if (this.editRecordObj.storageFee < 0 || this.editRecordObj.storageFee > 1000) {
+          this.$message({
+            message: '代储费输入错误,0-1000之间数字！',
+            type: 'warning',
+          })
+          return
+        }
+        if (this.editRecordObj.storageFee.toString().indexOf('.') > -1) {
+          if (this.editRecordObj.storageFee.toString().split('.')[1].length > 2) {
+            this.$message({
+              message: '代储费输入错误,最多保留两位小数！',
+              type: 'warning',
+            })
+            return
+          }
+        }
+        editStorageRecordInfo(this.editRecordObj)
+          .toPromise()
+          .then((response) => {
+            this.$message.success('修改成功！')
+            this.editStorageFee = false
+            this.getList()
+          })
+      },
+      // 修改入库量
+      editWarehousingSubmit() {
+        if (!this.editWarehousingObj.storageVolume && this.editWarehousingObj.storageVolume != 0) {
+          this.$message({
+            message: '入库量不能为空！',
+            type: 'warning',
+          })
+          return
+        }
+        this.editWarehousingObj.storageVolume = Number(this.editWarehousingObj.storageVolume)
+        if (this.editWarehousingObj.storageVolume < 0 || this.editWarehousingObj.storageVolume > 200000) {
+          this.$message({
+            message: '入库量输入错误,0-200000之间数字！',
+            type: 'warning',
+          })
+          return
+        }
+        if (this.editWarehousingObj.storageVolume.toString().indexOf('.') > -1) {
+          if (this.editWarehousingObj.storageVolume.toString().split('.')[1].length > 3) {
+            this.$message({
+              message: '代储费输入错误,最多保留三位小数！',
+              type: 'warning',
+            })
+            return
+          }
+        }
+        editStorageRecordInfo(this.editWarehousingObj)
+          .toPromise()
+          .then((response) => {
+            this.$message.success('修改成功！')
+            this.editWarehousing = false
+            this.getList()
+          })
+      },
+      // 收费记录
+      collectMoneyRecord() {
+        feeRecord({
+            contractId: this.$route.query.contractId
+          })
+          .toPromise()
+          .then((response) => {
+            this.sfRecordList = response
+            for (let i = 0; i < response.length; i++) {
+              response[i].addressUrlArray = response[i].collectionScreenshot.split(',')
+              this.fjImageList = response[i].collectionScreenshot.split(',')
+            }
+            // this.$message.success('修改成功！')
+            // this.editWarehousing = false
+            // this.getList()
+          })
+
+        this.dialogVisible = true
+      },
+      // 取消终止
+      cancelTermination(row) {
+        if (this.routeData.status == '已完成') {
+          this.$message({
+            message: '合同已完成，不可操作！',
+            type: 'warning',
+          })
+          return
+        }
+        //判断当前时间是在预计终止前还是后
+        let _stopData = new Date(this.$route.query.storageFeeEnddate).getTime()
+        let _rowTime = new Date(row.storageFeeDate).getTime()
+        if (_rowTime - _stopData < 0) {
+          this.$confirm(
+              '确定取消终止，继续收费？',
+              '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning',
+              }
+            )
+            .then(() => {
+              addStorageFeeRecord({
+                  contractNo: this.$route.query.contractNo,
+                })
+                .toPromise()
+                .then((response) => {
+                  this.$message.success('操作成功！')
+                  this.getList()
+                })
+            })
+            .catch(() => {
+              this.$message.success('操作失败！')
+              return false
+            })
+        } else {
+          this.$confirm(
+              '已达到预计终止日期，如需继续收费请前往合同修改终止日期？',
+              '提示', {
+                confirmButtonText: '去修改',
+                cancelButtonText: '取消',
+                type: 'warning',
+              }
+            )
+            .then(() => {
+              // addStorageFeeRecord({
+              //     contractNo: this.$route.query.contractNo,
+              //   })
+              //   .toPromise()
+              //   .then((response) => {
+              //       this.$message.success('操作成功！')
+              //     this.getList()
+              //   })
+            })
+            .catch(() => {
+              // this.$message.success('操作失败！')
+              return false
+            })
+        }
+      },
+      // 终止
+      stop(row) {
+        if (this.routeData.status == '已完成') {
+          this.$message({
+            message: '合同已完成，不可操作！',
+            type: 'warning',
+          })
+          return
+        }
+        // this.$confirm(
+        //     '已达到预计终止日期，如需继续收费请前往合同修改终止日期？',
+        //     '提示', {
+        //       confirmButtonText: '确定',
+        //       cancelButtonText: '取消',
+        //       type: 'warning',
+        //     }
+        //   )
+        //   .then(() => {
+
+        //   })
+        //   .catch(() => {
+        //     return false
+        //   })
+        this.$confirm(
+            row.storageFeeDate + '之后将不在计费，是否确定终止？',
+            '提示', {
+              confirmButtonText: '确定',
+              cancelButtonText: '取消',
+              type: 'warning',
+            }
+          )
+          .then(() => {
+            stopStorageFeeRecord({
+                id: row.id,
+                endFlag: 1,
+                flag: 2
+              })
+              .toPromise()
+              .then((response) => {
+                this.$message.success('终止成功！')
+                this.termination = false
+                this.getList()
+              })
+
+          })
+          .catch(() => {
+            return false
+          })
+      },
+      //生成代储费记录
+      addRecord() {
+        console.log(111)
+        this.addRecoredDialog = true
+      },
+      // 时间筛选
+      datechange() {
+        this.getList()
+      },
+      // 导出
+      async exportlist() {
+        let _data = {
+          compId: localStorage.getItem('ws-pf_compId'),
+          contractNo: this.routeData.contractNo
+        }
+        const {
+          data
+        } = await exportStorageFee(
+          _data, {}, {
+            responseType: 'blob',
+          }
+        ).toPromise()
+        downloadFile({
+          res: data,
+          fileName: `${
+            this.date.year + (this.date.month ? `-${this.date.month}` : '')
+          }代储费信息`,
+          type: 'xls',
+        })
+
+      },
+      //上传付款截图
+      handleAvatarSuccess(e) {
+        this.imageUrl.push(e.url)
+      },
+      // 查询列表
+      getList() {
+        storageFeeRecordList({
+            compId: localStorage.getItem('ws-pf_compId'),
+            contractNo: this.$route.query.contractNo,
+            currentPage: this.currentPage,
+            pageSize: this.pageSize,
+          })
+          .toPromise()
+          .then((response) => {
+            this.recordList = response.records
+            if (response.records.length > 0) {
+              this.isSHowExportBtn = true
+              this.isShowRecord = true
+            } else {
+              this.isSHowAddRecordBtn = true
+            }
+          })
+      },
+      dateFormat(fmt, date) {
+        let ret
+        const opt = {
+          'Y+': date.getFullYear().toString(), // 年
+          'm+': (date.getMonth() + 1).toString(), // 月
+          'd+': date.getDate().toString(), // 日
+          'H+': date.getHours().toString(), // 时
+          // "M+": date.getMinutes().toString(),         // 分
+          // "S+": date.getSeconds().toString()          // 秒
+          // 有其他格式化字符需求可以继续添加，必须转化成字符串
+        }
+        for (let k in opt) {
+          ret = new RegExp('(' + k + ')').exec(fmt)
+          if (ret) {
+            fmt = fmt.replace(
+              ret[1],
+              ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, '0')
+            )
+          }
+        }
+        return fmt
+      },
+      // 收款
+      collectMoney() {
+        if (this.routeData.status == '已完成') {
+          this.$message({
+            message: '合同已完成，不可操作！',
+            type: 'warning',
+          })
+          return
+        }
+        this.chargeObj = {
+          compId: localStorage.getItem('ws-pf_compId'),
+          contractId: this.$route.query.contractId,
+          operator: localStorage.getItem('ws-pf_staffName'),
+          collectionDate: this.dateFormat('YYYY-mm-dd', new Date())
+        }
+        this.collectForm = true
+      },
+      // 生成记录提交
+      addRecoredSubmit() {
+        this.$confirm(
+            '提交后起算日期和起算重量不可修改，是否确定提交？',
+            '提示', {
+              confirmButtonText: '确定',
+              cancelButtonText: '取消',
+              type: 'warning',
+            }
+          )
+          .then(() => {
+            // // 添加记录
+            addStorageFeeRecord({
+                contractNo: this.$route.query.contractNo,
+              })
+              .toPromise()
+              .then((response) => {
+                this.getList()
+              })
+
+            this.addRecoredDialog = false
+            this.isShowRecord = true
+          })
+          .catch(() => {
+            return false
+          })
+      },
+      // 收费提交
+      collectSubmit() {
+        if (!this.chargeObj.amountMoney && this.chargeObj.amountMoney != 0) {
+          this.$message({
+            message: '金额不能为空！',
+            type: 'warning',
+          })
+          return
+        }
+        this.chargeObj.amountMoney = Number(this.chargeObj.amountMoney)
+        if (this.chargeObj.amountMoney < 0 || this.chargeObj.amountMoney > 1000000) {
+          this.$message({
+            message: '金额输入错误,0-1000000之间数字！',
+            type: 'warning',
+          })
+          return
+        }
+        if (this.chargeObj.amountMoney.toString().indexOf('.') > -1) {
+          if (this.chargeObj.amountMoney.toString().split('.')[1].length > 2) {
+            this.$message({
+              message: '代储费输入错误,最多保留三位小数！',
+              type: 'warning',
+            })
+            return
+          }
+        }
+        if (!this.imageUrl) {
+          this.$message({
+            message: '请上传收费截图',
+            type: 'warning',
+          })
+          return
+        }
+        this.chargeObj.collectionScreenshot = this.imageUrl.toString()
+
+        this.$confirm(`确定提交收费信息？`, {
+          cancelButtonText: '取消',
+          confirmButtonText: '确定',
+          type: 'warning',
+        }).then(() => {
+          storageFeeRecordCharge(this.chargeObj)
+            .toPromise()
+            .then((response) => {
+              this.$message.success('收费成功！')
+              this.chargeObj = {}
+              this.collectForm = false
+              this.getList()
+            })
+        })
+      },
+      handleSizeChange(val) {
+        console.log(`每页 ${val} 条`)
+        this.pageSize = val
+        this.getList()
+      },
+      handleCurrentChange(val) {
+        this.currentPage = val
+        console.log(`当前页: ${val}`)
+        this.getList()
+      },
+    }
+  }
+</script>
+<style lang="scss" scoped>
+  .avatar-uploader {
+    position: relative;
+    width: 80px;
+  }
+
+  .avatar-uploader .el-upload {
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+    width: 80px;
+  }
+
+  .avatar-uploader .el-upload:hover {
+    border-color: #409eff;
+  }
+
+  .avatar-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 80px;
+    height: 80px;
+    line-height: 80px;
+    text-align: center;
+    border: 1px solid #8890b1;
+    border-radius: 5px;
+  }
+
+  .avatar {
+    width: 80px;
+    height: 80px;
+    border: 1px solid #8890b1;
+    border-radius: 5px;
+    display: block;
+  }
+
+
+  .top-btn {
+    display: flex;
+    justify-content: space-between;
+
+    .el-date-editor {
+      width: 220px !important;
+    }
+
+    .date-select {
+      width: 240px;
+    }
+  }
+
+  .top-btn-two {
+    margin-top: 20px;
+
+    .left {
+      display: flex;
+    }
+  }
+
+  .content-top {
+    display: flex;
+    margin-top: 20px;
+  }
+
+  .customer-item {
+    margin-bottom: 0;
+    display: flex;
+  }
+
+  .el-form-item__content {
+    width: 100%;
+    margin-left: 0 !important;
+  }
+
+
+
+  /deep/.el-form-item__content {
+    margin-left: 0 !important;
+    width: 200px;
+  }
+
+  .content-top-item {
+    // background: red;
+    margin-right: 20px;
+  }
+
+  .el-pagination {
+    text-align: center;
+  }
+
+  .top-btn /deep/.el-date-editor {
+    width: 300px !important;
+  }
+
+  .sk-dialog {
+    /deep/.el-dialog {
+      width: 300px !important;
+    }
+  }
+
+  .sf-dialog {
+    .row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin: 10px 0;
+
+      .right {
+        width: 200px;
+      }
+    }
+
+    .row-last {
+      justify-content: space-around;
+    }
+  }
+
+  .close-sfju-dialog {
+    width: 100%;
+    margin: 10px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+</style>