添加演示

src/views/system/sku-manage.vue

@@ -197,11 +197,26 @@
             v-model="addcurrencyform.fontColor"
             size="small"></el-color-picker>
         </el-form-item>
-        <el-form-item label="背景色" prop="remark">
-          <el-color-picker
-            style="width: 164px"
-            v-model="addcurrencyform.bgColor"
-            size="small"></el-color-picker>
+        <el-form-item label="背景色" prop="bgColor">
+          <div style="display: flex;align-items: center">
+            <el-color-picker
+              v-model="addcurrencyform.bgColor"
+              size="small"></el-color-picker>
+            <span :style="{
+                width: '45px',
+                lineHeight:'20px',
+                marginLeft:'20px',
+                textAlign: 'center',
+                fontSize: '12px',
+                height: '20px',
+                display: 'inline-block' ,
+                backgroundColor:addcurrencyform.
+                bgColor,color:addcurrencyform.fontColor
+            }">
+            字色
+          </span>
+          </div>
+
         </el-form-item>
       </el-form>
       <span slot="footer" class="dialog-footer">
@@ -225,6 +240,7 @@
 <script>
 import axios from '../../common/api/axios'
 import MyTable from '@/common/components/base/tableView.vue'
+
 export default {
   name: 'system_sku-manage',
   components: {
@@ -256,7 +272,10 @@ export default {
         bgColor: ''
       },
       all_list: [],
-      addcurrencyform2: null,
+      addcurrencyform2: {
+        fontColor: 'black',
+        bgColor: 'white'
+      },
       formId: null,
       addrules: {},
       paginationOptions: {
@@ -272,15 +291,28 @@ export default {
   computed: {
     tableColumns() {
       return [
-        { label: '中文名', key: 'cnname' },
-        { label: '英文名', key: 'enname' },
-        { label: '编码', key: 'code' },
+        {
+          label: '中文名',
+          key: 'cnname'
+        },
+        {
+          label: '英文名',
+          key: 'enname'
+        },
+        {
+          label: '编码',
+          key: 'code'
+        },
         {
           label: '类别',
           key: 'cateName'
         },
 
-        { label: '排列序号', key: 'sort', width: 80 },
+        {
+          label: '排列序号',
+          key: 'sort',
+          width: 80
+        },
         {
           label: '是否带电池',
           key: 'battery',
@@ -296,20 +328,20 @@ export default {
           key: 'knife',
           render: (item) => <span>{item.knife ? '是' : '否'}</span>
         },
-        {
-          label: '文字色',
-          key: 'fontColor',
-          width: 80,
-          render: (item) => (
-            <span
-              style={{
-                width: '20px',
-                height: '20px',
-                display: 'inline-block',
-                backgroundColor: item.fontColor
-              }}></span>
-          )
-        },
+        // {
+        //   label: '文字色',
+        //   key: 'fontColor',
+        //   width: 80,
+        //   render: (item) => (
+        //     <span
+        //       style={{
+        //         width: '20px',
+        //         height: '20px',
+        //         display: 'inline-block',
+        //         backgroundColor: item.fontColor
+        //       }}></span>
+        //   )
+        // },
         {
           label: '背景色',
           key: 'bgColor',
@@ -317,11 +349,15 @@ export default {
           render: (item) => (
             <span
               style={{
-                width: '20px',
+                width: '45px',
+                color: item.fontColor,
+                fontSize: '12px',
                 height: '20px',
                 display: 'inline-block',
                 backgroundColor: item.bgColor
-              }}></span>
+              }}>
+              字色
+            </span>
           )
         },
         {
@@ -382,8 +418,11 @@ export default {
       this.getList()
     },
     currentTabFn(val) {
-      if (val) this.formId = val.id
-      else this.formId = null
+      if (val) {
+        this.formId = val.id
+      } else {
+        this.formId = null
+      }
     },
     selectionChange(selection) {
       this.selection = selection
@@ -401,18 +440,22 @@ export default {
           return this.$message('请勾选至少一条记录')
         }
         this.addcurrencyform = Object.assign({}, v)
+        if (this.$refs.addcurrencyform) {
+          this.$refs.addcurrencyform.resetFields()
+        }
       } else {
         this.$nextTick(() => {
-          this.addcurrencyform = JSON.parse(
-            JSON.stringify(this.addcurrencyform2)
-          )
+          if (this.$refs.addcurrencyform) {
+            this.$refs.addcurrencyform.resetFields()
+          }
+          this.addcurrencyform = {
+            fontColor: '#000000',
+            bgColor: '#ffffff'
+          }
         })
       }
       this.is_title = i
       this.dialogVisible = true
-      if (this.$refs.addcurrencyform) {
-        this.$refs.addcurrencyform.resetFields()
-      }
     },
     addCurrency() {
       // eslint-disable-next-line eqeqeq
@@ -451,7 +494,10 @@ export default {
     },
     // 查询
     getList() {
-      const { pageSize, currentPage } = this.paginationOptions
+      const {
+        pageSize,
+        currentPage
+      } = this.paginationOptions
       this.loading = true
       axios
         .get('base/propertyValue/list_page', {
@@ -550,8 +596,11 @@ export default {
     // 删除
     deleteSection(v) {
       let arr = []
-      if (v) arr.push(v)
-      else arr = this.selection
+      if (v) {
+        arr.push(v)
+      } else {
+        arr = this.selection
+      }
       const leng = arr.length
       // eslint-disable-next-line eqeqeq
       if (leng == 0) {
@@ -629,12 +678,14 @@ export default {
   border-radius: 5px;
   overflow: hidden;
 }
+
 .table-wrap {
   background: #fff;
   flex: 1;
   overflow: hidden;
   width: 100%;
 }
+
 .category-list-item-label {
   font-size: 14px;
   font-weight: bold;