From 2bb0e066fdc522beb51dd13f6a72cd67bd5d6a58 Mon Sep 17 00:00:00 2001 From: “dzb” <2632970487@qq.com> Date: 星期日, 09 十月 2022 18:06:46 +0800 Subject: [PATCH] 修改bug,店铺管理新增、查询 --- src/views/systemSetting/platform/mySetting/index.vue | 308 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 305 insertions(+), 3 deletions(-) diff --git a/src/views/systemSetting/platform/mySetting/index.vue b/src/views/systemSetting/platform/mySetting/index.vue index 8b407a0..bf97be8 100644 --- a/src/views/systemSetting/platform/mySetting/index.vue +++ b/src/views/systemSetting/platform/mySetting/index.vue @@ -1,5 +1,307 @@ <template> - <div> - + <div class="mySetting"> + <!-- header 椤甸潰鏍囬鎻愮ず --> + <header> + <div class="header-title">绯荤粺璁剧疆 >> 闂ㄦ埛绠$悊 > 鑷畾涔夎彍鍗曡缃�</div> + <div class="header-add"> + <el-button type="primary" @click="handleAdd">鏂板鑿滃崟</el-button> + </div> + </header> + <main> + <div class="main-content"> + <!-- 鏁版嵁灞曠ず --> + <!-- <el-table ref="multipleTable" + :header-cell-style="{background:'#06122c','font-size':'12px',color:'#4b9bb7','font-weight':'650','line-height':'45px'}" + :data="menuList" style="width: 100%" row-key="id" :row-class-name="tableRowClassName"> + <el-table-column type="selection" min-width="5"> + </el-table-column> + <el-table-column prop="title" label="鑿滃崟鏍�" min-width="75"> + <template slot-scope="scope"> + <el-tree :data="scope.row.menuVoArrayList" node-key="id" :default-expanded-keys="[0]" + :default-checked-keys="[0]" :props="defaultProps"> + </el-tree> + </template> + </el-table-column> + <el-table-column label="鎿嶄綔" min-width="20"> + <template slot-scope="scope"> + <div class="operation"> + <span @click="handleAdd(scope.row)">鏂板</span> + <span class="line">|</span> + <span @click="handleEdit(scope.row)">缂栬緫</span> + <span class="line">|</span> + <span @click="handleDelete(scope.row)">鍒犻櫎</span> + </div> + </template> + </el-table-column> + </el-table> --> + <el-row class="my-container"> + <el-col :span="6" class="my-aside"> + <el-tree :data="menuList" @node-click="handleNodeClick" :props="defaultProps" accordion + node-key="id"> + <span class="custom-tree-node" slot-scope="{ node, data }"> + <span>{{ node.label }}</span> + <span> + <el-button type="text" size="mini" @click="handleEdit(data)"> + 缂栬緫 + </el-button> + <el-button type="text" size="mini" @click="handleDelete(data)"> + 鍒犻櫎 + </el-button> + </span> + </span> + </el-tree> + </el-col> + <el-col :span="18" class="my-content" v-if="article.title"> + <div class="my-header">鑿滃崟绠$悊-{{article.title}} + </div> + <div class="my-name"> + <div class="my-show__left">鍚嶇О:</div> + <div class="my-show__right">{{article.title}}</div> + </div> + <div class="my-desc"> + <div class="my-show__left">鎻忚堪:</div> + <div class="my-show__right">{{article.title}}</div> + </div> + <div class="my-show"> + <div class="my-show__left">鏄惁鏄剧ず鑿滃崟:</div> + <div class="my-show__right"> + <el-switch class="switchStyle" v-model="article.hidden" active-text="寮�" + inactive-text="鍏�" active-color="#3fef9a" inactive-color="#000212" + @change="handleChangeStatus(article)"> + </el-switch> + </div> + </div> + </el-col> + </el-row> + </div> + </main> + <footer> + <!-- 鏂板寮圭獥 --> + <el-dialog title="鎻愮ず" :visible.sync="dialogAdd" v-if="dialogAdd" width="45%" :before-close="handleClose"> + <MyAdd></MyAdd> + </el-dialog> + </footer> </div> -</template> \ No newline at end of file +</template> +<script> +import MyAdd from './create' +export default { + components: { + MyAdd + }, + data() { + return { + menuList: [], + article: {}, + defaultProps: { + children: 'menuVoArrayList', + label: 'title' + }, + dialogAdd: false, + } + }, + created() { + this.getMenuList(); + }, + methods: { + // 鐐瑰嚮鑺傜偣 + handleNodeClick(data) { + this.article = { ...data }; + this.article.hidden === 0 ? this.article.hidden = false : this.article.hidden = true + }, + // 淇敼鐘舵�� + handleChangeStatus(data) { + console.log(data); + data.hidden ? data.hidden = 1 : data.hidden = 0; + this.$axios({ + method: 'post', + url: `sccg/menu/updateHidden/${data.id}` + '?hidden=' + data.hidden + }) + .then(res => { + this.$message({ + type: res.code === 200 ? 'success' : 'error', + message: res.message + }) + this.getMenuList(); + this.article = {}; + }) + }, + // 鏂板 + handleAdd() { + this.dialogAdd = true; + }, + // 缂栬緫 + handleEdit(data) { + console.log(data); + }, + //鍒犻櫎 + handleDelete(data) { + console.log(data); + this.$confirm('鎮ㄧ‘璁よ鍒犻櫎璁㈠崟鍚�?') + .then(_ => { + this.$axios({ + method: 'post', + url: `sccg/menu/delete/${data.id}` + }) + .then(res => { + this.$message({ + type: res.code === 200 ? 'success' : 'error', + message: res.code === 200 ? '鍒犻櫎鑿滃崟鎴愬姛' : res.message + }) + if (res.code === 200) { + this.getMenuList(); + } + }) + }) + .catch(err => { + console.log(err); + }) + }, + // 鑾峰彇鑿滃崟鍒楄〃 + getMenuList() { + this.$axios({ + method: 'get', + url: 'sccg/system/portal/menu/search', + }).then(res => { + this.menuList = res.data.records; + console.log(this.menuList); + }) + }, + // 鍏抽棴寮圭獥 + handleClose(done) { + this.$confirm('纭鍏抽棴锛�') + .then(_ => { + this.dialogAdd = false + done(); + }) + .catch(_ => {}); + } + } + +} +</script> +<style lang="scss" scoped> +.mySetting { + margin: 10px 20px; + text-align: left; + color: #4b9bb7; + + header { + line-height: 60px; + padding: 0 20px; + display: flex; + justify-content: space-between; + align-items: center; + .header-add{ + .el-button{ + background-color: #eb5d01; + border: none; + } + } + } + + main { + background-color: #09152f; + margin-top: 20px; + padding-bottom: 50px; + border: 1pox solid #fff; + + .main-content { + .my-container { + ::v-deep .el-tree-node__content { + height: 36px; + } + + ::v-deep .el-tree-node__label { + line-height: 20px; + } + } + + .my-header { + line-height: 60px; + display: flex; + justify-content: center; + } + + .my-name, + .my-desc, + .my-show { + line-height: 40px; + display: flex; + justify-content: center; + align-items: center; + } + + .my-show__right { + margin-left: 10px; + } + + .custom-tree-node { + flex: 1; + display: flex; + align-items: center; + justify-content: space-between; + font-size: 14px; + line-height: 20px; + padding-right: 8px; + } + } + + &::v-deep .switchStyle .el-switch__label { + position: absolute; + display: none; + color: #fff; + } + + &::v-deep .el-switch__core { + background-color: rgba(166, 166, 166, 1); + } + + &::v-deep .switchStyle .el-switch__label--left { + z-index: 9; + left: 20px; + } + + &::v-deep .switchStyle .el-switch__label--right { + z-index: 9; + left: 4px; + } + + &::v-deep .switchStyle .el-switch__label.is-active { + display: block; + } + + &::v-deep .switchStyle.el-switch .el-switch__core, + &::v-deep .el-switch .el-switch__label { + width: 50px !important; + } + } + + &::v-deep .el-dialog__header, + &::v-deep .el-dialog__body { + background-color: #06122c; + } + + &::v-deep .el-dialog__header { + display: flex; + align-items: center; + background-color: #fff; + padding: 20px; + line-height: 60px; + } + + &::v-deep .el-dialog__title { + color: #4b9bb7; + } + + &::v-deep .el-dialog__close { + width: 20px; + height: 20px; + // color: #fff; + } + + &::v-deep .el-dialog__body { + padding: 0; + } +} +</style> \ No newline at end of file -- Gitblit v1.8.0