|
|
@@ -0,0 +1,110 @@
|
|
|
+<template>
|
|
|
+ <el-container class="flex-column">
|
|
|
+ <div class="table-search-menu">
|
|
|
+ <div class="menu-left">颜色管理</div>
|
|
|
+ <div class="menu-right">
|
|
|
+ <el-button type="default" icon="el-icon-plus" @click="table_add()">新增颜色</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-main>
|
|
|
+ <div v-if="list.length == 0">
|
|
|
+ <el-empty description="暂无数据" :image-size="100"></el-empty>
|
|
|
+ </div>
|
|
|
+ <el-row :gutter="15" v-else>
|
|
|
+ <el-col :xl="3" :sm="6" :xs="24" v-for="(item,index) in list" :key="index">
|
|
|
+ <el-card shadow="hover" :body-style="{ padding: '0px' }">
|
|
|
+ <div class="code-item">
|
|
|
+ <div class="img">
|
|
|
+ <el-image
|
|
|
+ style="width: 100%; height: 150px"
|
|
|
+ :src="item.img"
|
|
|
+ :zoom-rate="1.2"
|
|
|
+ :max-scale="7"
|
|
|
+ :min-scale="0.2"
|
|
|
+ :preview-src-list="[item.img]"
|
|
|
+ :initial-index="4"
|
|
|
+ fit="fill"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="title">
|
|
|
+ <h2>{{item.name}}</h2>
|
|
|
+ <p><el-button type="primary" size="small" @click="table_edit(item,index)">编辑</el-button>
|
|
|
+ <el-button icon="el-icon-delete" plain size="small" type="danger" @click="del(index)"></el-button></p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-main>
|
|
|
+ </el-container>
|
|
|
+ <editForm ref="editForm" @success="hanldeSuccess"></editForm>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import editForm from "./components/form";
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ editForm
|
|
|
+ },
|
|
|
+ data(){
|
|
|
+ return {
|
|
|
+ list: [],
|
|
|
+ maxNum:0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created(){
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async del(data){
|
|
|
+ var confirm = await this.$confirm('确认删除吗?','提示', {
|
|
|
+ type: 'warning',
|
|
|
+ confirmButtonText: '删除',
|
|
|
+ confirmButtonClass: 'el-button--danger'
|
|
|
+ }).catch(() => {})
|
|
|
+ if(confirm != 'confirm'){
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ var resp = await this.$API.cloth.del.post({id:data,"type":"color"});
|
|
|
+ if (resp.code == 0) {
|
|
|
+ return this.$message.error(resp.msg)
|
|
|
+ }
|
|
|
+ this.$message.success(resp.msg);
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ hanldeSuccess(){
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ async getList(){
|
|
|
+ var resp = await this.$API.cloth.color.get({"type":"color"});
|
|
|
+ if (resp.code == 0) {
|
|
|
+ return this.$message.warning(resp.msg)
|
|
|
+ }
|
|
|
+ this.list = resp.data.data;
|
|
|
+ this.maxNum = resp.data.num;
|
|
|
+ },
|
|
|
+ table_add() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.editForm.open().setData(this.maxNum,{},"color")
|
|
|
+ })
|
|
|
+ },
|
|
|
+ table_edit(data,index) {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.editForm.open('edit').setData(index,data,"color")
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+ .el-card {margin-bottom: 15px;}
|
|
|
+ .code-item {cursor: pointer;}
|
|
|
+ .code-item .img {width: 100%;height: 150px;background: #09f;display:flex;align-items: center;justify-content: center;background-repeat: no-repeat;background-size: cover;}
|
|
|
+ .code-item .img i {font-size: 100px;color: #fff;background-image: -webkit-linear-gradient(top left, #fff, #09f 100px);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
|
|
|
+ .code-item .title {padding:15px;}
|
|
|
+ .code-item .title h2 {font-size: 16px;}
|
|
|
+ .code-item .title h4 {font-size: 12px;color: #999;font-weight: normal;margin-top: 5px;}
|
|
|
+ .code-item .title p {margin-top: 15px;}
|
|
|
+</style>
|