wt_project_web_bak/src/views/contract/component/info.vue

<template>
  <div>
    <div class="padding top flex flex-center flex-justify-between">
      <span>基础信息</span>
      <div>
        <el-button type="primary" plain @click="disabled = !disabled"
          >{{ disabled ? '编 辑' : '保 存' }}
        </el-button>
        <el-button type="primary" plain @click="libraryDetail">
          查 看</el-button
        >
      </div>
    </div>
    <div class="padding">
      <el-form
        label-position="right"
        label-width="100px"
        :disabled="disabled"
        style="background-color: white"
      >
        <div class="full-width flex flex-center flex-justify-between">
          <el-form-item label="合同名称" class="flex-child-average">
            <el-input v-model="form.title" />
          </el-form-item>
          <el-form-item label="合同类别" class="flex-child-average">
            <div class="full-width">
              <avue-input-tree
                v-model="form.type"
                class="full-width"
                placeholder="请选择合同类型"
                :dic="typeDic"
              ></avue-input-tree>
            </div>
          </el-form-item>
        </div>
        <div class="full-width flex flex-center flex-justify-between">
          <el-form-item label="合同编号" class="flex-child-average">
            <el-input v-model="form.number" />
          </el-form-item>
          <el-form-item label="合同金额" class="flex-child-average">
            <el-input v-model="form.amount" />
          </el-form-item>
        </div>
        <div class="full-width flex flex-center flex-justify-between">
          <el-form-item label="合同甲方" class="flex-child-average">
            <el-input v-model="form.partyA" />
          </el-form-item>
          <el-form-item label="合同乙方" class="flex-child-average">
            <el-input v-model="form.partyB" />
          </el-form-item>
        </div>
        <div class="full-width flex flex-center flex-justify-between">
          <el-form-item label="签订日期" class="flex-child-average">
            <el-date-picker
              v-model="form.signTime"
              type="date"
              style="width: 100%"
              placeholder="合同签订日期"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
          <el-form-item label="到期日期" class="flex-child-average">
            <el-date-picker
              v-model="form.expireTime"
              type="date"
              style="width: 100%"
              placeholder="合同到期日期"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
        </div>
        <div class="full-width flex flex-center flex-justify-between">
          <el-form-item label="签订地点" class="flex-child-average">
            <el-input v-model="form.signLocation" />
          </el-form-item>
          <el-form-item label="合同状态" class="flex-child-average">
            <div class="full-width">
              <avue-input-tree
                v-model="form.contractsStatus"
                class="full-width"
                placeholder="请选择合同状态"
                :dic="stuasDic"
              ></avue-input-tree>
            </div>
          </el-form-item>
        </div>
        <div class="full-width flex flex-center flex-justify-between">
          <el-form-item label="支付方式" class="flex-child-average">
            <el-input v-model="form.paymentMode" type="textarea" :rows="5" />
          </el-form-item>
        </div>
      </el-form>
    </div>
    <el-image-viewer
      v-if="showImage"
      :url-list="preList"
      @close="showImage = false"
    />
  </div>
</template>

<script>
import api from '@/api/index.js'

export default {
  name: 'info',
  props: {
    info: {
      type: Object,
      default: null
    }
  },
  watch: {
    info: {
      handler(val) {
        if (val) {
          this.form = val
          if (this.form.contractsStatus === -1) {
            this.form.contractsStatus = ''
          }
          if (this.form.type === -1) {
            this.form.type = ''
          }
        }
      },
      immediate: true
    },
    disabled: {
      handler(val) {
        if (val) {
          this.conUpdate()
        }
      },
      immediate: false
    }
  },
  data() {
    return {
      showImage: false,
      preList: [],
      disabled: true,
      typeDic: [],
      stuasDic: [],
      form: {
        title: '',
        partyA: '',
        partyB: '',
        signTime: '',
        expireTime: '',
        signLocation: '',
        status: '',
        type: '',
        amount: '',
        paymentMode: '',
        number: '',
        id: ''
      }
    }
  },
  created() {
    this.form.id = this.$route.query.id
    this.getDic('contract-status')
    this.getDic('contract-type')
  },
  methods: {
    getDic(code) {
      this.$api.common.dicList({ code }).then(res => {
        if (res.code === 200) {
          if (code === 'contract-status') {
            this.stuasDic = res.data.map(item => this.mapTree(item))
          } else if (code === 'contract-type') {
            this.typeDic = res.data.map(item => this.mapTree(item))
          }
        }
      })
    },
    mapTree(item) {
      const haveChildren =
        Array.isArray(item.children) && item.children.length > 0
      return {
        value: Number.parseInt(item.dictKey),
        label: item.dictValue,
        children: haveChildren ? item.children.map(i => this.mapTree(i)) : []
      }
    },
    conUpdate() {
      const data1 = new Date(this.form.signTime).getDate()
      const data2 = new Date(this.form.expireTime).getDate()
      if (data1 > data2) {
        this.$message.error('合同签订日期不能大于合同到期日期！')
        this.disabled = false
        return
      }
      this.$api.contract.contractUpdate(this.form).then(res => {
        if (res.code === 200) {
          this.$message.success(res.msg)
        } else {
          this.disabled = false
          this.$message.error(res.msg)
        }
      })
    },
    /**
     * 以图片形式查看文件
     */
    libraryDetail() {
      if (api.offices.includes(this.form.fileFolder.suffix)) {
        this.$api.project
          .articleDetailByFile(this.form.fileFolder.fileId)
          .then(res => {
            if (res.code === 200) {
              this.preList = res.data.imgs.map(e => e.filePath)
              this.showImage = true
            }
          })
      } else {
        this.preList = [this.form.fileFolder.url]
        this.showImage = true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.top {
  height: 35px;
  border-radius: var(--el-card-border-radius);
  background-color: #f5f5f3;
}
</style>