drp-ui/src/views/business/bid/rulesDetail/detail.vue

<template>
<div>
  <el-card class="box-card" style="background-color: #f2f2f2">
    <el-form ref="form" :rules="rules" :model="form" label-width="130px">
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="编号" prop="xmNumber">
            <el-input v-model="form.xmNumber" :disabled="true" clearable>{{this.areaObj.xmNumber}}</el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="规则名称" prop="subscriptionRulesName">
            <el-input v-model="form.subscriptionRulesName">{{this.areaObj.subscriptionRulesName}}</el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="招标单位">
            <el-input v-model="form.zhaoBiaoUnit">{{this.areaObj.zhaoBiaoUnit}}</el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="发布时间">
            <el-date-picker
              v-model="infoPublishTime"
              type="datetimerange"
              value-format="yyyy-MM-dd HH:mm:ss"
              range-separator="至"
              start-placeholder="开始月份"
              end-placeholder="结束月份"
              >
            {{this.areaObj.infoPublishTime}}</el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="项目所属省份" prop="areaProvince">
            <el-select v-model="form.areaProvince"  placeholder="请选择" style="width: 100%;">
              <el-option
                v-for="item in areaProvinceOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>{{this.areaObj.areaProvince}}
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="项目所属城市" prop="areaCity">
            <el-select v-model="form.areaCity"  placeholder="请选择" style="width: 100%;">
              <el-option
                v-for="item in areaCityOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>{{this.areaObj.areaCity}}
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="公告类型">
            <el-select v-model="form.infoTypeSegment" multiple placeholder="请选择活动区域" style="width: 100%">
              <el-option
                v-for="item in noticeType"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="获取标书截止日期">
            <el-date-picker
              type="datetime"
              placeholder="选择日期"
              value-format="yyyy-MM-dd HH:mm:ss"
              v-model="form.bidingEndTime"
              style="width: 100%;" >{{this.areaObj.bidingEndTime}}</el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="投标截止日期">
            <el-date-picker
              type="datetime"
              placeholder="选择日期"
              value-format="yyyy-MM-dd HH:mm:ss"
              v-model="form.tenderEndTime"
              style="width: 100%;" >{{this.areaObj.tenderEndTime}}</el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="招标公司类型">
            <el-select v-model="form.zhaoBiaoUnitType" multiple placeholder="请选择活动区域" style="width: 100%;">
              <el-option
                v-for="item in zhaoBiaoUnitType"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="招标方式" >
            <el-select v-model="form.biddingType" multiple placeholder="请选择活动区域" style="width: 100%;">
              <el-option
                v-for="item in bidType"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="标讯关键词" prop="bidingKeyword">
            <el-input v-model="form.bidingKeyword">{{this.areaObj.bidingKeyword}}</el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="排除词">
            <el-input v-model="form.excludeWord">{{this.areaObj.excludeWord}}</el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7" >
          <el-form-item label="企业名称匹配" prop="unitNameMatch">
            <el-input v-model="form.unitNameMatch">{{this.areaObj.unitNameMatch}}</el-input>
          </el-form-item>

        </el-col>
        <el-col :span="1">
          <el-button type="primary" @click="returnPage">新增</el-button>
        </el-col>
        <el-col :span="8">
          <el-form-item label="标讯推送人" prop="subscriptionPusher">
            <el-select v-model="form.subscriptionPusher" multiple placeholder="请选择" style="width: 100%;">
              <el-option
                v-for="item in subscriptionPusher"
                :key="item.userName"
                :label="item.nickName"
                :value="item.userName">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item label="规则描述">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="form.ruleDescription">
          </el-input>
        </el-form-item>
      </el-row>
    </el-form>
    <el-row :gutter="24" type="flex" justify="end">
      <el-col :span="4">
        <el-button type="info" @click="cancel()" >取消</el-button>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" @click="submitForm" >保存</el-button>
      </el-col>
    </el-row>

  </el-card>

</div>
</template>
<script>
import {cityQuery, insert, provinceQuery, queryById, updateById,getUserList} from "@/api/business/bid/subscriptionRules";

export default {
  data() {
    return {
      userList:[],
      infoPublishTime:[],
      areaProvinceOptions:[],
      areaCityOptions:[],
      zhaoBiaoUnitType:[
        {
          value: '1',
          label: '医院'
        },
        {
          value: '2',
          label: '卫生所'
        },
      ],
      subscriptionPusher:[
        {
          value: '1',
          label: '张三'
        },
        {
          value: '2',
          label: '李四'
        },
      ],
      noticeType: [
        {
          value: '1',
          label: '采购意向'
        },
        {
          value: '2',
          label: '招投标'
        },
        {
          value: '3',
          label: '招标'
        },
        {
          value: '5',
          label: '变更公告'
        },
        {
          value: '10',
          label: '中标候选人'
        },
        {
          value: '11',
          label: '中标结果'
        },
        {
          value: '12',
          label: '合同'
        },
        {
          value: '13',
          label: '验收公告'
        },
      ],
      bidType: [
        {
          value: '0',
          label: '公开招标'
        },
        {
          value: '4',
          label: '询比价'
        },
        {
          value: '2',
          label: '竞价'
        },
        {
          value: '1',
          label: '邀请招标'
        },
        {
          value: '3',
          label: '定点采购'
        },
        {
          value: '5',
          label: '公开寻源'
        },
        {
          value: '6',
          label: '电子反拍'
        }
      ],
      infoTypeSegmentOptions:[{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      areaObj:'',
      form: {
        id:undefined,
        xmNumber:'',
        keywordMatch:'',
        subscriptionRulesName:'',
        areaCity:'',
        areaProvince:'',
        infoTypeSegment:[],
        bidingEndTime:'',
        tenderEndTime:'',
        zhaoBiaoUnitType:[],
        biddingType:[],
        bidingKeyword:'',
        excludeWord:'',
        unitNameMatch:'',
        zhaoBiaoUnit:'',
        subscriptionPusher:[],
        ruleDescription:'',
        stateFlag:'',
        infoPublishStartTime:'',
        infoPublishEndTime:'',
      },
      rules: {
        subscriptionRulesName: [
          { required: true, message: '请输入规则名称', trigger: 'blur' }
        ],
        areaCity: [
          { required: true, message: '请选择项目所属城市', trigger: 'change' }
        ],
        bidingKeyword: [
          { required: true, message: '请选择标讯关键词', trigger: 'blur' }
        ],
        unitNameMatch: [
          { required: true, message: '请选择企业名称', trigger: 'change' }
        ],
        areaProvince: [
          { required: true, message: '请选择项目所属省份', trigger: 'change' }
        ],
        subscriptionPusher: [
          { required: true, message: '请选择标讯推送人', trigger: 'change' }
        ],
      }
    }
  },
  created() {
    //如果路由参数存在
    if (this.$route.query.id) {
      this.areaObj = this.$route.query.id
      this.getDetail(this.areaObj)
    }
    this.getRuleCity()
    this.getRuleProvince()
    this.getUser()
  },
  methods: {
    getUser(){
      getUserList().then(res =>{
        this.subscriptionPusher=res.rows
        console.log('this.user',this.subscriptionPusher)
      })
    },
    getRuleCity(){
      cityQuery().then(res =>{
        if (res.code == 200) {
          this.areaCityOptions=res.data
        }else {
          alert("获取失败")
        }
      })
    },
    getRuleProvince(){
      provinceQuery().then(res =>{
        if (res.code == 200) {
          this.areaProvinceOptions=res.data
        }else {
          alert("获取失败")
        }
      })
    },
    getDetail(id){
      queryById(id).then(res =>{
        this.form=res.data
        this.infoPublishTime=[res.data.infoPublishStartTime,res.data.infoPublishEndTime]
      })
    },
    cancel(){
      this.form = {
        id:'',
        xmNumber:'',
        keywordMatch:'',
        subscriptionRulesName:'',
        areaCity:'',
        areaProvince:'',
        infoTypeSegment:[],
        bidingEndTime:'',
        tenderEndTime:'',
        zhaoBiaoUnitType:[],
        biddingType:[],
        bidingKeyword:'',
        excludeWord:'',
        unitNameMatch:'',
        zhaoBiaoUnit:'',
        subscriptionPusher:[],
        ruleDescription:'',
        stateFlag:'',
        infoPublishStartTime:'',
        infoPublishEndTime:'',
      }
      this.$router.go(-1)
    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != undefined) {
            updateById(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.$router.go(-1)
            });
          } else {
            console.log(this.infoPublishTime)
            if (this.infoPublishTime != "" && this.infoPublishTime != null) {
              this.form.infoPublishStartTime = this.infoPublishTime[0]
              this.form.infoPublishEndTime = this.infoPublishTime[1]
            }
            insert(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
            });

          }
        }
      });
    },
  },
}
</script>
<style>

</style>