|
@@ -0,0 +1,525 @@
|
|
|
|
+<template>
|
|
|
|
+ <div id="goodsMatchToBusin">
|
|
|
|
+ <el-row :gutter="10">
|
|
|
|
+ <el-col :span="4">
|
|
|
|
+ <el-select
|
|
|
|
+ v-model="educationId"
|
|
|
|
+ placeholder="请选择教育类型"
|
|
|
|
+ :size="size"
|
|
|
|
+ >
|
|
|
|
+ <el-option
|
|
|
|
+ v-for="(items, indexs) in educationType"
|
|
|
|
+ :key="indexs"
|
|
|
|
+ :label="items.educationName"
|
|
|
|
+ :value="items.id"
|
|
|
|
+ ></el-option>
|
|
|
|
+ </el-select>
|
|
|
|
+ <ul class="ulSty">
|
|
|
|
+ <li
|
|
|
|
+ v-for="(item, index) in businessList"
|
|
|
|
+ :key="index"
|
|
|
|
+ :class="active === item.id ? 'active' : ''"
|
|
|
|
+ @click="active = item.id"
|
|
|
|
+ >
|
|
|
|
+ {{ item.projectName + " - " + item.businessName }}
|
|
|
|
+ </li>
|
|
|
|
+ <el-pagination
|
|
|
|
+ style="text-align: center"
|
|
|
|
+ small
|
|
|
|
+ layout="prev, pager, next"
|
|
|
|
+ :total="total"
|
|
|
|
+ :current-page.sync="pageNum"
|
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
|
+ >
|
|
|
|
+ </el-pagination>
|
|
|
|
+ </ul>
|
|
|
|
+ </el-col>
|
|
|
|
+ <el-col :span="20">
|
|
|
|
+ <el-button :size="size" type="primary" @click="add">添加</el-button>
|
|
|
|
+ <el-table
|
|
|
|
+ border
|
|
|
|
+ :data="tableData"
|
|
|
|
+ style="width: 100%; margin-top: 16px"
|
|
|
|
+ >
|
|
|
|
+ <el-table-column
|
|
|
|
+ type="index"
|
|
|
|
+ label="序号"
|
|
|
|
+ width="70"
|
|
|
|
+ align="center"
|
|
|
|
+ header-align="center"
|
|
|
|
+ ></el-table-column>
|
|
|
|
+ <el-table-column
|
|
|
|
+ align="center"
|
|
|
|
+ v-for="(item, index) in tableSet"
|
|
|
|
+ :key="index"
|
|
|
|
+ :prop="item.prop"
|
|
|
|
+ :label="item.label"
|
|
|
|
+ :width="item.width"
|
|
|
|
+ >
|
|
|
|
+ <template slot-scope="scope">
|
|
|
|
+ <span v-if="item.scope === 'status'">
|
|
|
|
+ {{
|
|
|
|
+ scope.row[item.prop] === 1
|
|
|
|
+ ? "启用"
|
|
|
|
+ : scope.row[item.prop] === 0
|
|
|
|
+ ? "关闭"
|
|
|
|
+ : ""
|
|
|
|
+ }}
|
|
|
|
+ </span>
|
|
|
|
+ <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="add(1, scope.row)">修改</el-button>
|
|
|
|
+ <el-button type="text" @click="setOption(scope.row)"
|
|
|
|
+ >配置</el-button
|
|
|
|
+ >
|
|
|
|
+ <el-button type="text" @click="del(scope.row)">删除</el-button>
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ </el-table>
|
|
|
|
+ <pagination
|
|
|
|
+ :total="totalRight"
|
|
|
|
+ :page-sizes="[10, 20, 50, 100]"
|
|
|
|
+ :pageSize="tabSearchData.pageSize"
|
|
|
|
+ :currentPage="tabSearchData.pageNum"
|
|
|
|
+ @handleSizeChange="handleSizeChange"
|
|
|
|
+ @handleCurrentChange="handleCurrentChanges"
|
|
|
|
+ />
|
|
|
|
+ </el-col>
|
|
|
|
+ </el-row>
|
|
|
|
+ <el-dialog
|
|
|
|
+ @closed="loadingClose"
|
|
|
|
+ :visible.sync="dialogVisible"
|
|
|
|
+ width="560px"
|
|
|
|
+ :show-close="false"
|
|
|
|
+ :close-on-click-modal="false"
|
|
|
|
+ >
|
|
|
|
+ <div slot="title" class="hearders">
|
|
|
|
+ <div class="leftTitle">
|
|
|
|
+ {{ statusPop === 1 ? "添加" : statusPop === 0 ? "修改" : "详情" }}
|
|
|
|
+ </div>
|
|
|
|
+ <div class="rightBoxs">
|
|
|
|
+ <img
|
|
|
|
+ src="@/assets/images/Close@2x.png"
|
|
|
|
+ alt=""
|
|
|
|
+ @click="dialogVisible = false"
|
|
|
|
+ />
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div>
|
|
|
|
+ <el-form
|
|
|
|
+ label-position="right"
|
|
|
|
+ label-width="130px"
|
|
|
|
+ :model="listData"
|
|
|
|
+ :rules="rules"
|
|
|
|
+ ref="listData"
|
|
|
|
+ >
|
|
|
|
+ <el-form-item label="配置标题" prop="configName">
|
|
|
|
+ <el-input
|
|
|
|
+ v-model="listData.configName"
|
|
|
|
+ placeholder="请输入配置标题"
|
|
|
|
+ ></el-input>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="状态" prop="status">
|
|
|
|
+ <el-radio-group v-model="listData.status">
|
|
|
|
+ <el-radio :label="1">启用</el-radio>
|
|
|
|
+ <el-radio :label="0">关闭</el-radio>
|
|
|
|
+ </el-radio-group>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ </el-form>
|
|
|
|
+ </div>
|
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
|
+ <el-button @click="dialogVisible = false">取 消</el-button>
|
|
|
|
+ <el-button
|
|
|
|
+ type="primary"
|
|
|
|
+ :loading="disabledBtn"
|
|
|
|
+ @click="submit('listData')"
|
|
|
|
+ >确 定</el-button
|
|
|
|
+ >
|
|
|
|
+ </span>
|
|
|
|
+ </el-dialog>
|
|
|
|
+ </div>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+import { mapGetters } from "vuex";
|
|
|
|
+import pagination from "@/components/pagination";
|
|
|
|
+export default {
|
|
|
|
+ name: "GoodsMatchToBusin",
|
|
|
|
+ components: { pagination },
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ disabledBtn: false,
|
|
|
|
+ size: "small",
|
|
|
|
+ educationId: "", //教育类型ID
|
|
|
|
+ businessList: [], //业务层次列表
|
|
|
|
+ active: "", //当前选中业务层次ID
|
|
|
|
+ total: 0, //左侧业务层次总数量
|
|
|
|
+ pageNum: 1, //左侧业务层次页码
|
|
|
|
+ tableData: [],
|
|
|
|
+ tableSet: [
|
|
|
|
+ {
|
|
|
|
+ label: "配置标题",
|
|
|
|
+ prop: "configName",
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: "状态",
|
|
|
|
+ prop: "status",
|
|
|
|
+ scope: "status",
|
|
|
|
+ width: "160",
|
|
|
|
+ },
|
|
|
|
+ ],
|
|
|
|
+ listData: {},
|
|
|
|
+ dialogVisible: false,
|
|
|
|
+ statusPop: "", //1添加0编辑
|
|
|
|
+ //表单验证
|
|
|
|
+ rules: {
|
|
|
|
+ configName: [
|
|
|
|
+ { required: true, message: "请输入配置标题", trigger: "blur" },
|
|
|
|
+ ],
|
|
|
|
+ status: [{ required: true, message: "请选择状态", trigger: "change" }],
|
|
|
|
+ },
|
|
|
|
+ tabSearchData: {
|
|
|
|
+ pageNum: 1,
|
|
|
|
+ pageSize: 10,
|
|
|
|
+ },
|
|
|
|
+ totalRight: 0,
|
|
|
|
+ };
|
|
|
|
+ },
|
|
|
|
+ watch: {
|
|
|
|
+ /**
|
|
|
|
+ * 监听教育类型列表数据变化-选中第一个ID
|
|
|
|
+ */
|
|
|
|
+ educationType(val, oldVal) {
|
|
|
|
+ if (val && !oldVal) {
|
|
|
|
+ this.educationId = val[0].id;
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ /**
|
|
|
|
+ * 监听教育类型ID变化-获取最新业务层次列表
|
|
|
|
+ */
|
|
|
|
+ educationId(val, oldVal) {
|
|
|
|
+ this.getBusList(val);
|
|
|
|
+ },
|
|
|
|
+ active(val, oldVal) {
|
|
|
|
+ this.tabSearchData = {
|
|
|
|
+ pageNum: 1,
|
|
|
|
+ pageSize: 10,
|
|
|
|
+ };
|
|
|
|
+ this.businessFunc(val);
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ computed: {
|
|
|
|
+ ...mapGetters(["educationType"]),
|
|
|
|
+ },
|
|
|
|
+ mounted() {
|
|
|
|
+ if (this.educationType && this.educationType.length) {
|
|
|
|
+ this.educationId = this.educationType[0].id;
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ /**
|
|
|
|
+ * 配置详情跳转
|
|
|
|
+ */
|
|
|
|
+ setOption(v) {
|
|
|
|
+ const jump = () => {
|
|
|
|
+ this.$router.push({
|
|
|
|
+ path: "matchInfoData",
|
|
|
|
+ query: {
|
|
|
|
+ id: v.id,
|
|
|
|
+ configName: v.configName,
|
|
|
|
+ businessId: v.businessId,
|
|
|
|
+ },
|
|
|
|
+ });
|
|
|
|
+ };
|
|
|
|
+ const statusPage = this.$store.state.tagsView.visitedViews.some(
|
|
|
|
+ (item) => {
|
|
|
|
+ return item.name == "MatchInfoData";
|
|
|
|
+ }
|
|
|
|
+ );
|
|
|
|
+ if (statusPage) {
|
|
|
|
+ this.$store
|
|
|
|
+ .dispatch("tagsView/delCachedView", {
|
|
|
|
+ name: "MatchInfoData",
|
|
|
|
+ })
|
|
|
|
+ .then((res) => {
|
|
|
|
+ jump();
|
|
|
|
+ });
|
|
|
|
+ } else {
|
|
|
|
+ jump();
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ /**
|
|
|
|
+ * 新增or修改
|
|
|
|
+ */
|
|
|
|
+ add(int, v) {
|
|
|
|
+ /**
|
|
|
|
+ * 1修改
|
|
|
|
+ */
|
|
|
|
+ if (int === 1) {
|
|
|
|
+ this.statusPop = 0;
|
|
|
|
+ this.listData = JSON.parse(JSON.stringify(v));
|
|
|
|
+ } else {
|
|
|
|
+ this.listData = {};
|
|
|
|
+ this.statusPop = 1;
|
|
|
|
+ this.listData.status = 1;
|
|
|
|
+ this.listData.businessId = this.active;
|
|
|
|
+ }
|
|
|
|
+ this.dialogVisible = true;
|
|
|
|
+ this.$nextTick(()=>{
|
|
|
|
+ this.$refs.listData.clearValidate()
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ loadingClose() {
|
|
|
|
+ this.disabledBtn = false;
|
|
|
|
+ },
|
|
|
|
+ /**
|
|
|
|
+ * 表单验证
|
|
|
|
+ */
|
|
|
|
+ submit(formName) {
|
|
|
|
+ this.$refs[formName].validate((valid) => {
|
|
|
|
+ if (valid) {
|
|
|
|
+ this.rulesTableSumbit();
|
|
|
|
+ } else {
|
|
|
|
+ return false;
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ /**
|
|
|
|
+ * 提交内容
|
|
|
|
+ */
|
|
|
|
+ rulesTableSumbit() {
|
|
|
|
+ this.disabledBtn = true;
|
|
|
|
+ if (this.statusPop === 1) {
|
|
|
|
+ this.$api
|
|
|
|
+ .apporderbusinessconfig(this.listData)
|
|
|
|
+ .then((res) => {
|
|
|
|
+ this.$message.success("新增成功");
|
|
|
|
+ this.dialogVisible = false;
|
|
|
|
+ this.businessFunc(this.active);
|
|
|
|
+ })
|
|
|
|
+ .catch(() => {
|
|
|
|
+ this.disabledBtn = false;
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ if (this.statusPop === 0) {
|
|
|
|
+ this.$api
|
|
|
|
+ .editorderbusinessconfig(this.listData)
|
|
|
|
+ .then((res) => {
|
|
|
|
+ this.$message.success("修改成功");
|
|
|
|
+ this.dialogVisible = false;
|
|
|
|
+ this.businessFunc(this.active);
|
|
|
|
+ })
|
|
|
|
+ .catch(() => {
|
|
|
|
+ this.disabledBtn = false;
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ /**
|
|
|
|
+ * 获取业务层次ID
|
|
|
|
+ */
|
|
|
|
+ getBusList(id, disy) {
|
|
|
|
+ if (!id) return;
|
|
|
|
+ this.$api
|
|
|
|
+ .inquirebusinessList({
|
|
|
|
+ status: 1,
|
|
|
|
+ educationId: id,
|
|
|
|
+ pageNum: this.pageNum,
|
|
|
|
+ pageSize: 10,
|
|
|
|
+ status: "0,1",
|
|
|
|
+ })
|
|
|
|
+ .then((res) => {
|
|
|
|
+ this.businessList = res.rows;
|
|
|
|
+ this.total = res.total;
|
|
|
|
+ if (res.rows.length && !disy) {
|
|
|
|
+ this.active = res.rows[0].id;
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ /**
|
|
|
|
+ * 获取业务层次对应配置
|
|
|
|
+ */
|
|
|
|
+ businessFunc(id) {
|
|
|
|
+ if (!id) return;
|
|
|
|
+ this.$api
|
|
|
|
+ .inquireorderbusinessconfigList({
|
|
|
|
+ businessId: id,
|
|
|
|
+ pageSize: this.tabSearchData.pageSize,
|
|
|
|
+ pageNum: this.tabSearchData.pageNum,
|
|
|
|
+ status: "0,1",
|
|
|
|
+ })
|
|
|
|
+ .then((res) => {
|
|
|
|
+ this.tableData = res.rows;
|
|
|
|
+ this.totalRight = res.total;
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ /**
|
|
|
|
+ * 删除
|
|
|
|
+ */
|
|
|
|
+ del(v) {
|
|
|
|
+ this.$alert(
|
|
|
|
+ "确定删除此内容?<br />内容删除后将无法恢复,请慎重考虑",
|
|
|
|
+ "提示",
|
|
|
|
+ {
|
|
|
|
+ dangerouslyUseHTMLString: true,
|
|
|
|
+ }
|
|
|
|
+ )
|
|
|
|
+ .then(() => {
|
|
|
|
+ var data = {
|
|
|
|
+ businessId: v.businessId,
|
|
|
|
+ id: v.id,
|
|
|
|
+ status: -1,
|
|
|
|
+ };
|
|
|
|
+ this.$api.editorderbusinessconfig(data).then((res) => {
|
|
|
|
+ this.$message.success("删除成功");
|
|
|
|
+ this.businessFunc(this.active);
|
|
|
|
+ });
|
|
|
|
+ })
|
|
|
|
+ .catch(() => {
|
|
|
|
+ this.$message({
|
|
|
|
+ type: "info",
|
|
|
|
+ message: "已取消删除",
|
|
|
|
+ });
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ /**
|
|
|
|
+ * 切换页码
|
|
|
|
+ */
|
|
|
|
+ handleCurrentChange(v) {
|
|
|
|
+ this.pageNum = v;
|
|
|
|
+ this.getBusList(this.educationId, true);
|
|
|
|
+ },
|
|
|
|
+ /**
|
|
|
|
+ * 切换业务层次配置页数
|
|
|
|
+ */
|
|
|
|
+ handleSizeChange(v) {
|
|
|
|
+ this.tabSearchData.pageSize = v;
|
|
|
|
+ this.tabSearchData.pageNum = 1;
|
|
|
|
+ this.businessFunc(this.active);
|
|
|
|
+ },
|
|
|
|
+ /**
|
|
|
|
+ * 切换业务层次配置页码
|
|
|
|
+ */
|
|
|
|
+ handleCurrentChanges(v) {
|
|
|
|
+ this.tabSearchData.pageNum = v;
|
|
|
|
+ this.businessFunc(this.active);
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+};
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style lang="less" scoped>
|
|
|
|
+.ulSty {
|
|
|
|
+ background-color: #eee;
|
|
|
|
+ & > li {
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ padding: 10px 10px;
|
|
|
|
+ border: 1px solid transparent;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ &:hover {
|
|
|
|
+ background-color: rgba(64, 158, 255, 0.3);
|
|
|
|
+ transition: all 0.3s;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+.active {
|
|
|
|
+ background-color: #fff !important;
|
|
|
|
+ border: 1px solid #000 !important;
|
|
|
|
+}
|
|
|
|
+/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__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>
|