商品规格对接

.env.development

@@ -5,7 +5,7 @@ VUE_APP_TITLE =中正云教育管理后台
 ENV = 'development'
 
 # 中正云教育管理后台/开发环境
-VUE_APP_BASE_API = 'http://192.168.1.222:5030/'
+VUE_APP_BASE_API = 'http://192.168.1.7:5030/'
 # VUE_APP_BASE_API = 'http://localhost:5030/'
 VUE_APP_IMG_API = 'https://file-dev.xyyxt.net'
 

src/api/resource/good.js

@@ -0,0 +1,27 @@
+import request from '@/utils/request'
+
+// 查询模板列表
+export function getSpecList(query) {
+    return request({
+        url: '/system/template/list',
+        method: 'get',
+        params: query
+    })
+}
+
+// 新增规格模板
+export function addSpec(data) {
+    return request({
+        url: '/system/template/addSpec',
+        method: 'post',
+        data
+    })
+}
+
+// 删除规格模板
+export function delSpec(id) {
+    return request({
+        url: '/system/template/del/' + id,
+        method: 'get',
+    })
+}

src/components/tableList.vue

@@ -65,7 +65,11 @@
               </div>
             </el-checkbox-group>
           </div>
-          <el-button style="margin-left: 10px" size="medium" slot="reference"
+          <el-button
+            v-if="navText.custom !== false"
+            style="margin-left: 10px"
+            size="medium"
+            slot="reference"
             >自定义列</el-button
           >
         </el-popover>
@@ -670,8 +674,8 @@
           </span>
           <template v-else-if="item.scope === 'courseAbout'">
             <div v-for="(item, index) in scope.row[item.prop]" :key="index">
-            {{ item.courseName }}  ({{ item.aliasName }})
-          </div>
+              {{ item.courseName }} ({{ item.aliasName }})
+            </div>
           </template>
           <div v-else-if="item.scope === 'changAdress'">
             <div>地点：{{ scope.row[item.prop1] }}</div>
@@ -681,8 +685,12 @@
                 >{{ scope.row[item.prop3] }}-{{ scope.row[item.prop4] }}</span
               >
             </div>
-            <div v-if="scope.row['fromPlat'] === 2">准考证号：{{ scope.row[item.prop5] }}</div>
-            <div v-if="scope.row['fromPlat'] === 2">座位号：{{ scope.row[item.prop6] }}</div>
+            <div v-if="scope.row['fromPlat'] === 2">
+              准考证号：{{ scope.row[item.prop5] }}
+            </div>
+            <div v-if="scope.row['fromPlat'] === 2">
+              座位号：{{ scope.row[item.prop6] }}
+            </div>
             <div v-if="scope.row['fromPlat'] === 2">
               同步到考场状态：{{
                 scope.row[item.prop7] === 0
@@ -692,7 +700,7 @@
                   : scope.row[item.prop7] === 2
                   ? "失败"
                   : ""
-              }} 
+              }}
               <!-- <el-button v-if="scope.row[item.prop7] === 2" type="text">原因</el-button> -->
             </div>
           </div>

src/views/Marketing/goods/commodityManageMent/add/index.vue

@@ -590,6 +590,7 @@ export default {
         if (valid) {
           this.submitApi(int);
         } else {
+          window.scrollTo(0, 0);
           return false;
         }
       });
@@ -746,7 +747,7 @@ export default {
               auditionMinute: this.$methodsTools.secondFormDate(
                 item.auditionMinute
               ),
-              courseId: item.courseId === 0 ? '' : item.courseId,
+              courseId: item.courseId === 0 ? "" : item.courseId,
               sectionId: item.menuId,
             };
           }
@@ -768,7 +769,7 @@ export default {
           }
         } else {
           data.courseList = [];
-          data.menuList = []
+          data.menuList = [];
         }
         resolve();
       });

src/views/Marketing/goods/spec/compoent/SpecBox.vue

@@ -0,0 +1,141 @@
+<template>
+  <div class="specBox">
+    <el-form
+      :model="form"
+      inline
+      hide-required-asterisk
+      ref="ruleForm"
+      :rules="rules"
+      label-width="20px"
+    >
+      <div class="fBtn">
+        <el-button type="text">规格值排序</el-button>
+        <el-button type="text" @click="delSpec">删除规则</el-button>
+      </div>
+      <el-form-item label=" " prop="name">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+      <div class="line"></div>
+      <el-form-item
+        label=" "
+        :prop="'specAttrList.' + index + '.name'"
+        v-for="(item, index) in form.specAttrList"
+        :key="index"
+        :rules="[{ required: true, validator: checkSpecVal, trigger: 'blur' }]"
+      >
+        <el-input v-model="item.name"
+          ><el-button
+            @click="del(index)"
+            style="margin-right: -60px"
+            slot="suffix"
+            type="text"
+            >删除</el-button
+          ></el-input
+        >
+      </el-form-item>
+      <el-button @click="add" style="margin: 20px 0 0 20px" type="text"
+        >添加</el-button
+      >
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  model: {
+    prop: "obj",
+    event: "myInput",
+  },
+  props: {
+    obj: {
+      type: Array,
+      default: {},
+    },
+    num: {
+      type: Number,
+    },
+  },
+  data() {
+    var checkName = (rule, value, callback) => {
+      if (!value) {
+        callback(new Error("规格名不能为空"));
+      } else {
+        let isH = this.obj.filter((e) => e.name == value).length;
+        isH > 1 ? callback(new Error("已存在")) : callback();
+      }
+    };
+    return {
+      rules: {
+        name: [{ validator: checkName, trigger: "blur" }],
+      },
+    };
+  },
+  computed: {
+    form() {
+      return this.obj[this.num];
+    },
+  },
+  methods: {
+    add() {
+      this.form.specAttrList.push({ name: "", sort: undefined });
+    },
+    del(index) {
+      if (this.form.specAttrList.length == 1) {
+        return this.$message({
+          message: "属性值最少一条",
+          type: "warning",
+        });
+      }
+      this.form.specAttrList.splice(index, 1);
+    },
+    delSpec() {
+      this.obj.splice(this.num, 1);
+    },
+    checkSpecVal(rule, value, callback) {
+      if (!value) {
+        callback(new Error("规格值不能为空"));
+      } else {
+        let isH = this.form.specAttrList.filter((e) => e.name == value).length;
+        isH > 1 ? callback(new Error("已存在")) : callback();
+      }
+    },
+    submitForm() {
+      let back;
+      this.$refs["ruleForm"].validate((valid) => {
+        back = valid;
+      });
+      return back;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.specBox {
+  border: 1px solid #ccc;
+  padding-bottom: 20px;
+  margin: 20px 20px 0;
+  background: #fff;
+  position: relative;
+  .line {
+    margin-top: 20px;
+    border-top: 1px solid #ccc;
+  }
+  .fBtn {
+    position: absolute;
+    right: 30px;
+    top: 20px;
+  }
+  /deep/ {
+    .el-input {
+      margin-top: 20px;
+    }
+    .el-form-item {
+      margin-right: 60px;
+    }
+    .el-form-item__content {
+      background: #fff !important;
+    }
+  }
+}
+</style>

src/views/Marketing/goods/spec/compoent/configTable.vue

@@ -0,0 +1,136 @@
+<template>
+  <div>
+    <el-table
+      :data="tableData"
+      :span-method="objectSpanMethod"
+      border
+      style="width: 100%; margin-top: 20px"
+    >
+      <el-table-column
+        prop="id"
+        :label="item.name + ''"
+        width="180"
+        align="center"
+        v-for="(item, index) in specList"
+        :key="index"
+      >
+      </el-table-column>
+      <el-table-column prop="name" label="商品编号" align="center">
+      </el-table-column>
+      <el-table-column prop="amount1" label="商品类型" align="center">
+      </el-table-column>
+      <el-table-column prop="amount2" label="商品名称" align="center">
+      </el-table-column>
+      <el-table-column prop="amount3" label="科目" align="center">
+      </el-table-column>
+      <el-table-column prop="amount3" label="价格" align="center">
+      </el-table-column>
+      <el-table-column prop="amount3" label="商品有效期" align="center">
+      </el-table-column>
+      <el-table-column prop="amount3" label="学习服务期" align="center">
+      </el-table-column>
+      <el-table-column prop="amount3" label="可售状态" align="center">
+      </el-table-column>
+      <el-table-column prop="amount3" label="操作" align="center"
+        ><template slot-scope="scope">
+          <el-button type="text" size="small">查看</el-button>
+          <el-button type="text" size="small">编辑</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      tableData: [
+        {
+          id: "12987122",
+          name: "王小虎",
+          amount1: "234",
+          amount2: "3.2",
+          amount3: 10,
+        },
+        {
+          id: "12987123",
+          name: "王小虎",
+          amount1: "165",
+          amount2: "4.43",
+          amount3: 12,
+        },
+        {
+          id: "12987124",
+          name: "王小虎",
+          amount1: "324",
+          amount2: "1.9",
+          amount3: 9,
+        },
+        {
+          id: "12987125",
+          name: "王小虎",
+          amount1: "621",
+          amount2: "2.2",
+          amount3: 17,
+        },
+        {
+          id: "12987126",
+          name: "王小虎",
+          amount1: "539",
+          amount2: "4.1",
+          amount3: 15,
+        },
+        {
+          id: "12987126",
+          name: "王小虎",
+          amount1: "539",
+          amount2: "4.1",
+          amount3: 15,
+        },
+      ],
+      specList: [
+        { name: 1, specAttrList: [{ name: 11, name: 12 }] },
+        { name: 2, specAttrList: [{ name: 21, name: 22, name: 23 }] },
+      ],
+      specN: [[1, 2]],
+    };
+  },
+  methods: {
+    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
+      const item = this.specN[columnIndex];
+      if (item) {
+        for (let i = 0; i < item.length; i++) {
+          const ele = item[i];
+          if (rowIndex == 0 || rowIndex == ele) {
+            return {
+              rowspan: ele + 1,
+              colspan: 1,
+            };
+          }
+          if (rowIndex == ele) {
+            return {
+              rowspan: ele + 1,
+              colspan: 1,
+            };
+          }
+        }
+        // if (item.includes(rowIndex)) {
+        //   return {
+        //     rowspan: rowIndex,
+        //     colspan: 1,
+        //   };
+        // } else {
+        //   return {
+        //     rowspan: 0,
+        //     colspan: 0,
+        //   };
+        // }
+      }
+    },
+  },
+};
+</script>
+
+<style>
+</style>

src/views/Marketing/goods/spec/index.vue

@@ -0,0 +1,183 @@
+<template>
+  <div id="spec">
+    <search-box-new
+      ref="searchBox"
+      :formData="formData"
+      :formList="formList"
+      @search="search"
+      @init="init"
+    />
+    <table-list
+      :tableSets="tableSet"
+      :tableData="tableData"
+      :navText="navText"
+      :loading="loading"
+    >
+      <el-button
+        size="medium"
+        type="primary"
+        slot="customize"
+        @click="handleClick"
+        >添加商品规格模板</el-button
+      >
+      <template slot="btn" slot-scope="props">
+        <el-button type="text" @click="msgInfo(props.scope.row)"
+          >修改</el-button
+        >
+        <el-button type="text" @click="handleDel(props.scope.row)"
+          >删除</el-button
+        >
+      </template>
+    </table-list>
+    <pagination
+      :total="total"
+      :pageSize="formData.pageSize"
+      :currentPage="formData.pageNum"
+      @handleSizeChange="handleSizeChange"
+      @handleCurrentChange="handleCurrentChange"
+    />
+  </div>
+</template>
+
+<script>
+import searchBoxNew from "@/components/searchBoxNew";
+import tableList from "@/components/tableList";
+import pagination from "@/components/pagination";
+import { getSpecList, delSpec } from "@/api/resource/good";
+export default {
+  data() {
+    return {
+      loading: false,
+      //搜索
+      formList: [
+        {
+          prop: "educationTypeId",
+          placeholder: "教育类型",
+          scope: "educationType",
+        },
+        {
+          prop: "businessId",
+          placeholder: "业务层次",
+          scope: "businessLevel",
+          edu: "educationTypeId",
+        },
+        {
+          prop: "name",
+          placeholder: "关联商品模板名称",
+        },
+      ],
+      formData: {
+        pageSize: 10,
+        pageNum: 1,
+      },
+      total: 10,
+      navText: {
+        title: "商品规格列表",
+        index: 0,
+        ch: "条",
+        num: false,
+        changeWidth: "150px",
+        border: true,
+        choice: false,
+        addHide: true,
+        custom: false,
+        backFatherBtn: {
+          status: false,
+          title: "未定义",
+        },
+      },
+      // 表单
+      tableSet: [
+        {
+          label: "教育类型",
+          prop: "educationName",
+          hidden: true,
+        },
+        {
+          label: "业务层次",
+          prop: "businessName",
+          hidden: true,
+        },
+        {
+          label: "商品规格模板名称",
+          prop: "name",
+          hidden: true,
+        },
+        {
+          label: "商品规格数量",
+          prop: "specNumber",
+          hidden: true,
+        },
+      ],
+      tableData: [],
+    };
+  },
+  mounted() {
+    this.search();
+  },
+  activated() {
+    this.search();
+  },
+  methods: {
+    search(i) {
+      this.loading = true;
+      getSpecList(this.formData)
+        .then(({ rows, total }) => {
+          this.tableData = rows;
+          this.total = total;
+          this.navText.index = total;
+        })
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+    init() {
+      this.formData = {
+        pageSize: 10,
+        pageNum: 1,
+      };
+      this.search();
+    },
+    handleCurrentChange(v) {
+      this.formData.pageNum = v;
+      this.search();
+    },
+    handleSizeChange(v) {
+      this.formData.pageSize = v;
+      this.formData.pageNum = 1;
+      this.search();
+    },
+    handleClick(e) {
+      this.$router.push({
+        path: "specAdd",
+      });
+    },
+    handleDel({ specTemplateId }) {
+      this.$confirm("此操作将永久删除该规格模板, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          delSpec(specTemplateId).then((res) => {
+            this.$message({
+              type: "success",
+              message: "删除成功!",
+            });
+            this.search();
+          });
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消删除",
+          });
+        });
+    },
+  },
+  components: { searchBoxNew, tableList, pagination },
+};
+</script>
+
+<style>
+</style>

src/views/Marketing/goods/spec/specAdd.vue

@@ -0,0 +1,197 @@
+<template>
+  <div id="specAdd">
+    <el-form
+      :model="ruleForm"
+      :rules="rules"
+      ref="ruleForm"
+      label-width="170px"
+      hide-required-asterisk
+    >
+      <el-form-item label="使用的业务层次" required>
+        <div style="display: flex">
+          <el-form-item prop="educationTypeId">
+            <el-select
+              style="margin-right: 24px"
+              v-model="ruleForm.educationTypeId"
+              placeholder="请选择教育类型"
+              :disabled="!!stId"
+              @change="changeEduType"
+            >
+              <el-option
+                v-for="(item, index) in eduTypeOptions"
+                :key="index"
+                :label="item.educationName"
+                :value="item.id"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+
+          <el-form-item prop="businessId">
+            <el-select
+              :disabled="!!stId"
+              v-model="ruleForm.businessId"
+              placeholder="请选择业务层次"
+            >
+              <el-option
+                v-for="(item, index) in newCourTypeOptions"
+                :key="index"
+                :label="item.projectName + '-' + item.businessName"
+                :value="item.id"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </div>
+      </el-form-item>
+      <el-form-item label="名称" prop="name">
+        <el-input v-model="ruleForm.name"></el-input>
+      </el-form-item>
+      <template v-if="!stId">
+        <el-form-item label="商品规格" class="eee" prop="specList">
+          <Spec-box
+            ref="specBox"
+            v-for="(item, index) in ruleForm.specList"
+            :key="index"
+            v-model="ruleForm.specList"
+            :num="index"
+          >
+          </Spec-box>
+          <el-button
+            size="mini"
+            style="margin: 20px"
+            type="primary"
+            icon="el-icon-plus"
+            @click="addSpec"
+            >添加规则</el-button
+          >
+        </el-form-item>
+        <el-form-item label=" " style="margin-top: 40px">
+          <el-button type="primary" @click="submitForm">下一步</el-button>
+        </el-form-item></template
+      >
+      <template v-else>
+        <el-form-item label="商品配置">
+          <Config-table></Config-table>
+        </el-form-item>
+        <el-form-item label=" " style="margin-top: 40px">
+          <el-button type="primary" @click="submitForm">保存</el-button>
+        </el-form-item>
+      </template>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import SpecBox from "./compoent/SpecBox.vue";
+import ConfigTable from "./compoent/configTable.vue";
+import { addSpec } from "@/api/resource/good";
+export default {
+  data() {
+    var checkList = (rule, value, callback) => {
+      if (!this.ruleForm.specList.length) {
+        callback(new Error("请先添加规则"));
+      } else {
+        callback();
+      }
+    };
+    return {
+      ruleForm: {},
+      rules: {
+        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
+        educationTypeId: [
+          { required: true, message: "请选择教育类型", trigger: "change" },
+        ],
+        businessId: [
+          { required: true, message: "请选择业务层次", trigger: "change" },
+        ],
+        specList: [{ validator: checkList }],
+      },
+      isNext: true,
+      eduTypeOptions: [],
+      newCourTypeOptions: [],
+    };
+  },
+  methods: {
+    changeEduType() {
+      this.ruleForm.businessId = undefined;
+      this.newCourTypeOptions = [];
+      this.$api
+        .inquirebusinessList({
+          status: 1,
+          educationId: this.ruleForm.educationTypeId,
+        })
+        .then((res) => {
+          this.newCourTypeOptions = res.rows;
+        });
+    },
+    resetFrom() {
+      this.ruleForm = {
+        educationTypeId: undefined,
+        businessId: undefined,
+        specTemplateId: "123",
+        name: "",
+        specList: [],
+      };
+      this.addSpec();
+    },
+    addSpec() {
+      this.ruleForm.specList.push({
+        name: "",
+        specAttrList: [{ name: "", sort: undefined }],
+      });
+    },
+    submitForm() {
+      this.checkSpecBox() &&
+        addSpec(this.ruleForm).then((res) => {
+          this.ruleForm.specTemplateId = res.data.specTemplateId;
+        });
+    },
+    checkSpecBox() {
+      let boxs = [this, ...this.$refs.specBox];
+      let result = true;
+      for (const box of boxs) {
+        box.$refs["ruleForm"].validate((valid) => {
+          if (!valid) result = false;
+        });
+      }
+      return result;
+    },
+  },
+  computed: {
+    stId() {
+      return this.ruleForm.specTemplateId;
+    },
+  },
+  created() {
+    this.resetFrom();
+    this.$api.inquireCourseEducationType({ status: 1 }).then((res) => {
+      this.eduTypeOptions = res.rows;
+    });
+  },
+  components: {
+    SpecBox,
+    ConfigTable,
+  },
+};
+</script>
+
+<style  lang="scss" scoped>
+#specAdd {
+  padding-top: 30px;
+  .el-form {
+    /deep/ {
+      .el-input__inner {
+        width: 220px;
+      }
+      .eee {
+        .el-form-item__content {
+          background: #eee;
+          min-height: 60px;
+          //   padding-bottom: 10px;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/Marketing/goods/spec/specEdit.vue

@@ -0,0 +1,10 @@
+<template>
+  <div>edit</div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style>
+</style>