From 4049531e168e3abd88c1c7809c4350424622cd8e Mon Sep 17 00:00:00 2001
From: zhanghua <314079846@qq.com>
Date: 星期一, 23 六月 2025 21:03:05 +0800
Subject: [PATCH] Merge branch 'dev' of http://42.193.1.25:9521/r/lmk-shop-web into dev
---
manager/src/views/tag/tag/index.vue | 403 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 403 insertions(+), 0 deletions(-)
diff --git a/manager/src/views/tag/tag/index.vue b/manager/src/views/tag/tag/index.vue
new file mode 100644
index 0000000..51c9c9d
--- /dev/null
+++ b/manager/src/views/tag/tag/index.vue
@@ -0,0 +1,403 @@
+<template>
+ <div class="wrapper">
+ <Row>
+ <Col span="4">
+ <Card style="height: 100%;" class="article-category mr_10">
+ <Tree :data="treeData" @on-select-change="handleCateChange"></Tree>
+ </Card>
+ </Col>
+ <Col span="20">
+ <Card class="article-detail">
+ <Row @keydown.enter.native="handleSearch">
+ <Form ref="searchForm" :model="searchForm" inline :label-width="70" style="width: 100%" class="search-form">
+ <Form-item label="鏍囩鍚嶇О" prop="tagName">
+ <Input type="text" v-model="searchForm.tagName" placeholder="璇疯緭鍏ユ爣绛惧悕绉�" clearable style="width: 200px" />
+ </Form-item>
+ <Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">鎼滅储</Button>
+ </Form>
+ </Row>
+ <Row class="operation padding-row">
+ <Button @click="add" v-if="!selected" type="primary">娣诲姞</Button>
+ </Row>
+ <Table :loading="loading" border :columns="columns" :data="data" style="height: calc(100vh - 328px);"
+ ref="table">
+ <!-- 椤甸潰灞曠ず -->
+ <template slot="openStatusSlot" slot-scope="scope">
+ <div></div>
+ <i-switch size="large" v-model="scope.row.openStatus" @on-change="changeSwitch(scope.row)">
+ <span slot="open">灞曠ず</span>
+ <span slot="close">闅愯棌</span>
+ </i-switch>
+ </template>
+ </Table>
+ <Row type="flex" justify="end" class="mt_10">
+ <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage"
+ @on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50]" size="small" show-total show-elevator>
+ </Page>
+ </Row>
+ </Card>
+ </Col>
+ </Row>
+ <template v-if="!selected">
+ <Modal :tagName="modalTitle" v-model="modalVisible" :mask-closable="false" :width="1100">
+ <Form ref="form" :model="form" :label-width="100">
+ <FormItem label="鏍囩鍚嶇О" prop="tagName">
+ <Input v-model="form.tagName" clearable style="width: 40%" />
+ </FormItem>
+ <FormItem label="鏍囩鍒嗙被" prop="tagTypeId">
+ <Select v-model="treeValue" placeholder="璇烽�夋嫨" clearable style="width: 180px">
+ <Option v-if="treeValue" :value="treeValue" style="display: none">{{ treeValue }}
+ </Option>
+ <Tree :data="treeDataDefault" @on-select-change="handleCheckChange"></Tree>
+ </Select>
+ </FormItem>
+ <FormItem label="鎺掑簭" prop="sortNum">
+ <Input type="number" v-model="form.sortNum" clearable style="width: 10%" />
+ </FormItem>
+ </Form>
+ <div slot="footer">
+ <Button type="text" @click="modalVisible = false">鍙栨秷</Button>
+ <Button type="primary" :loading="submitLoading" @click="handleSubmit">鎻愪氦</Button>
+ </div>
+ </Modal>
+ </template>
+ </div>
+</template>
+
+<script>
+import { getTagTypeList } from "@/api/tag-type";
+import { getTags, deleteTagById, editTag, addTag } from "@/api/tag";
+import tinymec from "@/components/editor/index.vue";
+export default {
+ components: {
+ tinymec: tinymec,
+ },
+ props: {
+ selected: {
+ type: Boolean,
+ default: false,
+ },
+ },
+ data() {
+ return {
+ selectedIndex: 99999, // 宸查�変笅鏍�
+ loading: true, // 琛ㄥ崟鍔犺浇鐘舵��
+ modalType: 0, // 娣诲姞鎴栫紪杈戞爣璇�
+ modalVisible: false, // 娣诲姞鎴栫紪杈戞樉绀�
+ modalTitle: "", // 娣诲姞鎴栫紪杈戞爣棰�
+ treeDataDefault: [],
+ searchForm: {
+ // 鎼滅储妗嗗垵濮嬪寲瀵硅薄
+ pageNumber: 1, // 褰撳墠椤垫暟
+ pageSize: 10, // 椤甸潰澶у皬
+ sortNum: "createTime", // 榛樿鎺掑簭瀛楁
+ order: "desc", // 榛樿鎺掑簭鏂瑰紡
+ tagTypeId: "",
+ },
+ searchTreeValue: "", // 鍒囨崲
+ form: {
+ // 娣诲姞鎴栫紪杈戣〃鍗曞璞″垵濮嬪寲鏁版嵁
+ tagName: "",
+ tagTypeId: "",
+ sortNum: 1,
+ id: "",
+ },
+ list: [], // 鍒楄〃
+ treeValue: "", // 閫夋嫨鐨勫垎绫�
+ //鏍戠粨鏋�
+ treeData: [],
+ submitLoading: false, // 娣诲姞鎴栫紪杈戞彁浜ょ姸鎬�
+ columns: [
+ // 琛ㄥご
+ {
+ title: "鍒嗙被鍚嶇О",
+ key: "tagTypeName",
+ width: 150,
+ },
+ {
+ title: "鏍囩鍚嶇О",
+ key: "tagName",
+ minWidth: 200,
+ tooltip: true,
+ },
+ {
+ title: "鎺掑簭",
+ key: "sortNum",
+ width: 100,
+ },
+ {
+ title: "鎿嶄綔",
+ key: "action",
+ align: "center",
+
+ width: 230,
+ render: (h, params) => {
+ return h("div", [
+ h(
+ "Button",
+ {
+ props: {
+ size: "small",
+ type:
+ this.selectedIndex == params.index
+ ? "primary"
+ : "default",
+ },
+ style: {
+ marginRight: "5px",
+ display: this.selected ? "" : "none",
+ },
+ on: {
+ click: () => {
+ this.selectedIndex = params.index;
+ this.$emit("callbacked", params.row);
+ },
+ },
+ },
+ this.selectedIndex == params.index ? "宸查��" : "閫夋嫨"
+ ),
+ h(
+ "Button",
+ {
+ props: {
+ size: "small",
+ type: "info",
+ },
+ style: {
+ marginRight: "5px",
+ },
+ on: {
+ click: () => {
+ this.edit(params.row);
+ },
+ },
+ },
+ "缂栬緫"
+ ),
+ h(
+ "Button",
+ {
+ props: {
+ type: "error",
+ size: "small",
+ },
+ on: {
+ click: () => {
+ this.remove(params.row);
+ },
+ },
+ },
+ "鍒犻櫎"
+ ),
+ ]);
+ },
+ },
+ ],
+ data: [], // 琛ㄥ崟鏁版嵁
+ total: 0, // 琛ㄥ崟鏁版嵁鎬绘暟
+ };
+ },
+ watch: {
+ "searchForm.tagTypeId": {
+ handler() {
+ this.handleSearch();
+ },
+ deep: true,
+ },
+ "searchForm.tagName": {
+ handler() {
+ this.handleSearch();
+ },
+ deep: true,
+ },
+ },
+ methods: {
+ // 鍒濆鍖栨暟鎹�
+ init() {
+ this.getDataList();
+ this.getAllList(0);
+ },
+ // 閫夋嫨鍒嗙被鍥炶皟
+ handleCateChange(data) {
+ let { value, title } = data[0];
+ this.list.push({
+ value,
+ title,
+ });
+ this.searchForm.tagTypeId = value;
+ this.searchTreeValue = title;
+ this.getDataList()
+ },
+ // 鏍囩鍒嗙被鐨勯�夋嫨浜嬩欢
+ handleCheckChange(data) {
+ let value = "";
+ let title = "";
+ this.list = [];
+ data.forEach((item, index) => {
+ value += `${item.value},`;
+ title += `${item.title},`;
+ });
+ value = value.substring(0, value.length - 1);
+ title = title.substring(0, title.length - 1);
+ this.list.push({
+ value,
+ title,
+ });
+ this.form.tagTypeId = value;
+ this.treeValue = title;
+ },
+ // 鏀瑰彉椤垫暟
+ changePage(v) {
+ this.searchForm.pageNumber = v;
+ this.getDataList();
+ },
+ // 鏀瑰彉椤电爜
+ changePageSize(v) {
+ this.selected.pageNumber = 1;
+ this.searchForm.pageSize = v;
+ this.getDataList();
+ },
+ // 鎼滅储鍒楄〃
+ handleSearch() {
+ this.searchForm.pageNumber = 1;
+ this.searchForm.pageSize = 10;
+ this.getDataList();
+ },
+ // 鑾峰彇鍏ㄩ儴鏍囩鍒嗙被
+ getAllList(parent_id) {
+ this.loading = true;
+ getTagTypeList(parent_id).then((res) => {
+ this.loading = false;
+ if (res.code == 200) {
+ this.treeData = this.getTree(res.data);
+ this.treeDataDefault = this.getTree(res.data);
+ this.treeData.unshift({
+ title: "鍏ㄩ儴",
+ level: 0,
+ children: [],
+ id: "0",
+ tagTypeId: 0,
+ });
+ }
+ });
+ },
+ // 鏍囩鍒嗙被鏍煎紡鍖栨柟娉�
+ getTree(tree = []) {
+ let arr = [];
+ if (!!tree && tree.length !== 0) {
+ tree.forEach((item) => {
+ let obj = {};
+ obj.title = item.tagTypeName;
+ obj.value = item.id;
+ obj.attr = item.tagTypeName; // 鍏朵粬浣犳兂瑕佹坊鍔犵殑灞炴��
+ obj.expand = false;
+ obj.selected = false;
+ obj.children = this.getTree(item.children); // 閫掑綊璋冪敤
+ arr.push(obj);
+ });
+ }
+ return arr;
+ },
+ // 鑾峰彇鏍囩鍒楄〃
+ getDataList(val) {
+ if (val) this.form = {};
+ this.loading = true;
+ getTags(this.searchForm).then((res) => {
+ this.loading = false;
+ if (res.code === 200) {
+ this.total = res.total;
+ //涓轰簡鍦ㄦ槸鍚﹀睍绀轰竴鍒楀睍绀哄紑鍏� 闇�瑕佹敼涓�涓嬫暟鎹被鍨嬶紝鏈�缁堟彁浜ゅ啀娆℃洿鏀�
+ this.data = [];
+ if (res.data.length > 0) {
+ this.data = res.data;
+ }
+ }
+ });
+ this.total = this.data?.length;
+ this.loading = false;
+ },
+ // 娣诲姞鏍囩
+ handleSubmit() {
+ this.$refs.form.validate((valid) => {
+ if (valid) {
+ this.submitLoading = true;
+ if (this.modalType === 0) {
+ // 娣诲姞 閬垮厤缂栬緫鍚庝紶鍏d绛夋暟鎹� 璁板緱鍒犻櫎
+ delete this.form.id;
+ addTag(this.form).then((res) => {
+ this.submitLoading = false;
+ if (res.code === 200) {
+ this.$Message.success("鎿嶄綔鎴愬姛");
+ this.getDataList();
+ this.modalVisible = false;
+ }
+ });
+ } else {
+ // 缂栬緫
+ editTag(this.form).then((res) => {
+ this.submitLoading = false;
+ if (res.code === 200) {
+ this.$Message.success("鎿嶄綔鎴愬姛");
+ this.getDataList();
+ this.modalVisible = false;
+ }
+ });
+ }
+ }
+ });
+ },
+ // 娣诲姞鏍囩modal
+ add() {
+ this.modalType = 0;
+ this.modalTitle = "娣诲姞鏍囩";
+ this.treeValue = "";
+
+ this.form = {
+ sortNum: 1,
+ tagName: "",
+ };
+ this.$refs.form.resetFields();
+ delete this.form.id;
+ this.modalVisible = true;
+ },
+ // 缂栬緫鏍囩modal
+ edit(data) {
+ this.modalType = 1;
+ this.modalTitle = "缂栬緫鏍囩";
+ this.treeValue = "";
+ this.form = {
+ tagName: "",
+ };
+ this.$refs.form.resetFields();
+
+ this.modalVisible = true;
+ this.form.tagTypeId = data.tagTypeId;
+ this.treeValue = data.tagTypeName;
+ this.form.id = data.id;
+ this.form.tagName = data.tagName;
+ this.form.sortNum = data.sortNum;
+ },
+ // 鍒犻櫎鏍囩
+ remove(v) {
+ this.$Modal.confirm({
+ tagName: "纭鍒犻櫎",
+ content: "鎮ㄧ‘璁よ鍒犻櫎涔�?",
+ loading: true,
+ onOk: () => {
+ // 鍒犻櫎
+ deleteTagById(v.id).then((res) => {
+ this.$Modal.remove();
+ if (res.code === 200) {
+ this.$Message.success("鎿嶄綔鎴愬姛");
+ this.getDataList();
+ }
+ });
+ },
+ });
+ },
+ },
+ mounted() {
+ this.init();
+ },
+};
+</script>
--
Gitblit v1.8.0