cysci-website/src/views/adminCenter/policy/create.vue

<template>
  <div id="detail">
    <el-row>
      <el-col :span="24" class="main">
        <el-col :span="24" class="one">
          <el-col :span="24" class="top">
            <el-button type="primary" size="mini" @click="back">返回</el-button>
          </el-col>
          <el-col :span="24" class="down">
            <el-form :model="form" ref="form" label-width="100px">
              <el-col :span="12" class="text">
                <el-form-item label="创新券类型" prop="type">
                  <el-select v-model="form.type" placeholder="">
                    <el-option v-for="(item, index) in typeList" :key="index" :label="item" :value="item"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12" class="text">
                <el-form-item label="创新券名称" prop="name">
                  <el-input v-model="form.name"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" class="text">
                <el-form-item label="折扣类型" prop="discount_type">
                  <el-select v-model="form.discount_type" placeholder="">
                    <el-option v-for="(item, index) in discounttypeList" :key="index" :label="item" :value="item"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12" class="text">
                <el-form-item label="适用服务类型" prop="use_type">
                  <el-select v-model="form.use_type" placeholder="">
                    <el-option v-for="(item, index) in usetypeList" :key="index" :label="item" :value="item"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12" class="text">
                <el-form-item label="所属分类" prop="classify">
                  <el-select v-model="form.classify" placeholder="">
                    <el-option v-for="(item, index) in classifyList" :key="index" :label="item" :value="item"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12" class="text">
                <el-form-item label="期限" prop="limit_time">
                  <el-input v-model="form.limit_time" style="width: 94%"></el-input>
                  <span style="padding: 0 5px">个月</span>
                </el-form-item>
              </el-col>
              <el-col :span="12" class="text">
                <el-form-item label="抵扣比例" prop="scale">
                  <el-input v-model="form.scale" style="width: 96%"></el-input>
                  <span style="padding: 0 5px">%</span>
                </el-form-item>
              </el-col>
              <el-col :span="12" class="text">
                <el-form-item label="面额" prop="allowance">
                  <el-input v-model="form.allowance" style="width: 96%"></el-input>
                  <span style="padding: 0 5px">元</span>
                </el-form-item>
              </el-col>
              <el-col :span="12" class="text">
                <el-form-item label="券总额度" prop="total_allowance">
                  <el-input v-model="form.total_allowance" style="width: 96%"></el-input>
                  <span style="padding: 0 5px">元</span>
                </el-form-item>
              </el-col>
              <el-col :span="12" class="text">
                <el-form-item label="单个企业/团队最大额度" prop="unit_allowance" label-width="200px">
                  <el-input v-model="form.unit_allowance" style="width: 96%"></el-input>
                  <span style="padding: 0 5px">元</span>
                </el-form-item>
              </el-col>
              <el-col :span="24" class="text">
                <el-form-item label="描述" prop="desc">
                  <el-input v-model="form.desc" type="textarea" maxlength="300" :autosize="{ minRows: 4, maxRows: 6 }" show-word-limit></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24" class="formBtn">
                <el-button type="danger" size="mini" @click="back">取消添加</el-button>
                <el-button type="primary" size="mini" @click="onSubmit('form')">提交保存</el-button>
              </el-col>
            </el-form>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
const _ = require('lodash');
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: policy } = createNamespacedHelpers('policy');
export default {
  name: 'detail',
  props: {},
  components: {},
  data: function () {
    return {
      form: {},
      // 创新券类型
      typeList: ['研发补贴', '奖励兑现', '创新券'],
      // 折扣类型
      discounttypeList: ['全额折扣券', '折扣券', '定额券'],
      usetypeList: ['服务类型1', '服务类型2', '服务类型3'],
      classifyList: ['分类1', '分类2', '分类3'],
    };
  },
  created() {
    console.log(this.user);
    if (this.id) this.search();
  },
  methods: {
    ...policy(['fetch', 'create', 'update']),
    async search() {
      const res = await this.fetch(this.id);
      if (this.$checkRes(res)) {
        this.$set(this, `form`, res.data);
      }
    },
    onSubmit(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let data = this.form;
          data.user_id = this.user.id;
          if (this.id) {
            let res = await this.update(data);
            if (this.$checkRes(res)) {
              this.$message({
                message: '创新券信息修改成功',
                type: 'success',
              });
              this.back();
            }
          } else {
            let res = await this.create(data);
            if (this.$checkRes(res)) {
              this.$message({
                message: '创新券信息创新成功',
                type: 'success',
              });
              this.back();
            }
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    back() {
      this.$router.push({ path: '/adminCenter/policy/list' });
    },
  },
  computed: {
    ...mapState(['user']),
    id() {
      return this.$route.query.id;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  border-radius: 10px;
  box-shadow: 0 0 5px #cccccc;
  padding: 20px;
  .top {
    text-align: right;
    margin: 0 0 10px 0;
  }
  .down {
    .text {
      border-bottom: 1px dashed #ccc;
      padding: 15px 0;
    }
    /deep/.el-form-item {
      margin: 0;
    }
    .el-select {
      width: 100%;
    }
    .formBtn {
      text-align: center;
      padding: 10px 0;
    }
  }
}
.main:hover {
  box-shadow: 0 0 5px #409eff;
}
</style>