HM21St_Page_Manager/src/views/system_config/OrderSetting.vue

<template>
  <div class="manage-root personnel-create">
    <Header />
    <div class="manage-root-contain">
      <nav-menu
        class="manage-root-contain-left"
        :activeMenuIndex="activeMenuIndex"
      ></nav-menu>
      <div class="manage-root-contain-right">
        <breadcrumb
          :breadcrumbList="breadcrumbList"
          class="breadcrumb-box"
        ></breadcrumb>
        <div class="create-bottom">
          <div class="top-box">
            <h3>订阅价格管理</h3>
            <div class="save-btn">
              <el-button size="small" @click="onCancel">取消</el-button>
              <el-button
                type="primary"
                size="small"
                @click="onSubmit()"
                :loading="loading"
                >保存本页</el-button
              >
            </div>
          </div>
          <div class="tabs">
            <a
              :class="[typeValue === 1 ? 'active' : '']"
              @click="handleChangeTabs(1)"
              >画刊</a
            >
            <a
              :class="[typeValue === item.study_phase ? 'active' : '']"
              @click="handleChangeTabs(item.study_phase)"
              v-for="item in $studyType"
              :key="item.study_phase"
              >{{ item.study_phase_name }}</a
            >
          </div>
          <el-table
            class="search-table order-table"
            :data="tableObj[typeValue]"
            border
            style="width: 672px"
            :key="typeValue"
            v-loading="tableLoading"
            :max-height="tableHeight"
          >
            <el-table-column type="index" label="#" width="64">
            </el-table-column>
            <el-table-column prop="issue_no" label="总期数" width="152">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.issue_no"
                  placeholder="输入"
                  maxlength="20"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="comb_count" label="合刊" width="152">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.comb_count"
                  placeholder="1"
                  maxlength="20"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="shelve_date" label="发行日期" width="152">
              <template slot-scope="scope">
                <el-date-picker
                  v-model="scope.row.shelve_date"
                  prefix-icon="-"
                  type="date"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd"
                  format="yyyy-MM-dd"
                >
                </el-date-picker>
              </template>
            </el-table-column>
            <el-table-column prop="price" label="价格" width="152">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.price"
                  placeholder="输入"
                  type="number"
                  @blur="handlePrice(scope.row)"
                  maxlength="10"
                ></el-input>
              </template>
            </el-table-column>
          </el-table>
          <span class="quick-btn" @click="tableLength('-')"> 减一行 </span>
          <span class="quick-btn" @click="tableLength('1')"> 加一行 </span>
          <span class="quick-btn" @click="tableLength('10')"> 加十行 </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》from ‘《组件路径》';
import Header from "../../components/Header.vue";
import NavMenu from "../../components/NavMenu.vue";
import Breadcrumb from "../../components/Breadcrumb.vue";
import { getLogin } from "@/api/ajax";
import { cutMoneyFiter } from "@/utils/defined";
import { mapState } from "vuex";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: { Header, NavMenu, Breadcrumb },
  props: {},
  filters: {
    cutMoneyFiter,
  },
  data() {
    //这里存放数据
    return {
      activeMenuIndex: "order_setting",
      breadcrumbList: [
        {
          icon: "setting",
          url: "",
          text: "",
        },
        {
          icon: "",
          url: "",
          notLink: true,
          text: "系统配置",
        },
        {
          icon: "",
          url: "",
          text: "订阅价格管理",
        },
      ],
      loading: false,
      typeValue: 1,
      tableList: [
        {
          issue_no: "",
          comb_count: "",
          shelve_date: "",
          price: "",
        },
      ],
      tableHeight: "", // 表格高度
      tableObj: {},
      tableLoading: false,
    };
  },
  //计算属性 类似于data概念
  computed: {
    ...mapState(["$studyType", "file_preview_url"]),
  },
  //监控data中数据变化
  watch: {},
  //方法集合
  methods: {
    handleChangeTabs(value) {
      this.typeValue = value;
      this.getInfo();
    },
    // 去掉前后空格
    handleTrim(form, fild) {
      this[form][fild] = this[form][fild].trim();
    },
    // 提交表单
    onSubmit() {
      let _this = this;
      this.loading = true;
      let MethodName =
        "/OrgServer/Manager/ReservationPriceManager/SaveReservationPriceList";
      // let index = 0;

      let key = this.typeValue;
      // Object.getOwnPropertyNames(_this.tableObj).forEach(function (key) {
      // if(_this.tableObj&&_this.tableObj[key]&&_this.tableObj[key].length>0){
      let table =
        _this.tableObj[key].length > 0
          ? JSON.parse(JSON.stringify(_this.tableObj[key]))
          : [];
      table.forEach((item) => {
        item.comb_count = item.comb_count ? item.comb_count * 1 : 1;
        item.price = item.price * 1;
      });
      let data = {
        goods_type: key == 1 ? 4 : 2,
        goods_study_phase: key * 1,
        reservation_price_list: table,
      };
      getLogin(MethodName, data)
        .then((res) => {
          // this.loading = false
          if (res.status === 1) {
            // index++;
            // if (index === Object.keys(_this.tableObj).length + 1) {
            _this.$message.success("保存成功");
            _this.loading = false;
            // }
            // this.$message.success("保存成功")
          }
        })
        .catch((res) => {
          _this.loading = false;
        });
      // }
      // });
    },
    // 取消 恢复到修改前状态
    onCancel() {},
    // 得到配置信息
    getInfo() {
      if (
        this.tableObj[this.typeValue] &&
        this.tableObj[this.typeValue].length > 0
      ) {
        return;
      }
      this.tableLoading = true;
      let MethodName =
        "/OrgServer/Manager/ReservationPriceManager/GetReservationPriceList";
      getLogin(MethodName, {
        goods_type: this.typeValue === 1 ? 4 : 2,
        goods_study_phase: this.typeValue,
      })
        .then((res) => {
          this.tableLoading = false;
          if (res.status === 1) {
            this.tableList = res.reservation_price_list;
            this.tableObj[this.typeValue] = res.reservation_price_list;
            this.$forceUpdate();
          }
        })
        .catch((res) => {
          this.tableLoading = false;
        });
    },
    //计算table高度(动态设置table高度)
    getTableHeight() {
      let tableH = 370; //距离页面下方的高度
      let tableHeightDetil = window.innerHeight - tableH;
      if (tableHeightDetil <= 300) {
        this.tableHeight = 300;
      } else {
        this.tableHeight = window.innerHeight - tableH;
      }
    },
    handlePrice(item) {
      item.price = cutMoneyFiter(item.price);
    },
    tableLength(type) {
      if (type == "-") {
        if (this.tableObj[this.typeValue].length > 1) {
          this.tableObj[this.typeValue].splice(
            this.tableObj[this.typeValue].length - 1,
            1
          );
        } else {
          this.$message.warning("最少须保留一行");
        }
      } else {
        for (let i = 0; i < Number(type); i++) {
          let obj = {
            issue_no: "",
            comb_count: "",
            shelve_date: "",
            price: "",
          };
          this.tableObj[this.typeValue].push(obj);
        }
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    let timer = setInterval(() => {
      if (this.$studyType && this.$studyType.length > 0) {
        this.$studyType.forEach((item) => {
          this.tableObj[item.study_phase] = [];
        });
        this.getInfo();
        clearInterval(timer);
      }
    }, 1000);
    this.getTableHeight();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  //生命周期-创建之前
  beforeCreated() {},
  //生命周期-挂载之前
  beforeMount() {},
  //生命周期-更新之前
  beforUpdate() {},
  //生命周期-更新之后
  updated() {},
  //生命周期-销毁之前
  beforeDestory() {},
  //生命周期-销毁完成
  destoryed() {},
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {},
};
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.create-bottom {
  padding: 40px 40px;
  background: #ffffff;
  border-radius: 4px;
  height: calc(100vh - 140px);
  overflow: auto;
  .top-box {
    display: flex;
    justify-content: space-between;
  }
  h3 {
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
    margin: 0;
    color: #1d2129;
  }
  .tabs {
    display: flex;
    padding: 16px 0;
    a {
      font-size: 14px;
      line-height: 22px;
      color: #4e5969;
      border-radius: 100px;
      padding: 5px 16px;
      margin-right: 12px;
      &:hover {
        background: #f2f3f5;
      }
      &.active {
        background: #f2f3f5;
        font-weight: 500;
        color: #165dff;
      }
    }
  }
}
.order-table {
  margin-top: 0;
  .el-input {
    width: 135px;
    height: 22px;
    background: #ffffff;
  }
}
.quick-btn {
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #f4f4f4;
  width: 219px;
  height: 30px;
  text-align: center;
  margin: 16px 8px 0 0;
  display: inline-block;
  color: #000;
  font-size: 14px;
  font-weight: 400;
  line-height: 26px; /* 157.143% */
  cursor: pointer;
}
</style>

<style lang="scss">
.order-table.el-table--enable-row-hover
  .el-table__body
  tr:hover
  > td.el-table__cell {
  background-color: transparent !important;
}
.order-table {
  .cell {
    padding: 0;
  }
  .el-table__row:hover {
    background-color: transparent !important;
  }
  .el-table__cell {
    padding: 9px 10px;
  }
  .el-input__inner {
    width: 132px;
    height: 22px;
    line-height: 22px;
    padding: 0;
    background: #ffffff;
  }
}
</style>