wt_project_web_bak/src/views/project/componens/info3.vue

<template>
  <wt-card title="相关合同" class="mt-10">
    <div
      class="full-width text-right main-color pointer"
      style="margin-top: -10px"
      @click="moreContract"
    >
      查看更多>>
    </div>
    <div class="flex flex-justify-start full-width mt-15">
      <avue-crud
        :option="option"
        :data="data"
        ref="crud"
        v-model="form"
        :before-open="beforeOpen"
        @row-del="rowDel"
        @refresh-change="refreshChange"
      >
        <template #menu-left>
          <div class="flex flex-center">
            <filepicker
              v-if="form.can_update"
              btn-text="新增合同"
              :project-id="projectId"
              @submit="selection"
            />
          </div>
        </template>
      </avue-crud>
    </div>
  </wt-card>
</template>

<script>
import wtCard from '@/components/wt-card/index.vue'
import filepicker from '@/components/filepicker/index.vue'

export default {
  name: 'info3',
  components: {
    wtCard,
    filepicker
  },
  props: {
    projectId: {
      required: true,
      type: String,
      default: ''
    },
    stageId: {
      required: true,
      type: String,
      default: ''
    }
  },
  watch: {
    projectId: {
      handler(val) {
        if (val.length > 0) {
          this.onLoad()
        }
      },
      immediate: true
    },
    stageId: {
      handler(val) {
        if (val.length > 0) {
          this.onLoad()
        }
      },
      immediate: true
    }
  },
  data() {
    return {
      form: {},
      data: [],
      option: {
        align: 'center',
        menuAlign: 'center',
        menuWidth: 180,
        size: 'mini',
        addBtn: false,
        editBtn: false,
        viewBtn: true,
        delBtn: true,
        columnBtn: false,
        labelWidth: 140,
        border: true,
        column: [
          {
            label: '合同名称',
            prop: 'title',
            fixed: true
          },
          {
            label: '合同金额',
            prop: 'amount',
            width: 180
          },
          {
            label: '业务联系人',
            prop: 'contacts',
            width: 120
          },
          {
            label: '合同乙方',
            prop: 'partyB'
          }
        ]
      },
      page: {
        size: 10,
        current: 1
      }
    }
  },
  methods: {
    onLoad() {
      this.loading = true
      const data = Object.assign({
        projectId: this.projectId,
        stageId: this.stageId
      })
      this.$api.contract
        .contractList(Object.assign(this.page, data))
        .then(res => {
          this.data = res.data.records.map(ele => {
            if (ele.contractsStatus === -1) {
              ele.contractsStatus = ''
            }
            if (ele.type === -1) {
              ele.type = ''
            }
            return ele
          })
          this.page.total = res.data.total
        })
        .finally(() => {
          this.loading = false
        })
    },
    beforeOpen(done, type) {
      if (type === 'view') {
        const data = this.$router.resolve({
          path: '/contract/detail',
          query: { id: this.form.id }
        })
        window.open(data.href, '_blank')
      }
    },
    rowDel(row, index, done) {
      this.$confirm('确定将选择数据删除?', {
        type: 'warning'
      }).then(res => {
        console.log(res)
        if (res === 'confirm') {
          this.$api.contract.contractRemove({ ids: row.id }).then(res => {
            if (res.code === 200) {
              this.$message.success(res.msg)
              this.onLoad()
            } else {
              this.$message.error(res.msg)
            }
          })
        }
      })
    },
    currentChange(currentPage) {
      this.page.current = currentPage
    },
    sizeChange(pageSize) {
      this.page.size = pageSize
    },
    refreshChange() {
      this.onLoad()
    },
    selection(list) {
      const tmps = list.map(ele => {
        return {
          fileId: ele.id,
          projectId: ele.projectId,
          stageId: this.stageId,
          title: ele.title
        }
      })
      this.$api.contract.linkContract(tmps).then(res => {
        if (res.code === 200) {
          this.refreshChange()
        }
      })
    },
    moreContract() {
      this.$router.push({
        path: '/contract',
        query: { id: this.projectId }
      })
    }
  }
}
</script>

<style scoped></style>