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

<template>
  <div>
    <div class="padding top flex flex-center flex-justify-between">
      <span>台账信息</span>
    </div>
    <div class="ml-20 mr-20 mt-20">
      <avue-crud
        :option="option"
        :data="data"
        ref="crud"
        v-model="form"
        :before-open="beforeOpen"
        @row-del="rowDel"
        @row-save="handleRowSave"
        @row-update="rowUpdate"
        @on-load="onLoad"
      >
        <template #fileIds-form="{ row, type }">
          <div v-if="type === 'view'">
            <div
              v-for="i in form.accountInformationFileList"
              :key="i.id"
              class="pointer"
              @click="previewFile(i)"
            >
              {{ i.title }}
              <el-button text type="primary" plain>查看</el-button>
            </div>
          </div>
          <div v-if="type === 'edit'">
            <div
              v-if="
                form.accountInformationFileList &&
                form.accountInformationFileList.length === 0
              "
            >
              <uploads :max="9" @success="uploadSucc" :auto="true" />
              <div>
                <div v-for="item in fileList" :key="item.id">
                  {{ item.originalFileName }}
                </div>
              </div>
            </div>
            <div
              v-for="i in form.accountInformationFileList"
              :key="i.id"
              class="pointer"
              @click="removeFile(i)"
            >
              {{ i.title }}
              <el-button text type="primary" plain>删除</el-button>
            </div>
          </div>
          <div v-else>
            <uploads :max="9" @success="uploadSucc" :auto="true" />
            <div>
              <div v-for="item in fileList" :key="item.id">
                {{ item.originalFileName }}
              </div>
            </div>
          </div>
        </template>
      </avue-crud>
    </div>
    <el-image-viewer
      v-if="showImage"
      :url-list="preList"
      @close="showImage = false"
    />
  </div>
</template>

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

export default {
  name: 'info',
  components: { uploads },
  data() {
    return {
      id: '',
      showImage: false,
      preList: [],
      show: false,
      fileList: [],
      form: {},
      data: [],
      option: {
        align: 'center',
        menuAlign: 'center',
        menuWidth: 250,
        height: 480,
        size: 'mini',
        addBtn: true,
        editBtn: true,
        editBtnText: '支付凭证',
        viewBtn: true,
        delBtn: true,
        refreshBtn: false,
        columnBtn: false,
        labelWidth: 140,
        border: true,
        column: [
          {
            label: '名称',
            prop: 'name',
            rules: [
              {
                required: true,
                message: '请输入台账名称',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '款项类别',
            prop: 'dictKey',
            type: 'select',
            dicUrl: '/api/blade-system/dict-biz/dictionary?code=payment-type',
            props: {
              label: 'dictValue',
              value: 'dictKey'
            },
            rules: [
              {
                required: true,
                message: '请选择款项类别',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '支付金额',
            prop: 'payment',
            type: 'number',
            rules: [
              {
                required: true,
                message: '请输入支付金额',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '付款人',
            prop: 'payer',
            hide: true,
            rules: [
              {
                required: true,
                message: '请填写付款人',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '收款人',
            prop: 'payee',
            hide: true,
            rules: [
              {
                required: true,
                message: '请填写收款人',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '支付账户',
            prop: 'paymentAccount',
            hide: true,
            rules: [
              {
                required: true,
                message: '请填写支付账户',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '支付凭证',
            prop: 'fileIds',
            hide: true,
            formSlot: true,
            rules: [
              {
                required: true,
                message: '请上传支付凭证',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '付款时间',
            prop: 'paymentTime',
            type: 'datetime',
            valueFormat: 'YYYY-MM-DD HH:mm:ss',
            format: 'YYYY-MM-DD HH:mm:ss',
            rules: [
              {
                required: true,
                message: '请选择付款时间',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '备注',
            prop: 'remark',
            type: 'textarea',
            span: 24,
            rows: 1
          }
        ]
      }
    }
  },
  created() {
    this.id = this.$route.query.id
  },
  methods: {
    onLoad() {
      this.$api.contract.ledgerList({ contractId: this.id }).then(res => {
        if (res.code === 200) {
          this.data = res.data
        }
      })
    },
    beforeOpen(done, type) {
      if (type === 'view') {
        done()
      } else if (type === 'edit') {
        done()
      } else {
        done()
      }
    },
    previewFile(item) {
      if (api.offices.includes(item.suffix)) {
        const routeData = this.$router.resolve({
          path: '/home/file_detail',
          query: { id: item.fileId }
        })
        window.open(routeData.href, '_blank')
      } else {
        this.preList.length = 0
        this.preList.push(item.url)
        this.showImage = true
      }
    },
    removeFile(item) {
      this.$confirm('请确认是否删除该条支付凭证！', {
        type: 'warning'
      }).then(res => {
        if (res === 'confirm') {
          this.$api.contract.voucherDel({ ids: item.id }).then(res => {
            if (res.code === 200) {
              this.form.accountInformationFileList = item.filter(
                sub => sub.id !== item
              )
            }
          })
        }
      })
    },
    rowUpdate(row, index, done, loading) {
      loading()
      const data = Object.assign(row, { contractId: this.id })
      this.$api.contract.ledgerUpdate(data).then(
        res => {
          if (res.code === 200) {
            this.$message.success(res.msg)
          } else {
            this.$message.error(res.msg)
          }
          done(row)
          this.onLoad()
        },
        error => {
          window.console.log(error)
          loading()
        }
      )
    },
    handleRowSave(row, done, loading) {
      loading()
      const data = Object.assign(row, { contractId: this.id })
      this.$confirm(
        '请检查并确认所填写内容是否正确，系统将会根据填写内容，计算合同付款等相关数据！',
        {
          type: 'warning'
        }
      ).then(res => {
        if (res === 'confirm') {
          this.$api.contract.ledgerAdd(data).then(res => {
            if (res.code === 200) {
              done(row)
              this.onLoad()
            }
          })
        }
      })
    },
    rowDel(row, index, done) {
      this.$confirm('确认删除该内容？', {
        type: 'warning'
      }).then(res => {
        if (res === 'confirm') {
          this.$api.contract.remove({ ids: row.id }).then(res => {
            if (res.code === 200) {
              this.$message.success(res.msg)
              this.onLoad()
              done(row)
            } else {
              this.$message.error(res.msg)
            }
          })
        }
        console.log(res)
      })
    },
    uploadSucc(res) {
      const tmp = res.fileList.map(ele => {
        return ele.response.data
      })
      this.fileList = this.fileList.concat(tmp)
      this.form.fileIds = this.fileList.map(ele => ele.id).join(',')
    }
  }
}
</script>

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