opms_frontend/src/views/customer/components/Bid.vue

<template>
  <div>
    <!-- 新增招标记录弹窗 -->
    <el-dialog append-to-body :title="title" :visible.sync="visible" @close="close">
      <el-form ref="form" :model="form" :rules="rules">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="招标产品名称" prop="productName">
              <el-input v-model="form.productName" placeholder="请输入招标产品名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="关联客户" prop="cuctName">
              <el-input
                v-model="form.cuctName"
                :disabled="form.id != 0"
                readonly
                suffix-icon="el-icon-search"
                @focus="handleSelectCustomer" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发布日期" prop="publishedTime">
              <el-date-picker
                v-model="form.publishedTime"
                format="yyyy-MM-dd HH:mm"
                placeholder="请选择发布日期"
                style="width: 100%"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="预算" prop="budget">
              <el-input v-model.number="form.budget" clearable placeholder="请输入预算" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="招标信息标题" prop="title">
              <el-input v-model="form.title" placeholder="请输入招标信息标题" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="信息分类" prop="infoType">
              <el-select v-model="form.infoType" placeholder="请选择信息分类" style="width: 100%">
                <el-option v-for="item in bidInfoTypeOptions" :key="item.value" :label="item.value" :value="item.key" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="中标单位" prop="bidder">
              <el-input v-model="form.bidder" placeholder="请输入中标单位" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="产品线" prop="productLine">
              <el-select v-model="form.productLine" placeholder="请选择" style="width: 100%">
                <el-option v-for="item in productLineOptions" :key="item.key" :label="item.value" :value="item.key" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="创建时间" prop="biddingTime">
              <el-date-picker
                v-model="form.biddingTime"
                format="yyyy-MM-dd HH:mm"
                placeholder="请选择创建时间"
                style="width: 100%"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm" />
            </el-form-item>
            <!-- <el-input v-model="form.bidder" placeholder="请输入中标单位" /> -->
          </el-col>
        </el-row>
        <el-form-item label="备注" prop="remark">
          <el-input
            v-model="form.remark"
            maxlength="500"
            placeholder="请输入备注"
            resize="none"
            :rows="5"
            show-word-limit
            type="textarea" />
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button v-show="form.id" type="primary" @click="bidEdit">保存</el-button>
        <el-button v-show="!form.id" type="primary" @click="bidSave">保存</el-button>
        <el-button @click="visible = false">取消</el-button>
      </span>
    </el-dialog>
    <!-- 选择客户弹窗 -->
    <select-customer ref="selectCustomer" @save="selectCustomer" />
  </div>
</template>

<script>
  import to from 'await-to-js'
  import bidApi from '@/api/customer/bid'
  import SelectCustomer from '@/components/select/SelectCustomer'

  export default {
    components: { SelectCustomer },
    data() {
      return {
        title: '新增招标记录',
        visible: false,
        bidInfoTypeOptions: [],
        productLineOptions: [],
        form: {
          id: 0,
          custId: '', // 关联客户
          cuctName: '', // 客户名称
          productName: '', // 招标产品名称
          publishedTime: '', // 发布日期
          budget: 0, // 预算
          productLine: '', // 产品线
          title: '', // 招标信息标题
          infoType: '', // 信息分类
          bidder: '', // 中标单位
          biddingTime: '', //招标创建时间
          remark: '', // 备注
        },
        rules: {
          cuctName: [{ required: true, trigger: ['blur', 'change'], message: '请选择关联客户' }],
          productName: [{ required: true, trigger: ['blur', 'change'], message: '请输入招标产品名称' }],
          publishedTime: [{ required: true, trigger: ['blur', 'change'], message: '请输入发布招标日期' }],
          budget: [{ required: true, trigger: ['blur', 'change'], message: '请输入预算' }],
          productLine: [{ required: true, trigger: ['blur', 'change'], message: '请选择产品线' }],
          title: [{ required: true, trigger: ['blur', 'change'], message: '请输入招标信息标题' }],
          infoType: [{ required: true, trigger: ['blur', 'change'], message: '请输入信息分类' }],
          bidder: [{ trigger: ['blur', 'change'], message: '请输入中标单位' }],
          biddingTime: [{ required: true, trigger: ['blur', 'change'], message: '请输入创建日期' }],
        },
      }
    },
    methods: {
      async init(id) {
        this.visible = true
        this.getDicts('bid_info_type').then((response) => {
          this.bidInfoTypeOptions = response.data.values || []
        })
        this.getDicts('sys_product_line').then((response) => {
          this.productLineOptions = response.data.values || []
        })

        if (!id) {
          this.title = '新建招标信息'
          return
        }
        this.title = '编辑招标信息'
        const [err, res] = await to(bidApi.get({ id: id }))
        if (err) return
        this.form = res.data
      },
      // 选中客户
      selectCustomer(val) {
        this.form.custId = val[0].id
        this.form.cuctName = val.map((item) => item.custName).join()
      },
      // 选择客户
      handleSelectCustomer() {
        this.$refs.selectCustomer.open()
      },
      // 保存
      async bidSave() {
        this.$refs.form.validate(async (valid) => {
          if (valid) {
            let params = { ...this.form }
            this.bidInfoTypeOptions.forEach((i) => {
              if (params.infoType == i.value) {
                params.infoType = i.key
              }
            })
            const [err, res] = await to(bidApi.add(params))
            if (err) return
            this.$message.success(res.msg)
            this.visible = false
            this.$emit('bidSave')
          }
        })
      },
      async bidEdit() {
        this.$refs.form.validate(async (valid) => {
          if (valid) {
            let params = { ...this.form }
            this.bidInfoTypeOptions.forEach((i) => {
              if (params.infoType == i.value) {
                params.infoType = i.key
              }
            })
            const [err, res] = await to(bidApi.update(params))
            if (err) return
            this.$message.success(res.msg)
            this.visible = false
            this.$emit('bidSave')
          }
        })
      },
      close() {
        this.form = {
          id: 0,
          custId: '', // 关联客户
          cuctName: '', // 客户名称
          productName: '', // 招标产品名称
          publishedTime: '', // 发布日期
          budget: 0, // 预算
          productLine: '', // 产品线
          title: '', // 招标信息标题
          infoType: '', // 信息分类
          bidder: '', // 中标单位
          remark: '', // 备注
        }
        this.$refs['form'].resetFields()
      },
    },
  }
</script>

<style></style>