wt_project_web_bak/src/views/contract/index.vue

<template>
  <el-card shadow="hover">
    <el-form v-model="params" class="full-width" label-width="120px">
      <div class="flex flex-center">
        <div class="flex flex-center mt-15 mr-10">
          <el-form-item label="关键字" class="full-width">
            <el-input
              v-model="params.name"
              placeholder="输入合同关键字"
              prefix-icon="Search"
              clearable
            />
          </el-form-item>
          <el-form-item label="业务联系人" class="full-width">
            <el-input
              v-model="params.contacts"
              placeholder="输入业务联系人"
              prefix-icon="Search"
              clearable
            />
          </el-form-item>
          <el-form-item class="full-width" label="合同状态">
            <el-select v-model="params.status" clearable>
              <el-option
                v-for="item in dicList"
                :key="item.dictKey"
                :label="item.dictValue"
                :value="item.dictKey"
              />
            </el-select>
          </el-form-item>
        </div>
        <div class="flex flex-justify-end ml-20">
          <base-button type="0" title="重置" icon="Refresh" @click="clearUp" />
          <base-button class="ml-20" @click="onLoad" />
        </div>
      </div>
    </el-form>
    <avue-crud
      :option="option"
      :data="data"
      ref="crud"
      v-model="form"
      v-model:page="page"
      :before-open="beforeOpen"
      @row-del="rowDel"
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
    >
      <template #title="{ row }">
        <div>{{ row.fileFolder.title }}</div>
      </template>
      <template #menu-left>
        <div class="flex flex-center">
          <div class="main-color ml-10 mr-20 bold font-15">金额单位：万元</div>
          <filepicker
            btn-text="新增合同"
            :project-id="projectId"
            @submit="selection"
          />
        </div>
      </template>
    </avue-crud>
  </el-card>
</template>

<route>
{
name: '合同管理',
meta: { layout: 'empty','path':'/resource','title':'资料管理','showMsg' :
"请先通过资料管理，在对应的相关合同类别下上传合同文件，系统将自动识别所有相关文件并展示在以下列表中。"}
}
</route>
<script>
import BaseButton from '@/components/base-button.vue'
import filepicker from '@/components/filepicker/index.vue'

export default {
  components: { BaseButton, filepicker },
  data() {
    return {
      projectId: '',
      form: {},
      data: [],
      option: {
        align: 'center',
        menuAlign: 'center',
        menuWidth: 100,
        size: 'mini',
        addBtn: false,
        editBtn: false,
        viewBtn: true,
        delBtn: true,
        columnBtn: false,
        labelWidth: 140,
        border: true,
        column: [
          {
            label: '合同名称',
            prop: 'title',
            slot: true,
            width: 180,
            fixed: true
          },
          {
            label: '合同编号',
            prop: 'number'
          },
          {
            label: '合同金额',
            prop: 'amount'
          },
          {
            label: '已付金额',
            prop: 'paymentAmount'
          },
          {
            label: '未付金额',
            prop: 'notPaymentAmount'
          },
          {
            label: '业务联系人',
            prop: 'contacts',
            width: 100
          },
          {
            label: '签订乙方',
            prop: 'partyB',
            width: 180
          },
          {
            label: '签订日期',
            prop: 'signTime',
            width: 110
          },
          {
            label: '合同状态',
            prop: 'contractsStatus',
            width: 90,
            dicUrl:
              '/api/blade-system/dict-biz/dictionary?code=contract-status',
            props: {
              label: 'dictValue',
              value: 'dictKey'
            }
          },
          {
            label: '到期日期',
            prop: 'expireTime',
            width: 110
          }
        ]
      },
      page: {
        size: 10,
        current: 1
      },
      dicList: [],
      typelist: [],
      params: {
        name: '',
        status: '',
        type: ''
      }
    }
  },
  created() {
    this.projectId = this.$route.query.id
    this.getDic('contract-status')
    this.getDic('contract-type')
    this.onLoad()
  },
  methods: {
    getDic(code) {
      this.$api.common.dicList({ code }).then(res => {
        if (res.code === 200) {
          if (code === 'contract-status') {
            this.dicList = res.data
          } else if (code === 'contract-type') {
            this.typelist = res.data
          }
        }
      })
    },
    onLoad() {
      this.loading = true
      const data = Object.assign(this.params, { projectId: this.projectId })
      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
        })
    },
    clearUp() {
      this.params.name = ''
      this.params.status = ''
      this.params.type = ''
      this.onLoad()
    },
    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,
          title: ele.title
        }
      })
      this.$api.contract.linkContract(tmps).then(res => {
        if (res.code === 200) {
          this.refreshChange()
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>