dispacth_zhongpin/src/views/finance/oilCompanyMatch/OilCompanyMatchAdd.vue

<template>
  <div>
    <el-row>
      <el-form :model="oilCompanyMatch" label-width="140px" :rules="ruleForm" ref="ruleForm" :size="$store.getters.size">
        <el-row :gutter="gridNum.row.gutter">
          <el-col :xs="gridNum.cols.xs" :sm="gridNum.cols.sm" :md="gridNum.cols.md" :lg="gridNum.cols.lg" :xl="gridNum.cols.xl">
            <el-form-item label="公司" prop="companyId">
              <el-select v-model="oilCompanyMatch.companyId" remote filterable :remote-method="parentCompanyOrginQuery" clearable placeholder="请输入" @keyup.enter.native="getByPage">
                <el-option
                  v-for="item in companyList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="gridNum.cols.xs" :sm="gridNum.cols.sm" :md="gridNum.cols.md" :lg="gridNum.cols.lg" :xl="gridNum.cols.xl">
            <el-form-item label="匹配额度" prop="matchAmount">
              <el-input v-model="oilCompanyMatch.matchAmount" type="number" clearable />
            </el-form-item>
          </el-col>
          <el-col :xs="gridNum.cols.xs" :sm="gridNum.cols.sm" :md="gridNum.cols.md" :lg="gridNum.cols.lg" :xl="gridNum.cols.xl">
            <el-form-item
              label="匹配方式"
              prop="matchMark"
            >
              <el-select v-model="oilCompanyMatch.matchMark" clearable>
                <el-option value="MATCH_DAY" label="按日匹配" />
                <!-- <el-option value="MATCH_MONTH" label="按月匹配" />
                <el-option value="MATCH_AMOUNT" label="按金额匹配" /> -->
              </el-select>
            </el-form-item>
          </el-col>
          <!-- <el-col :xs="gridNum.cols.xs" :sm="gridNum.cols.sm" :md="gridNum.cols.md" :lg="gridNum.cols.lg" :xl="gridNum.cols.xl">
            <el-form-item label="优先级，1-20" prop="matchPriority">
              <el-input v-model="oilCompanyMatch.matchPriority" type="number" clearable />
            </el-form-item>
          </el-col> -->
          <el-col :xs="gridNum.cols.xs" :sm="gridNum.cols.sm" :md="gridNum.cols.md" :lg="gridNum.cols.lg" :xl="gridNum.cols.xl">
            <el-form-item label="开始时间" prop="startTime">
              <el-date-picker
                v-model="oilCompanyMatch.startTime"
                style="width:100%"
                clearable
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="开始时间"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="gridNum.cols.xs" :sm="gridNum.cols.sm" :md="gridNum.cols.md" :lg="gridNum.cols.lg" :xl="gridNum.cols.xl">
            <el-form-item label="结束时间" prop="endTime">
              <el-date-picker
                v-model="oilCompanyMatch.endTime"
                style="width:100%"
                clearable
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetime"
                placeholder="结束时间"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="gridNum.cols.xs" :sm="gridNum.cols.sm" :md="gridNum.cols.md" :lg="gridNum.cols.lg" :xl="gridNum.cols.xl">
            <el-form-item
              label="结束标识"
              prop="overMark"
            >
              <el-select v-model="oilCompanyMatch.overMark" clearable>
                <el-option value="0" label="匹配开始" />
                <el-option value="2" label="匹配停止" />
                <el-option value="1" label="匹配完成" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="gridNum.cols.xs" :sm="gridNum.cols.sm" :md="gridNum.cols.md" :lg="gridNum.cols.lg" :xl="gridNum.cols.xl">
            <el-form-item label="启用标识" prop="enableMark">
              <el-switch
                v-model="oilCompanyMatch.enableMark"
                :active-value="1"
                :inactive-value="0"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注说明" prop="remark">
              <el-input
                v-model="oilCompanyMatch.remark"
                type="textarea"
                :rows="3"
                placeholder="请输入内容"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-col :span="24" style="text-align: right">
          <el-button @click="close">取消</el-button>
          <el-button
            type="primary"
            @click="submit"
          >提交</el-button>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>
<script>
import oilCompanyMatchApi from '@/api/finance/oilCompanyMatch'
import oilCompanyInfoApi from '@/api/user/oilCompanyInfo'
export default {
  data() {
    return {
      gridNum: {
        row: {
          gutter: 2
        },
        cols: {
          xs: 24,
          sm: 24,
          md: 12,
          lg: 12,
          xl: 6
        }
      },
      ruleForm: {
        companyId: [
          { required: true, message: '匹配公司不能为空', trigger: 'change' }
        ],
        matchAmount: [
          { required: true, message: '匹配额度不能为空', trigger: 'change' }
        ],
        matchMark: [
          { required: true, message: '匹配方式不能为空', trigger: 'change' }
        ],
        // matchPriority: [
        //   { required: true, message: '优先级不能为空', trigger: 'change' }
        // ],
        startTime: [
          { required: true, message: '开始时间不能为空', trigger: 'change' }
        ],
        endTime: [
          { required: true, message: '结束时间不能为空', trigger: 'change' }
        ],
        overMark: [
          { required: true, message: '结束标识不能为空', trigger: 'change' }
        ],
        enableMark: [
          { required: true, message: '启用标识不能为空', trigger: 'change' }
        ]
      },
      oilCompanyMatch: {
        enableMark: 1,
        matchPriority: 1,
        createSource: 'XOIL_OMS_WEB'
      },
      companyList: [] // 企业列表
    }
  },
  created() {
  },
  methods: {
    parentCompanyOrginQuery(value) { // 远程搜索企业
      if (value) {
        oilCompanyInfoApi.getLikeByNameSuccess({ 'name': value }).then(res => {
          this.companyList = res.data
        })
      }
    },
    submit() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          this.save(this.oilCompanyMatch)
        }
      })
    },
    save() {
      // 保存
      oilCompanyMatchApi.save(this.oilCompanyMatch).then(res => {
        this.$message.success(res.msg)
        this.oilCompanyMatch = {}
        this.oilCompanyMatch.enableMark = 1
        this.oilCompanyMatch.matchPriority = 1,
        this.oilCompanyMatch.createSource = 'XOIL_OMS_WEB'
        this.$emit('closeDialog')
        this.$emit('getByPage')
      })
    },
    close() {
      this.$emit('closeDialog')
    }
  }
}
</script>