yiliangyiyun-pc/src/views/contractManagement/purchaseContract.vue

<!--采购合同-->
<!--2019年5月30日 20:25:16 by jlx-->
<template>
  <div>
    <BaseHeaderLayout :leftSpan="8">
      <template slot="left">
        <ws-button
          type="primary"
          @click="handleAdd()"
          v-hasPermission="`contractManagement.buyContract.buyContractInfo.add`"
          >添加</ws-button
        >
        <ws-button
          @click="exportlist()"
          v-hasPermission="
            `contractManagement.buyContract.buyContractInfo.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>
        <ws-input
          v-model="searchKeyWord"
          placeholder="可按照合同编号、买方名称、卖方名称进行查找"
          clearable
          maxlength="500"
          type="input"
          class="findValue"
        ></ws-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="780"
    >
      <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="合同编号" width="150">
      </el-table-column>
      <el-table-column prop="goodsName" label="货名" width="80">
      </el-table-column>
      <el-table-column prop="grade" label="品级" width="80">
        <template slot-scope="scope">
          <span v-if="scope.row.grade == '一等品'" class="top-grade">{{
            scope.row.grade
          }}</span>
          <span v-if="scope.row.grade == '二等品'" class="second-class">{{
            scope.row.grade
          }}</span>
          <span v-if="scope.row.grade == '三等品'" class="third-class">{{
            scope.row.grade
          }}</span>
          <span v-if="scope.row.grade == '等外'" class="substandard">{{
            scope.row.grade
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="weight" label="重量（吨）"> </el-table-column>
      <el-table-column prop="unitContractPrice" label="合同单价（元）">
      </el-table-column>
      <el-table-column prop="packingMethod" 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="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="status" label="状态">
        <template slot-scope="scope">
          <span v-if="scope.row.approveStatus">{{
            scope.row.approveStatus
          }}</span>
          <el-popover
            v-else
            placement="left"
            :width="285"
            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=""
          />
          <!-- <i class="el-icon-edit" @click="editClick(scope.row)"></i> -->
        </template>
      </el-table-column>
      <el-table-column prop="signingDate" label="签订日期"> </el-table-column>
      <el-table-column prop="mildewGrain" label="已付款（元）">
      </el-table-column>
      <el-table-column prop="goodsNames" label="已开发票 （元）">
      </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="address" label="操作" width="140">
        <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.buyContract.buyContractInfo.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.buyContract.buyContractInfo.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.buyContract.buyContractInfo.delete`
            "
            @click="handleDelete(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,
  export1,
  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: '',
      //弹出框
      dialogViewSpareMoney: false,
      dialogApproveFormVisible: false,
      // 船舶类型
      monetaryKey: null,
      // 表格显示数据
      tableDate: [],
      size: 10,
      // 是否显示
      showType: true,
      // 年
      year: '',
      deliver_type: 1,
      deptBudgetTotal: 0,
      currentPage: 1,
      pageSize: 10,
      appendixIdsAdd: '',
      searchType: 1,
      searchTypeText: '未完成',
      searchKeyWord: '',
      contractType: 2,
      goodsType: 1,
      startDate: null,
      endDate: null,
      addressUrls: [],
      accesscard: false,
      // 提交类型
      submitType: true,
      deptCircularPage: {},
      date: {
        year: dayjs().format('YYYY'),
        month: dayjs().format('MM'),
      },
      contractList: [],
      deptBudgetList: {},
      historyList: [],
      appendixIdss: [],
      fileList: [],
      compId: localStorage.getItem('ws-pf_compId'),
      pickerBeginDateBefore: {
        disabledDate: (time) => {
          return time.getTime() > Date.now()
        },
      },
      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])
            },
          },
        ],
      },
      value1: '',
      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,
        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].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
        }
      }
    },
    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: 'purchaseContractExamine',
        query: {
          id: row.id,
          status: row.status,
        },
      })
    },
    handleAdd() {
      this.$router.push({
        path: 'purchaseContractAdd',
      })
    },
    handleEdit(row) {
      this.$router.push({
        name: 'purchaseContractEdit',
        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 export1(
        {
          compId: localStorage.getItem('ws-pf_compId'),
          contractType: this.contractType,
          goodsType: this.goodsType,
          currentPage: this.currentPage,
          pageSize: this.pageSize,
          searchType: this.searchType,
          searchKeyWord: this.searchKeyWord,
          startDate: this.startDate,
          endDate: this.endDate,
        },
        {},
        {
          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
        })
    },
  },
}
</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>