yiliangyiyun-pc-jj/src/views/contractManagement/salesPriceConfirmationSheet.vue

<!--期货销售点价确认单-->
<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="wenzi">
      <h3>所属合同</h3>
      <p>
        &nbsp;&nbsp;销售合同(
        <template>{{ this.deptBudgetList.contractNo }}</template>
        )
      </p>
      <div class="tianjiaanniu">
        <ws-button
          type="primary"
          @click="sheetAdd()"
          v-hasPermission="
            `contractManagement.salesContract.salesContractInfo.add`
          "
          ><img
            width="13"
            height="13"
            style="
              vertical-align: text-top;
              position: relative;
              top: 2px;
              left: -4px;
            "
            src="../../../public/img/header-add.png"
            alt=""
          />添加</ws-button
        >
      </div>
    </div>
    <div class="dianjiadanbianhao">
      <h3>点价单编号</h3>
      <p>
        <template>CG20210329-02{{ this.deptBudgetList.priceListNo }}</template>
      </p>
      <div class="fujian">
        <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.enclosureTypeFlag = '0')"
            >&nbsp;&nbsp;&nbsp;未上传</span
          >
          <span v-if="(scope.row.enclosureTypeFlag = '1')"
            >&nbsp;&nbsp;&nbsp;已上传</span
          >
        </template>
      </div>
      <div class="caozuoanniu">
        <el-button class="find" type="primary" @click="sheetEdit()"
          >编辑</el-button
        >
        <el-button class="find" type="primary" @click="sheetDelete()"
          >删除</el-button
        >
      </div>
    </div>
    <div class="center">
      <ws-form ref="deptBudgetList" :model="deptBudgetList">
        <!--基本信息-->
        <ws-info-table>
          <ws-form-item
            label="品种合约及方向"
            span="1"
            prop="varietyContractDirection"
          >
            <div class="unchanged">
              {{ deptBudgetList.varietyContractDirection }}
            </div>
          </ws-form-item>
          <ws-form-item label="买方联络人" span="1" prop="buyer">
            <div class="unchanged">
              {{ deptBudgetList.buyer }}
            </div>
          </ws-form-item>
          <ws-form-item label="成交数量" span="1" prop="transactionsNumberHand">
            <div class="unchanged">
              {{
                deptBudgetList.transactionsNumberHand
              }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;手
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              即&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{
                deptBudgetList.transactionsNumber
              }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;吨
            </div>
          </ws-form-item>
          <ws-form-item label="买方联络人电话" span="1" prop="buyerPhone">
            <div class="unchanged">
              {{ deptBudgetList.buyerPhone }}
            </div>
          </ws-form-item>
          <ws-form-item
            label="成交价格(元/吨)"
            span="1"
            prop="transactionPrice"
          >
            <div class="unchanged">
              {{ deptBudgetList.transactionPrice }}
            </div>
          </ws-form-item>
          <ws-form-item label="卖方联络人" span="1" prop="seller">
            <div class="unchanged">
              {{ deptBudgetList.seller }}
            </div>
          </ws-form-item>
          <ws-form-item label="成交日期" span="1" prop="transactionDate">
            <div class="unchanged">
              {{ deptBudgetList.transactionDate }}
            </div>
          </ws-form-item>
          <ws-form-item label="卖方联络人电话" span="1" prop="sellerPhone">
            <div class="unchanged">
              {{ deptBudgetList.sellerPhone }}
            </div>
          </ws-form-item>
          <ws-form-item label="备注" span="1" prop="remarks">
            <div class="unchanged">
              {{ deptBudgetList.remarks }}
            </div>
          </ws-form-item>
        </ws-info-table>
      </ws-form>
    </div>
  </div>
</template>
<script>
import { xiala, addxiala, editxiala, delxiala } from '@/model/contarct/index'
import WsUpload from '@/components/WsUpload'
import { EventBus } from 'base-core-lib'
import { regionData,  } from 'element-china-area-data'

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: '',
      options_: regionData,
      selectedOptions: [],
      selectedOptions1: [],
      // 提交类型
      submitType: true,
      tableData: [{ date: 1111, name: 'qqqq', address: 'errrtt' }],
      trainingMethods: {},
      packtypeList: [],
      compId: sessionStorage.getItem('ws-pf_compId'),
      contractNo: '',
      mainReportAdd: {},
      appendixIdsAdd: '',
      size: 10,
      unitList: [],
      goodnameList: [],
      gradeList: [],
      ChapterTwoList: [],
      addressUrls: [],
      addressUrl: '',
      deptBudgetList: {},
      pickerBeginDateBefore: {
        disabledDate: (time) => {
          return time.getTime() > Date.now()
        },
      },
      ruleDeptBudget: {
        contractNo: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          {
            min: 6,
            max: 20,
            message: '长度在 6 到 20 个字符',
            trigger: 'blur',
          },
        ],
      },
      selectIntendedShip: {},
      interviewTypeList: {},
      fileList: [],
    }
  },
  methods: {
    close(index) {
      this.addressUrls.splice(index, 1)
    },
    // 关闭 dialog时 处理文件url 初始化upload组件
    handleClose() {
      this.dialogViewSpareMoney = false
    },
    handleChange(value) {
      this.selectedOptions = value
    },
    handleChange1(value) {
      this.selectedOptions1 = value
    },
    returnsales() {
      this.$router.push({ path: 'futuresSalesContract' })
    },
    //创建点价确认单
    sheetAdd() {
      this.$router.push({ path: 'salesPriceConfirmationSheetAdd' })
    },
    // 编辑点价确认单
    sheetEdit() {
        this.$router.push({ path: 'salesPriceConfirmationSheetEdit' })
    },
    // 删除点价确认单
    sheetDelete(item, index) {
    //   this.$confirm(`确认单删除后不可恢复，是否确定删除？`, '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning',
    //   })
    //     .then(() => {
    //       delDriver({ id: row.id })
    //         .toPromise()
    //         .then((response) => {
    //           this.$notify.success({
    //             title: '成功',
    //             message: '删除成功',
    //           })
    //           this.getUnitList()
    //           this.pleaseChoose = ''
    //         })
    //         .catch((response) => {
    //           console.log(response)
    //           EventBus.$emit('error', response.message)
    //         })
    //     })
    //     .catch(() => {
    //       return false
    //     })
    
    //   if (Object.is(item.constKey, 1)) {
    //     return
    //   }
    //   if (!item.constValue) {
    //     this.unitList.splice(index, 1)
    //     return
    //   }
    //   delxiala({ id: this.unitList[index].id })
        
    },
    fujian(row) {
      if (row.addressUrl === null || row.addressUrl === '') {
        EventBus.$emit(
          'warning',
          this.$t('system.noticeCircular.NoInformation')
        )
      } else {
        this.accessoryTFs = true
      }
      this.appendixIdss = row.addressUrl.split(',')
    },
    getUnitList() {
      xiala({
        compId: sessionStorage.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)
          }
        })
    },
    resetForm(deptBudgetList) {
      this.$refs[deptBudgetList].resetFields()
    },
  },
}
</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;
  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;
}
.caozuoanniu {
  margin-left: 83%;
  margin-top: -49px;
  margin-bottom: 20px;
}
.fujian {
  margin-left: 20px;
}
.wenzi {
  width: 68%;
  margin: 0 auto;
  margin-top: 15px;
}
.wenzi h3 {
  display: inline-block;
  left: 10px;
}
.wenzi p {
  display: inline-block;
  margin-left: 16px;
}
.dianjiadanbianhao {
  width: 70%;
  margin: 0 auto;
  margin-top: 45px;
}
.dianjiadanbianhao h3 {
  display: inline-block;
  left: 10px;
  font-size: inherit;
  margin-bottom: 24px;
}
.dianjiadanbianhao p {
  display: inline-block;
  margin-left: 20px;
}
.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: 148px;
}
/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;
}
.tianjiaanniu {
  margin-left: 92%;
  margin-top: -43px;
}
/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;
}
</style>