supply-front/src/views/setting/other.vue

<template>
  <div class="app-container">
    <el-radio-group v-model="formType" size="small" @change="changeType">
      <el-radio-button label="first">订单日期设置</el-radio-button>
      <el-radio-button label="second">工程登录二次引用设置</el-radio-button>
      <el-radio-button label="third">自动预留单生成</el-radio-button>
      <el-radio-button label="fourth">库存显示规则设置</el-radio-button>
    </el-radio-group>

    <div v-show="formType === 'first'">
      <div style="margin: 40px 0 30px;">
        <span>下单时间超过当天</span>
        <el-time-picker v-model="firstForm.input1.dictValue" placeholder="选择时间点" size="small" format="HH:mm" style="width: 150px; margin: 0 10px;"></el-time-picker>
        <span>的订单，订单日期计为下一天的日期</span>
      </div>
      <el-button type="primary" size="small" @click="submitForm('first')">确 定</el-button>
    </div>

    <div v-show="formType === 'second'">
      <div style="margin: 40px 0 30px;">
        <div>工程登录二次引用密码设置</div>
        <div><el-input v-model="secondForm.input1.dictValue" placeholder="请输入密码" size="small" style="width: 150px; margin-top: 20px;"></el-input></div>
      </div>
      <el-button type="primary" size="small" @click="submitForm('second')">确 定</el-button>
    </div>

    <div v-show="formType === 'third'">
      <div style="margin: 40px 0 30px;">
        <div>预留单自动生成时间，从订单审单后，第</div>
        <el-input v-model="thirdForm.input1.dictValue" type="number" size="small" style="width: 150px; margin-top: 20px; margin-right: 10px"></el-input>
        <span>天零时起，按商家提交订单时间顺序，自动生成预留单</span>
      </div>
      <el-button type="primary" size="small" @click="submitForm('third')">确 定</el-button>
    </div>

    <div v-show="formType === 'fourth'">
      <div style="margin: 40px 0 30px;">
        <div>总可发货数 = 总库存数-总预留数-总发货申请暂扣</div>
        <div style="margin-top: 20px">订单查询库存时：</div>
        <div style="margin-top: 10px">总可发货数为0，显示无货</div>
        <div style="margin-top: 10px">
          <span>总可发货数</span>
          <el-input v-model="fourthForm.input1.dictValue" type="number" size="small" style="width: 100px; margin: 0 10px;"></el-input>
          <span>到</span>
          <el-input v-model="fourthForm.input2.dictValue" type="number" size="small" style="width: 100px; margin: 0 10px;"></el-input>
          <span>，总库存显示具体数量</span>
        </div>
        <div style="margin-top: 10px">
          <span>总可发货数</span>
          <el-input v-model="fourthForm.input3.dictValue" type="number" size="small" style="width: 100px; margin: 0 10px;"></el-input>
          <span>到</span>
          <el-input v-model="fourthForm.input4.dictValue" type="number" size="small" style="width: 100px; margin: 0 10px;"></el-input>
          <span>，总库存显示有货</span>
        </div>
        <div style="margin-top: 10px">
          <span>总可发货数大于</span>
          <el-input v-model="fourthForm.input5.dictValue" type="number" size="small" style="width: 100px; margin: 0 10px;"></el-input>
          <span>，总库存显示充足</span>
        </div>
        <div style="margin-top: 30px">发货申请查询库存时：</div>
        <div style="margin-top: 10px">
          <span>可发货数大于</span>
          <el-input v-model="fourthForm.input6.dictValue" type="number" size="small" style="width: 100px; margin: 0 10px;"></el-input>
          <span>显示充足</span>
        </div>
      </div>
      <el-button type="primary" size="small" @click="submitForm('fourth')">确 定</el-button>
    </div>
  </div>
</template>

<script>
import { getDictList, editDictList } from '@/api/common'

export default {
  data() {
    return {
      formType: 'first',
      firstForm: {
        input1: {},
      },
      secondForm: {
        input1: {},
      },
      thirdForm: {
        input1: {},
      },
      fourthForm: {
        input1: {},
        input2: {},
        input3: {},
        input4: {},
        input5: {},
        input6: {},
      }
    }
  },
  created() {
    this.getDetail('first');
  },
  methods: {
    // 查询按钮权限
    checkBtnRole(value) {
      // let btnRole = this.$route.meta.roles;
      // if(!btnRole) {return true}
      // let index = btnRole.indexOf(value);
      // return index >= 0 ? true : false;
      return true;
    },

    changeType(val) {
      this.getDetail(val);
    },

    getDetail(type) {
      const MAP = {
        first :'ORDER_TIME_LIMIT',
        second :'ENGIN_TWO_PWD',
        third :'RESERVED_DAY',
        fourth :'STOCK_ORDER',
      };
      getDictList({sysDictEnum: MAP[type]}).then(res => {
        let data = res.data.map(item => {
          return {
            sysDictId: item.sysDictId,
            dictValue: item.dictValue,
          }
        })
        if(type != 'fourth') {
          this[type+'Form'].input1 = data[0];
        }else {
          this[type+'Form'].input1 = data[0];
          this[type+'Form'].input2 = data[1];
          this[type+'Form'].input3 = data[2];
          this[type+'Form'].input4 = data[3];
          this[type+'Form'].input5 = data[4];
          this[type+'Form'].input6 = data[5];
        }
      })
    },

    submitForm(type) {
      let list = [];
      for(var key in this[type+'Form']) {
        console.log(this[type+'Form'], this[type+'Form'][key].dictValue);
        if(!this[type+'Form'][key].dictValue) {
          return this.$errorMsg('请完善信息');
        }
        list.push(this[type+'Form'][key]);
      }
      editDictList(list).then(res => {
        this.$successMsg('保存成功');
        this.getDetail(type);
      })
    }

  }
}
</script>

<style scoped lang="scss">
  .app-container {
    color: #333333;
    font-size: 14px;
  }
</style>
<style>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 80px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 100%;
  }
</style>