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-button label="fifth">二次打印密码设置</el-radio-button>
      <el-radio-button label="sixth">机型类别</el-radio-button>
      <el-radio-button label="seventh">登录类型</el-radio-button>
      <el-radio-button label="eigth">权限分类</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 v-show="formType === 'fifth'">
      <div style="margin: 40px 0 30px;">
        <div>二次打印密码设置</div>
        <div>
          <el-input v-model="fifthForm.input1.dictValue" placeholder="请输入密码" size="small" style="width: 150px; margin-top: 20px;"></el-input>
        </div>
      </div>
      <el-button type="primary" size="small" @click="submitForm('fifth')">确 定</el-button>
    </div>

    <div v-show="formType === 'sixth'">
      <div style="margin: 40px 0 30px;">
        <el-button type="primary" size="mini" @click="addShowFn">新增</el-button>
        <!-- 列表 -->
        <div class="mymain-container">
          <div class="table">
            <el-table v-loading="listLoading" :data="sixthForm" element-loading-text="Loading" border fit highlight-current-row stripe>

              <el-table-column align="left" label="名称" prop="dictCode" min-width="160" show-overflow-tooltip></el-table-column>
              <el-table-column align="left" label="备注" prop="remark" min-width="170" show-overflow-tooltip></el-table-column>

              <el-table-column align="center" label="操作" prop="" min-width="160" show-overflow-tooltip fixed="right">
                <template slot-scope="scope">
                  <el-button type="text" class="textColor" @click="editFn(scope.row)">编辑</el-button>
                  <el-popconfirm @onConfirm="deleFn(scope.row.sysDictId)" v-if="$checkBtnRole('del', $route.meta.roles)" title="这是一段内容确定删除吗？">
                    <el-button type="text" class="textColor" slot="reference">删除</el-button>
                  </el-popconfirm>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>

    </div>
    <div v-show="formType === 'seventh'">
      <div style="margin: 40px 0 30px;">
        <el-button type="primary" size="mini" @click="addShowFn">新增</el-button>
        <!-- 列表 -->
        <div class="mymain-container">
          <div class="table">
            <el-table v-loading="listLoading" :data="seventhForm" element-loading-text="Loading" border fit highlight-current-row stripe>

              <el-table-column align="left" label="名称" prop="dictCode" min-width="160" show-overflow-tooltip></el-table-column>
              <el-table-column align="left" label="备注" prop="remark" min-width="170" show-overflow-tooltip></el-table-column>

              <el-table-column align="center" label="操作" prop="" min-width="160" show-overflow-tooltip fixed="right">
                <template slot-scope="scope">
                  <el-button type="text" class="textColor" @click="editFn(scope.row)">编辑</el-button>
                  <el-popconfirm @onConfirm="deleFn(scope.row.sysDictId)" v-if="$checkBtnRole('del', $route.meta.roles)" title="这是一段内容确定删除吗？">
                    <el-button type="text" class="textColor" slot="reference">删除</el-button>
                  </el-popconfirm>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>

    </div>
    <div v-show="formType === 'eigth'">
      <div style="margin: 40px 0 30px;">
        <el-button type="primary" size="mini" @click="addShowFn">新增</el-button>
        <!-- 列表 -->
        <div class="mymain-container">
          <div class="table">
            <el-table v-loading="listLoading" :data="eigthForm" element-loading-text="Loading" border fit highlight-current-row stripe>

              <el-table-column align="left" label="名称" prop="dictCode" min-width="160" show-overflow-tooltip></el-table-column>
              <el-table-column align="left" label="备注" prop="remark" min-width="170" show-overflow-tooltip></el-table-column>

              <el-table-column align="center" label="操作" prop="" min-width="160" show-overflow-tooltip fixed="right">
                <template slot-scope="scope">
                  <el-button type="text" class="textColor" @click="editFn(scope.row)">编辑</el-button>
                  <el-popconfirm @onConfirm="deleFn(scope.row.sysDictId)" v-if="$checkBtnRole('del', $route.meta.roles)" title="这是一段内容确定删除吗？">
                    <el-button type="text" class="textColor" slot="reference">删除</el-button>
                  </el-popconfirm>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>

    </div>

    <!-- //弹窗 -->
    <el-dialog :title="title" :visible.sync="dialogForm" width="30%" :show-close="false" :close-on-click-modal="false">
      <el-form size="mini" ref="addForm" :rules="rules" :model="addForm" label-width="120px">
        <el-form-item label="名称" prop="dictCode">
          <el-input v-model="addForm.dictCode"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="addForm.remark"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="cancelFn">取 消</el-button>
        <el-button size="mini" type="primary" @click="addDataFn">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getDictList,
  editDictList,
  addDictList,
  deleDictList,
} from "@/api/common";

export default {
  data() {
    return {
      listLoading: false, // 列表加载loading
      rules: {
        dictCode: [{ required: true, message: "请输入名称", trigger: "blur" }],
      },
      addForm: {
        dictCode: "",
        remark: "",
      },
      dialogForm: false,
      title: "新增",
      formType: "first",
      firstForm: {
        input1: {},
      },
      secondForm: {
        input1: {},
      },
      thirdForm: {
        input1: {},
      },
      fourthForm: {
        input1: {},
        input2: {},
        input3: {},
        input4: {},
        input5: {},
        input6: {},
      },
      fifthForm: {
        input1: {},
      },
      sixthForm: [],
      seventhForm: [],
      eigthForm: [],
    };
  },
  created() {
    this.getDetail("first");
  },
  methods: {
    //删除
    async deleFn(id) {
      await deleDictList({ id: id });
      this.$message.success("删除成功");
      this.getDetail(this.formType);
    },
    //编辑
    editFn(value) {
      this.$nextTick(() => {
        this.title = "编辑";
        this.addForm.dictCode = value.dictCode;
        this.addForm.remark = value.remark;
        this.addForm.sysDictId = value.sysDictId;
        this.addForm.dictType = value.dictType;
      });

      this.dialogForm = true;
    },
    //弹窗确定
    async addDataFn() {
      // console.log(this.addForm);

      await this.$refs.addForm.validate();

      if (this.addForm.sysDictId) {
        //编辑
        await editDictList([
          {
            ...this.addForm,
          },
        ]);
        this.$message.success("编辑成功");
      } else {
        let type = "";
        if (this.formType == "sixth") {
          type = "MACHINE_TYPE";
        } else if (this.formType == "seventh") {
          type = "SIGN_TYPE";
        } else {
          type = "POWER_CATEGORY";
        }
        await addDictList({
          ...this.addForm,
          dictValue: this.addForm.dictCode,
          dictType: type,
        });
        this.$message.success("新增成功");
      }
      this.getDetail(this.formType);

      this.addForm = {
        dictCode: "",
        remark: "",
      };
      this.dialogForm = false;
    },
    //cancelFn 弹窗取消
    async cancelFn() {
      await this.$refs.addForm.resetFields();

      this.addForm = {
        dictCode: "",
        remark: "",
      };
      this.dialogForm = false;
      // this.addForm.dictCode ='';
    },
    //展示新增弹窗
    addShowFn() {
      this.title = "新增";
      this.dialogForm = true;
    },
    // 查询按钮权限
    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",
        fifth: "PRINT_PASSWORD",
        sixth: "MACHINE_TYPE",
        seventh: "SIGN_TYPE",
        eigth: "POWER_CATEGORY",
      };
      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];
        }
        if (type == "sixth") {
          this.sixthForm = res.data;
        }
        if (type == "seventh") {
          this.seventhForm = res.data;
        }
        if (type == "eigth") {
          this.eigthForm = res.data;
        }
      });
    },

    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>