|
@@ -0,0 +1,493 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <el-dialog
|
|
|
+ @closed="close"
|
|
|
+ :visible.sync="isMatchingDialog"
|
|
|
+ width="830px"
|
|
|
+ :show-close="false"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ >
|
|
|
+ <div slot="title" class="hearders">
|
|
|
+ <div class="leftTitle">匹配</div>
|
|
|
+ <div class="rightBoxs">
|
|
|
+ <img
|
|
|
+ src="@/assets/images/Close@2x.png"
|
|
|
+ alt=""
|
|
|
+ @click="isMatchingDialog = false"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div>
|
|
|
+ 教育类型:{{ queryData.educationName }}
|
|
|
+ <span style="margin: 0 25px;">业务层次:{{queryData.projectName + ' - ' + queryData.businessName }} </span>
|
|
|
+ 班级类型:{{
|
|
|
+ queryData.gradeType === 1
|
|
|
+ ? "基础班"
|
|
|
+ : queryData.gradeType === 2
|
|
|
+ ? "强化班"
|
|
|
+ : "私塾班"
|
|
|
+ }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ style="width: 100%; margin-top: 16px; height: 500px; overflow-y: auto"
|
|
|
+ >
|
|
|
+ <el-table
|
|
|
+ border
|
|
|
+ :data="tableData"
|
|
|
+ :header-cell-style="{ 'text-align': 'center' }"
|
|
|
+ :cell-style="{ 'text-align': 'center' }"
|
|
|
+ v-loading="loading"
|
|
|
+ >
|
|
|
+ <el-table-column label="序号" type="index" width="50">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ v-for="(item, index) in tableSet"
|
|
|
+ :key="index"
|
|
|
+ :prop="item.prop"
|
|
|
+ :label="item.label"
|
|
|
+ :width="item.width"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <ul v-if="item.scope === 'list'">
|
|
|
+ <li
|
|
|
+ v-for="(items, indexs) in comList(
|
|
|
+ scope.row[item.prop],
|
|
|
+ item.goodsType
|
|
|
+ )"
|
|
|
+ :key="indexs"
|
|
|
+ >
|
|
|
+ {{ items.goodsName }}
|
|
|
+ <span v-if="items.categoryName"
|
|
|
+ >({{ items.categoryName }})</span
|
|
|
+ >
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <span v-else>{{ scope.row[item.prop] }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="操作"
|
|
|
+ align="center"
|
|
|
+ fixed="right"
|
|
|
+ width="180px"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button type="text" @click="setOption(scope.row)"
|
|
|
+ >匹配商品</el-button
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ <el-dialog
|
|
|
+ :visible.sync="disBoxs"
|
|
|
+ width="660px"
|
|
|
+ :show-close="false"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ >
|
|
|
+ <div slot="title" class="hearders">
|
|
|
+ <div class="leftTitle">
|
|
|
+ 匹配商品
|
|
|
+ <span style="font-size: 12px; color: #333333">(可以多选)</span>
|
|
|
+ </div>
|
|
|
+ <div class="rightBoxs">
|
|
|
+ <img
|
|
|
+ src="@/assets/images/Close@2x.png"
|
|
|
+ alt=""
|
|
|
+ @click="disBoxs = false"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="margin-bottom: 10px">
|
|
|
+ <el-input
|
|
|
+ :size="size"
|
|
|
+ v-model="goodsName"
|
|
|
+ style="width: 190px"
|
|
|
+ placeholder="请输入商品名称"
|
|
|
+ ></el-input>
|
|
|
+ <el-button
|
|
|
+ :size="size"
|
|
|
+ style="margin-left: 10px"
|
|
|
+ type="primary"
|
|
|
+ @click="getSeachData(activeType)"
|
|
|
+ >查询</el-button
|
|
|
+ >
|
|
|
+ <el-button :size="size" @click="init">重置</el-button>
|
|
|
+ </div>
|
|
|
+ <el-row :gutter="10">
|
|
|
+ <el-col :span="4">
|
|
|
+ <label>{{ newData.subjectName }} </label>
|
|
|
+ <ul>
|
|
|
+ <li
|
|
|
+ v-for="(item, index) in goodsType"
|
|
|
+ :key="index"
|
|
|
+ class="liSty"
|
|
|
+ :style="activeType === item.value ? 'color:red;' : ''"
|
|
|
+ @click="searchGoods(item.value)"
|
|
|
+ >
|
|
|
+ {{ item.label }}
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="20">
|
|
|
+ <div
|
|
|
+ style="margin-top: 14px; text-align: center"
|
|
|
+ v-if="!goodsList.length"
|
|
|
+ >
|
|
|
+ 暂无符合条件商品
|
|
|
+ </div>
|
|
|
+ <el-checkbox-group v-model="checkList" v-loading="subLoading">
|
|
|
+ <ul
|
|
|
+ style="
|
|
|
+ max-height: 240px;
|
|
|
+ overflow: auto;
|
|
|
+ background: #eee;
|
|
|
+ margin-top: 10px;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <li
|
|
|
+ v-for="(item, index) in goodsList"
|
|
|
+ :key="index"
|
|
|
+ style="padding: 10px; font-size: 13px"
|
|
|
+ >
|
|
|
+ <el-checkbox :label="item.goodsId">
|
|
|
+ {{ item.year }} / {{ item.goodsName }} /
|
|
|
+ <span style="color: red">¥{{ item.standPrice }}</span>
|
|
|
+ </el-checkbox>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </el-checkbox-group>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="disBoxs = false">取 消</el-button>
|
|
|
+ <el-button @click="submitForms">确 定</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+ <script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ size: "mini",
|
|
|
+ queryData: {},
|
|
|
+ businessData: {},
|
|
|
+ tableData: [],
|
|
|
+ tableSet: [
|
|
|
+ {
|
|
|
+ label: "专业",
|
|
|
+ prop: "subjectName",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "视频商品",
|
|
|
+ prop: "goodsList",
|
|
|
+ scope: "list",
|
|
|
+ goodsType: 1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "题库商品",
|
|
|
+ prop: "goodsList",
|
|
|
+ scope: "list",
|
|
|
+ goodsType: 2,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ disBoxs: false,
|
|
|
+ goodsType: [
|
|
|
+ {
|
|
|
+ label: "视频商品",
|
|
|
+ value: 1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "题库商品",
|
|
|
+ value: 2,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "补考商品",
|
|
|
+ value: 3,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "前培商品",
|
|
|
+ value: 4,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ activeType: "",
|
|
|
+ goodsName: "",
|
|
|
+ newData: {},
|
|
|
+ goodsList: [],
|
|
|
+ checkList: [],
|
|
|
+ statusPop: "", //1新增2修改
|
|
|
+ isMatchingDialog: false,
|
|
|
+ loading: false, // 匹配商品加载
|
|
|
+ subLoading: false, // 搜索弹窗内容加载
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ comList: function () {
|
|
|
+ return function (v, int) {
|
|
|
+ let arr = [];
|
|
|
+ v.forEach((item) => {
|
|
|
+ if (item.goodsType == int) {
|
|
|
+ arr.push(item);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return arr;
|
|
|
+ };
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ activeType(val, oldVal) {
|
|
|
+ if (!val) return;
|
|
|
+ this.getSeachData(val);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ openBoxs(row) {
|
|
|
+ this.isMatchingDialog = true;
|
|
|
+ this.queryData = row;
|
|
|
+ this.tableData = []
|
|
|
+ console.log(this.queryData, "queryData");
|
|
|
+ this.initData();
|
|
|
+ },
|
|
|
+ init() {
|
|
|
+ this.goodsName = "";
|
|
|
+ this.getSeachData(this.activeType);
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 搜索弹窗内容
|
|
|
+ */
|
|
|
+ getSeachData(type) {
|
|
|
+ this.subLoading = true
|
|
|
+ var data = {
|
|
|
+ educationTypeId: Number(this.queryData.educationTypeId),
|
|
|
+ businessId: Number(this.queryData.businessId),
|
|
|
+ goodsType: type,
|
|
|
+ goodsName: this.goodsName || "",
|
|
|
+ goodsStatus: 1,
|
|
|
+ status: 1,
|
|
|
+ };
|
|
|
+ if (type == 1 || type == 2) {
|
|
|
+ data.subjectId = this.newData.subjectId;
|
|
|
+ }
|
|
|
+ this.$api.inquireGoods(data).then((res) => {
|
|
|
+ this.goodsList = res.rows;
|
|
|
+ }).finally(() => {
|
|
|
+ this.subLoading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 设置
|
|
|
+ */
|
|
|
+ setOption(v) {
|
|
|
+ this.newData = JSON.parse(JSON.stringify(v));
|
|
|
+ this.checkList = v.goodsList.map((item) => {
|
|
|
+ return item.goodsId;
|
|
|
+ });
|
|
|
+ if (this.checkList.length) {
|
|
|
+ this.statusPop = 2;
|
|
|
+ } else {
|
|
|
+ this.statusPop = 1;
|
|
|
+ }
|
|
|
+ this.activeType = 1;
|
|
|
+ this.goodsName = "";
|
|
|
+ this.getSeachData(1);
|
|
|
+ this.disBoxs = true;
|
|
|
+ },
|
|
|
+ searchGoods(int) {
|
|
|
+ this.activeType = int;
|
|
|
+ },
|
|
|
+ submitForms() {
|
|
|
+ if (this.statusPop === 1) {
|
|
|
+ if (!this.checkList.length) {
|
|
|
+ this.$message.warning("请选择匹配商品");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ //新增
|
|
|
+ this.$api
|
|
|
+ .apporderconfiggoods({
|
|
|
+ configId: this.queryData.id,
|
|
|
+ subjectId: this.newData.subjectId,
|
|
|
+ status: 1,
|
|
|
+ goodsIds: this.checkList.toString(),
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ this.$message.success("提交成功");
|
|
|
+ this.disBoxs = false;
|
|
|
+ this.initData();
|
|
|
+ });
|
|
|
+ }
|
|
|
+ if (this.statusPop === 2) {
|
|
|
+ //修改
|
|
|
+ this.$api
|
|
|
+ .editorderconfiggoods({
|
|
|
+ configId: this.queryData.id,
|
|
|
+ id: this.newData.id,
|
|
|
+ subjectId: this.newData.subjectId,
|
|
|
+ status: this.checkList.length ? 1 : -1,
|
|
|
+ goodsIds: this.checkList.toString(),
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ this.$message.success("提交成功");
|
|
|
+ this.disBoxs = false;
|
|
|
+ this.initData();
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ close() {
|
|
|
+ this.$emit("close");
|
|
|
+ },
|
|
|
+ initData() {
|
|
|
+ this.loading = true;
|
|
|
+ this.$api
|
|
|
+ .inquireCourseSubject({
|
|
|
+ educationTypeId: Number(this.queryData.educationTypeId),
|
|
|
+ businessId: Number(this.queryData.businessId),
|
|
|
+ status: 1,
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ this.$api
|
|
|
+ .inquireorderconfiggoodsList({
|
|
|
+ configId: Number(this.queryData.id),
|
|
|
+ })
|
|
|
+ .then((result) => {
|
|
|
+ let arr = res.rows.map((item) => {
|
|
|
+ return {
|
|
|
+ subjectId: item.id,
|
|
|
+ subjectName: item.subjectName,
|
|
|
+ goodsList: [],
|
|
|
+ };
|
|
|
+ });
|
|
|
+ result.rows.forEach((item) => {
|
|
|
+ 0;
|
|
|
+ arr.forEach((items) => {
|
|
|
+ if (items.subjectId == item.subjectId) {
|
|
|
+ items.goodsList = item.goodsList;
|
|
|
+ items.id = item.id;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ this.tableData = arr;
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ console.log('end')
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+ <style lang="less" scoped>
|
|
|
+.liSty {
|
|
|
+ padding: 8px 0px;
|
|
|
+ cursor: pointer;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.topSty {
|
|
|
+ display: inline-block;
|
|
|
+ font-size: 14px;
|
|
|
+ margin-left: 12px;
|
|
|
+ background: #eee;
|
|
|
+ padding: 4px;
|
|
|
+}
|
|
|
+/deep/.el-button {
|
|
|
+ border-radius: 8px;
|
|
|
+}
|
|
|
+/deep/.el-dialog {
|
|
|
+ border-radius: 8px;
|
|
|
+ .el-dialog__header {
|
|
|
+ padding: 0;
|
|
|
+ .hearders {
|
|
|
+ height: 40px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 0px 18px 0px 20px;
|
|
|
+ border-bottom: 1px solid #e2e2e2;
|
|
|
+ .leftTitle {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #2f4378;
|
|
|
+ }
|
|
|
+ .rightBoxs {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ img {
|
|
|
+ width: 14px;
|
|
|
+ height: 14px;
|
|
|
+ margin-left: 13px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-dialog__body {
|
|
|
+ padding: 10px 20px;
|
|
|
+ }
|
|
|
+ .el-dialog__footer {
|
|
|
+ padding: 0;
|
|
|
+ .dialog-footer {
|
|
|
+ padding: 0px 40px;
|
|
|
+ height: 70px;
|
|
|
+ border-top: 1px solid #e2e2e2;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.imgBox {
|
|
|
+ width: 100%;
|
|
|
+ // height: 210px;
|
|
|
+ border: 1px solid #e2e2e2;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 8px 8px 3px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ .imgLabel {
|
|
|
+ flex: 1;
|
|
|
+ width: 100%;
|
|
|
+ border: 1px dotted #e2e2e2;
|
|
|
+ color: #999;
|
|
|
+ font-size: 14px;
|
|
|
+ cursor: pointer;
|
|
|
+ border-radius: 8px;
|
|
|
+ .msPhoto {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ max-width: 100%;
|
|
|
+ max-height: 270px;
|
|
|
+ img {
|
|
|
+ max-width: 100%;
|
|
|
+ max-height: 270px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .imgbbx {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ i {
|
|
|
+ font-weight: bold;
|
|
|
+ margin: 14px 0;
|
|
|
+ font-size: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ margin: 5px 0px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|