新增：超管后台商城管理支持备注信息

src/utils/utils.less

@@ -5,7 +5,7 @@
   word-break: break-all;
 }
 
-.textOverflowMulti(@line: 3, @bg: #fff) {
+.textOverflowMulti(@line: 2, @bg: #fff) {
   position: relative;
   max-height: @line * 1.5em;
   margin-right: -1em;
@@ -34,8 +34,40 @@
   }
 }
 
-// mixins for clearfix
-// ------------------------
+// 文字超出隐藏(一行)
+// 需要设置文字容器的宽度
+.oneline-hide {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  word-break: break-all;
+}
+
+// 文字超出隐藏(两行)
+// 需要设置文字容器的宽度
+.twoline-hide {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  white-space: normal;
+}
+
+// 动画
+@keyframes fadenum {
+
+  /*设置内容由显示变为隐藏*/
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+
+/* 浮动 */
 .clearfix() {
   zoom: 1;
 
@@ -53,8 +85,63 @@
   }
 }
 
+.fl-l {
+  float: left;
+}
+
+.fl-r {
+  float: right;
+}
+
+/* flex布局 */
+.flex {
+  display: flex;
+}
+
+.flex-box {
+  flex: 1;
+}
+
+.flex-dir-row {
+  flex-direction: row;
+}
+
+.flex-dir-column {
+  flex-direction: column;
+}
+
+.flex-x-center {
+  justify-content: center;
+}
+
+.flex-x-between {
+  justify-content: space-between;
+}
+
+.flex-x-around {
+  justify-content: space-around;
+}
+
+.flex-x-end {
+  justify-content: flex-end;
+}
+
+.flex-y-center {
+  align-items: center;
+}
+
 /* 全局函数 */
 
+.hiden {
+  display: none;
+}
+
+// 手型指针
+.cur-p {
+  cursor: pointer;
+  user-select: none;
+}
+
 // 外边距
 .mt-5 {
   margin-top: 5px;
@@ -65,11 +152,11 @@
 }
 
 .mt-15 {
-  margin-top: 20px;
+  margin-top: 15px !important;
 }
 
 .mt-20 {
-  margin-top: 20px;
+  margin-top: 20px !important;
 }
 
 .mt-30 {
@@ -97,7 +184,7 @@
 }
 
 .mb-15 {
-  margin-bottom: 15px;
+  margin-bottom: 15px !important;
 }
 
 .mb-20 {
@@ -128,6 +215,14 @@
   margin-left: 15px;
 }
 
+.mr-2 {
+  margin-right: 2px;
+}
+
+.mr-3 {
+  margin-right: 3px;
+}
+
 .mr-5 {
   margin-right: 5px;
 }
@@ -158,16 +253,16 @@
   margin-right: 5px;
 }
 
+.mlr-6 {
+  margin-left: 6px;
+  margin-right: 6px;
+}
+
 .mtb-2 {
   margin-top: 2px;
   margin-bottom: 2px;
 }
 
-.mtb-10 {
-  margin-top: 10px !important;
-  margin-bottom: 10px !important;
-}
-
 // 文字颜色
 .c-p {
   color: @primary-color  !important;
@@ -186,6 +281,10 @@
 }
 
 // 字体大小
+.f-11 {
+  font-size: 11px;
+}
+
 .f-12 {
   font-size: 12px;
 }
@@ -198,6 +297,10 @@
   font-size: 14px;
 }
 
+.f-15 {
+  font-size: 15px;
+}
+
 .f-w-b {
   font-weight: bold;
 }
@@ -206,3 +309,8 @@
 .f-through {
   text-decoration: line-through;
 }
+
+// .ant-btn-primary {
+//   background-color: #d6893b;
+//   border-color: transparent;
+// }

src/views/store/index.vue

@@ -13,6 +13,18 @@
       showPagination="auto"
       :pageSize="15"
     >
+      <!-- 账户名 -->
+      <template slot="user_name" slot-scope="item">
+        <span>{{ item.superUser.user_name }}</span>
+      </template>
+      <!-- 备注信息 -->
+      <template slot="remark" slot-scope="text">
+        <a-tooltip>
+          <template v-if="text" slot="title">{{ text ? text : '--' }}</template>
+          <p class="twoline-hide" style="width: 150px;">{{ text ? text : '--' }}</p>
+        </a-tooltip>
+      </template>
+      <!-- 操作菜单 -->
       <span class="actions" slot="action" slot-scope="text, item">
         <a @click="handleInto(item)">进入商城</a>
         <a-dropdown>
@@ -64,11 +76,24 @@ export default {
       columns: [
         {
           title: '商城ID',
-          dataIndex: 'store_id'
+          dataIndex: 'store_id',
+          width: '120px'
         },
         {
           title: '商城名称',
-          dataIndex: 'store_name'
+          dataIndex: 'store_name',
+          width: '200px'
+        },
+        {
+          title: '账户名',
+          // dataIndex: 'user_name',
+          scopedSlots: { customRender: 'user_name' },
+          width: '180px'
+        },
+        {
+          title: '备注信息',
+          dataIndex: 'remark',
+          scopedSlots: { customRender: 'remark' }
         },
         {
           title: '排序',
@@ -86,12 +111,7 @@ export default {
         }
       ],
       // 加载数据方法 必须为 Promise 对象
-      loadData: param => {
-        return Api.list(Object.assign(param, this.queryParam))
-          .then(response => {
-            return response.data.list
-          })
-      }
+      loadData: param => Api.list(Object.assign(param, this.queryParam)).then(response => response.data.list)
     }
   },
   created () { },

src/views/store/modules/AccountForm.vue

@@ -33,10 +33,13 @@
             ] }]"
           />
         </a-form-item>
+        <a-form-item label="备注信息" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="仅超管后台可见">
+          <a-input v-decorator="['remark']" />
+        </a-form-item>
         <a-form-item label="排序" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="数字越小越靠前">
           <a-input-number
             :min="0"
-            v-decorator="['sort', {initialValue: 100, rules: [{required: true, message: '请输入至少1个数字'}]}]"
+            v-decorator="['sort', { initialValue: 100, rules: [{ required: true, message: '请输入至少1个数字' }] }]"
           />
         </a-form-item>
       </a-form>
@@ -75,12 +78,11 @@ export default {
 
     // 设置默认值
     setFieldsValue () {
-      this.$nextTick(() => {
-        this.form.setFieldsValue({
-          'sort': this.record['sort'],
-          'user_name': this.record['superUser']['user_name'],
-        })
-      })
+      this.$nextTick(() => this.form.setFieldsValue({
+        'remark': this.record['remark'],
+        'sort': this.record['sort'],
+        'user_name': this.record['superUser']['user_name'],
+      }))
     },
 
     // 确认按钮

src/views/store/modules/CreateForm.vue

@@ -37,6 +37,9 @@
             ]}]"
           />
         </a-form-item>
+        <a-form-item label="备注信息" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="仅超管后台可见">
+          <a-input v-decorator="['remark']" />
+        </a-form-item>
         <a-form-item label="排序" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="数字越小越靠前">
           <a-input-number
             :min="0"
@@ -56,13 +59,9 @@ export default {
   data () {
     return {
       // 标签布局属性
-      labelCol: {
-        span: 7
-      },
+      labelCol: { span: 7 },
       // 输入框布局属性
-      wrapperCol: {
-        span: 13
-      },
+      wrapperCol: { span: 13 },
       // modal(对话框)是否可见
       visible: false,
       // modal(对话框)确定按钮 loading
@@ -73,17 +72,13 @@ export default {
   },
   methods: {
 
-    /**
-     * 显示对话框
-     */
+    // 显示对话框
     show () {
       this.visible = true
       this.form.resetFields()
     },
 
-    /**
-     * 确认按钮
-     */
+    // 确认按钮
     handleSubmit () {
       const { form: { validateFields } } = this
       // 表单的验证
@@ -93,18 +88,14 @@ export default {
       })
     },
 
-    /**
-     * 关闭对话框
-     */
+    // 关闭对话框
     handleCancel () {
       this.visible = false
       // 重置表单内容
       this.form.resetFields()
     },
 
-    /**
-     * 验证确认密码是否一致
-     */
+    // 验证确认密码是否一致
     compareToFirstPassword (rule, value, callback) {
       const { form } = this
       if (value && value !== form.getFieldValue('password')) {
@@ -113,9 +104,7 @@ export default {
       return true
     },
 
-    /**
-    * 提交到后端api
-    */
+    // 提交到后端api
     onFormSubmit (values) {
       this.confirmLoading = true
       addApi({ form: values })
@@ -127,9 +116,7 @@ export default {
           // 通知父端组件提交完成了
           this.$emit('handleSubmit', values)
         })
-        .finally((result) => {
-          this.confirmLoading = false
-        })
+        .finally(result => this.confirmLoading = false)
     }
 
   }