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>
      </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.status"
                  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>
  </div>
</template>

<script>
export default {
  name: 'info',
  props: {
    info: {
      type: Object,
      default: null
    }
  },
  watch: {
    info: {
      handler(val) {
        if (val) {
          this.form = val

        }
      },
      immediate: true
    },
    disabled: {
      handler(val) {
        if (val) {
          this.conUpdate()
        }
      },
      immediate: false
    }
  },
  data() {
    return {
      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 {
        key: item.dictKey,
        value: item.dictKey,
        label: item.dictKey,
        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)
        }
      })
    },
  }
}
</script>

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