|
|
@@ -1,136 +1,300 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
- <el-table
|
|
|
- :data="tableData"
|
|
|
- :span-method="objectSpanMethod"
|
|
|
- border
|
|
|
- style="width: 100%; margin-top: 20px"
|
|
|
+ <div class="configTable">
|
|
|
+ <table-list
|
|
|
+ :tableSets="backSet(1)"
|
|
|
+ :tableData="tableData"
|
|
|
+ :navText="backNavText(false)"
|
|
|
+ :objectSpanMethod="objectSpanMethod"
|
|
|
+ :loading="loading"
|
|
|
>
|
|
|
- <el-table-column
|
|
|
- prop="id"
|
|
|
- :label="item.name + ''"
|
|
|
- width="180"
|
|
|
- align="center"
|
|
|
- v-for="(item, index) in specList"
|
|
|
- :key="index"
|
|
|
+ <template slot="btn" slot-scope="scope">
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ size="small"
|
|
|
+ @click.once="getCourseSubject"
|
|
|
+ @click="configCourse(scope.scope.row)"
|
|
|
+ >配置课程</el-button
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </table-list>
|
|
|
+ <el-dialog title="添加" :visible.sync="dialogTableVisible" width="1200px">
|
|
|
+ <search-box-new
|
|
|
+ ref="searchBox"
|
|
|
+ :formData="formData"
|
|
|
+ :formList="formList"
|
|
|
+ @search="search"
|
|
|
+ @init="init"
|
|
|
+ />
|
|
|
+ <table-list
|
|
|
+ :tableSets="backSet(0)"
|
|
|
+ :tableData="courseData"
|
|
|
+ :navText="backNavText(true)"
|
|
|
+ :loading="loading"
|
|
|
+ :radio.sync="tableRadio"
|
|
|
>
|
|
|
- </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>
|
|
|
+ </table-list>
|
|
|
+ <pagination
|
|
|
+ :total="total"
|
|
|
+ :pageSize="formData.pageSize"
|
|
|
+ :currentPage="formData.pageNum"
|
|
|
+ @handleSizeChange="handleSizeChange"
|
|
|
+ @handleCurrentChange="handleCurrentChange"
|
|
|
+ />
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="dialogTableVisible = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="submit">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import searchBoxNew from "@/components/searchBoxNew";
|
|
|
+import tableList from "@/components/tableList";
|
|
|
+import pagination from "@/components/pagination";
|
|
|
+import { relation } from "@/api/resource/good";
|
|
|
export default {
|
|
|
+ props: ["businessId", "educationTypeId", "tableData", "specList"],
|
|
|
data() {
|
|
|
return {
|
|
|
- tableData: [
|
|
|
+ courseData: [],
|
|
|
+ dialogTableVisible: false,
|
|
|
+ formList: [
|
|
|
{
|
|
|
- id: "12987122",
|
|
|
- name: "王小虎",
|
|
|
- amount1: "234",
|
|
|
- amount2: "3.2",
|
|
|
- amount3: 10,
|
|
|
+ prop: "subjectId",
|
|
|
+ placeholder: "科目",
|
|
|
+ scope: "select",
|
|
|
+ options: [],
|
|
|
},
|
|
|
{
|
|
|
- id: "12987123",
|
|
|
- name: "王小虎",
|
|
|
- amount1: "165",
|
|
|
- amount2: "4.43",
|
|
|
- amount3: 12,
|
|
|
+ prop: "goodsType",
|
|
|
+ placeholder: "类型",
|
|
|
+ scope: "select",
|
|
|
+ options: [
|
|
|
+ { label: "视频", value: "1" },
|
|
|
+ { label: "直播", value: "6" },
|
|
|
+ { label: "题库", value: "2" },
|
|
|
+ ],
|
|
|
},
|
|
|
{
|
|
|
- id: "12987124",
|
|
|
- name: "王小虎",
|
|
|
- amount1: "324",
|
|
|
- amount2: "1.9",
|
|
|
- amount3: 9,
|
|
|
+ prop: "code",
|
|
|
+ placeholder: "商品编号",
|
|
|
},
|
|
|
+ ],
|
|
|
+ formData: {},
|
|
|
+ loading: false,
|
|
|
+ total: 0,
|
|
|
+ tableRadio: "",
|
|
|
+ activeData: {},
|
|
|
+ rowIndexArr: [],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ submit() {
|
|
|
+ if (!this.tableRadio) {
|
|
|
+ return this.$message({
|
|
|
+ message: "请选择课程",
|
|
|
+ type: "warning",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ let { specTemplateId, attrListVos, goodsId } = this.activeData;
|
|
|
+ let specAttributeIds = attrListVos.map((e) => e.key).toString();
|
|
|
+ relation(
|
|
|
{
|
|
|
- id: "12987125",
|
|
|
- name: "王小虎",
|
|
|
- amount1: "621",
|
|
|
- amount2: "2.2",
|
|
|
- amount3: 17,
|
|
|
+ specTemplateId,
|
|
|
+ specAttributeIds,
|
|
|
+ goodsId: this.tableRadio,
|
|
|
},
|
|
|
+ goodsId
|
|
|
+ ).then((res) => {
|
|
|
+ this.$message({
|
|
|
+ message: "配置成功",
|
|
|
+ type: "success",
|
|
|
+ });
|
|
|
+ let obj = this.courseData.find((e) => e.goodsId == this.tableRadio);
|
|
|
+ this.activeData = Object.assign(this.activeData, obj);
|
|
|
+ this.dialogTableVisible = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ objectSpanMethod({ rowIndex, columnIndex }) {
|
|
|
+ if (columnIndex < this.specList.length - 1) {
|
|
|
+ let index = this.rowIndexArr[columnIndex].indexOf(rowIndex);
|
|
|
+ if (index != -1) {
|
|
|
+ return {
|
|
|
+ rowspan: this.rowIndexArr[columnIndex][index + 1] - rowIndex,
|
|
|
+ colspan: 1,
|
|
|
+ };
|
|
|
+ } else {
|
|
|
+ return {
|
|
|
+ rowspan: 0,
|
|
|
+ colspan: 0,
|
|
|
+ };
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ init() {
|
|
|
+ this.formData = {
|
|
|
+ pageSize: 10,
|
|
|
+ pageNum: 1,
|
|
|
+ businessId: this.businessId,
|
|
|
+ educationTypeId: this.educationTypeId,
|
|
|
+ };
|
|
|
+ this.search();
|
|
|
+ },
|
|
|
+ getCourseSubject() {
|
|
|
+ this.$api
|
|
|
+ .inquireCourseSubject({ status: 1, businessId: this.businessId })
|
|
|
+ .then((res) => {
|
|
|
+ res.rows.map((e) => {
|
|
|
+ e.value = e.id;
|
|
|
+ e.label = e.subjectName;
|
|
|
+ });
|
|
|
+ this.formList[0].options = res.rows;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ configCourse(row) {
|
|
|
+ this.tableRadio = "";
|
|
|
+ this.activeData = row;
|
|
|
+ this.dialogTableVisible = true;
|
|
|
+ this.search();
|
|
|
+ },
|
|
|
+ handleSizeChange(v) {
|
|
|
+ this.formData.pageSize = v;
|
|
|
+ this.formData.pageNum = 1;
|
|
|
+ this.search();
|
|
|
+ },
|
|
|
+ handleCurrentChange(v) {
|
|
|
+ this.formData.pageNum = v;
|
|
|
+ this.search();
|
|
|
+ },
|
|
|
+ search() {
|
|
|
+ this.loading = true;
|
|
|
+ this.$api
|
|
|
+ .inquireGoods(this.formData)
|
|
|
+ .then((res) => {
|
|
|
+ this.courseData = res.rows;
|
|
|
+ this.total = res.total;
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ backSet(type) {
|
|
|
+ let tableSet = [
|
|
|
{
|
|
|
- id: "12987126",
|
|
|
- name: "王小虎",
|
|
|
- amount1: "539",
|
|
|
- amount2: "4.1",
|
|
|
- amount3: 15,
|
|
|
+ label: "商品编码",
|
|
|
+ prop: "code",
|
|
|
+ hidden: true,
|
|
|
},
|
|
|
{
|
|
|
- id: "12987126",
|
|
|
- name: "王小虎",
|
|
|
- amount1: "539",
|
|
|
- amount2: "4.1",
|
|
|
- amount3: 15,
|
|
|
+ label: "商品类型",
|
|
|
+ prop: "code",
|
|
|
+ hidden: true,
|
|
|
},
|
|
|
- ],
|
|
|
- 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,
|
|
|
- // };
|
|
|
- // }
|
|
|
+ {
|
|
|
+ label: "商品名称",
|
|
|
+ prop: "goodsName",
|
|
|
+ hidden: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "科目",
|
|
|
+ prop: "subjectNames",
|
|
|
+ hidden: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "商品价格",
|
|
|
+ prop: "standPrice",
|
|
|
+ hidden: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "商品有效期",
|
|
|
+ prop1: "validityStartTime",
|
|
|
+ prop2: "validityEndTime",
|
|
|
+ scope: "TimeLists",
|
|
|
+ Diszing: false,
|
|
|
+ hidden: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "学习服务期",
|
|
|
+ prop1: "serviceTimeType",
|
|
|
+ prop2: "serviceTimeNum",
|
|
|
+ prop3: "studyStartTime",
|
|
|
+ prop4: "studyEndTime",
|
|
|
+ scope: "studentServicePeriod",
|
|
|
+ hidden: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "可售状态",
|
|
|
+ prop: "goodsStatus",
|
|
|
+ hidden: true,
|
|
|
+ scope: "status",
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ if (type) {
|
|
|
+ this.specList.map((e, i) => {
|
|
|
+ tableSet.splice(i, 0, {
|
|
|
+ label: e.name + "",
|
|
|
+ prop: "value" + i,
|
|
|
+ hidden: true,
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ return tableSet;
|
|
|
+ },
|
|
|
+ backNavText(choice) {
|
|
|
+ return {
|
|
|
+ index: 0,
|
|
|
+ num: false,
|
|
|
+ border: true,
|
|
|
+ choice: false,
|
|
|
+ choiceRadio: choice,
|
|
|
+ radioKey: "goodsId",
|
|
|
+ addHide: !false,
|
|
|
+ tableHide: choice,
|
|
|
+ dontNum: true,
|
|
|
+ headShow: false,
|
|
|
+ backFatherBtn: {
|
|
|
+ status: false,
|
|
|
+ title: "未定义",
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ getRowIndex() {
|
|
|
+ for (let i = 0, len = this.specList.length; i < len - 1; i++) {
|
|
|
+ this.rowIndexArr[i] = this.backIndex(i);
|
|
|
}
|
|
|
},
|
|
|
+ backIndex(i) {
|
|
|
+ let arr = [];
|
|
|
+ let len = this.tableData.length;
|
|
|
+ this.tableData.reduce((res, current, index) => {
|
|
|
+ if (res == 0 || res != current["value" + i] || index == len - 1) {
|
|
|
+ arr.push(index == len - 1 ? index + 1 : index);
|
|
|
+ }
|
|
|
+ return current["value" + i];
|
|
|
+ }, 0);
|
|
|
+ return arr;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getRowIndex();
|
|
|
+ this.formData = {
|
|
|
+ pageSize: 10,
|
|
|
+ pageNum: 1,
|
|
|
+ businessId: this.businessId,
|
|
|
+ educationTypeId: this.educationTypeId,
|
|
|
+ };
|
|
|
},
|
|
|
+ components: { searchBoxNew, tableList, pagination },
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
+<style lang="scss" scoped>
|
|
|
+.configTable {
|
|
|
+}
|
|
|
+</style>
|
|
|
<style>
|
|
|
+.fon_s {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
</style>
|
谢杰标