jiangping
2024-12-27 5506edbe54883b31db3cc8e4a1d9d0795a18a3c9
company/src/components/business/OperaContractWindow.vue
¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,187 @@
<template>
    <GlobalWindow
        :title="title"
        :visible.sync="visible"
        :confirm-working="isWorking"
        @confirm="confirm"
    >
        <el-form :model="form" ref="form" :rules="rules">
            <el-form-item label="合同名称" prop="name">
                <el-input v-model="form.name" maxlength="50" show-word-limit placeholder="请输入合同名称" v-trim/>
            </el-form-item>
            <el-form-item label="合同对象" prop="companyType" v-if="type !== 2">
                <el-radio-group v-model="form.companyType" @change="getList">
                    <el-radio :label="0">企业</el-radio>
                    <el-radio :label="1">商户</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item :label="type !== 2 ? '企业/商户名称' : '企业名称'" prop="companyId">
                <el-select v-model="form.companyId" filterable placeholder="请选择,支持搜索">
                    <el-option
                        v-for="item in nameList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="合同时间" prop="date">
                <el-date-picker
                    v-model="form.date"
                    type="daterange"
                    @change="changeDate"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="签章方式" prop="type">
                <el-radio-group v-model="form.type">
                    <el-radio :label="0">双方签章</el-radio>
                    <el-radio :label="1">仅我方签章</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="合同附件" prop="multifile" :rules="[{required:true,message:'请上传方案确认书'}]">
                <div v-if="visible">
                    <UploadFile @remove="deleFile" :uploadData="{ folder: 'contract', fileType:'.pdf' }" :fileList="fileList" @uploadSuccess="editFanganFile" />
                </div>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
                <el-input
                    type="textarea"
                    placeholder="请输入备注"
                    v-model="form.remark"
                    maxlength="300"
                    show-word-limit
                    v-trim
                />
            </el-form-item>
        </el-form>
    </GlobalWindow>
</template>
<script>
  import BaseOpera from '@/components/base/BaseOpera'
  import GlobalWindow from '@/components/common/GlobalWindow'
  import UploadFile from '@/components/common/UploadFile'
  import { pageAll } from '@/api/business/company'
  import { mapState } from 'vuex'
  export default {
    name: 'OperaContractWindow',
    extends: BaseOpera,
    computed: {
      ...mapState(['userInfo'])
    },
    components: { GlobalWindow, UploadFile },
    data () {
      const validatorTime = (rule, value, callback) => {
        if (!this.form.startTime || !this.form.endTime) {
          return callback(new Error('请选择合同时间'))
        }
        callback()
      }
      const validatorMultifile = (rule, value, callback) => {
        if (!this.form.multifile) {
          return callback(new Error('请上传合同附件'))
        }
        callback()
      }
      return {
        // è¡¨å•数据
        form: {
          id: null,
          remark: '',
          name: '',
          companyType: 0,
          type: 0,
          startTime: '',
          endTime: '',
          date: [],
          multifile: null,
          companyId: ''
        },
        fileList: [],
        // éªŒè¯è§„则
        rules: {
          name: [
            { required: true, message: '请输入合同名称' }
          ],
          companyType: [
            { required: true, message: '请选择合同对象' }
          ],
          companyId: [
            { required: true, message: '请选择企业/商户名称' }
          ],
          date: [
            { required: true, validator: validatorTime }
          ],
          multifile: [
            { required: true, validator: validatorMultifile }
          ],
        },
        nameList: [],
        list: [],
        type: null
      }
    },
    created () {
      this.config({
        api: '/business/contract',
        'field.id': 'id'
      })
    },
    methods: {
      open (title, target, type) {
        this.title = title
        this.type = type
        this.visible = true
        if (this.userInfo.type === 0) {
          this.list = [{ label: '企业', id: 0 },{ label: '商户', id: 1 }]
        } else if (this.userInfo.type === 2) {
          this.list = [{ label: '企业', id: 0 }]
        }
        // æ–°å»º
        if (target == null) {
          this.$nextTick(() => {
            this.$refs.form.resetFields()
            this.form[this.configData['field.id']] = null
          })
          this.getList()
          return
        }
        // ç¼–辑
        this.$nextTick(() => {
          for (const key in this.form) {
            this.form[key] = target[key]
          }
        })
        this.getList()
      },
      getList() {
        this.form.companyId = ''
        pageAll({ type: this.form.companyType })
            .then(res => {
              console.log(res)
              this.nameList = res
            })
      },
      deleFile () {
        this.form.multifile = null
      },
      editFanganFile (data) {
        console.log(data)
        this.form.multifile = data
      },
      changeDate(e) {
        if (e) {
          this.form.startTime = e[0]
          this.form.endTime = e[1]
        } else {
          this.form.startTime = ''
          this.form.endTime = ''
        }
      }
    }
  }
</script>