新增：超管后台支持修改商户账号

src/api/api.config.js

@@ -20,6 +20,7 @@ export default {
     superLogin: 'store/superLogin',
     recycle: 'store/recycle',
     add: 'store/add',
+    edit: 'store/edit',
     recovery: 'store/recovery',
     delete: 'store/delete',
     move: 'store/move',

src/api/store.js

@@ -45,7 +45,19 @@ export function add (data) {
   return axios({
     url: api.store.add,
     method: 'post',
-    data: data
+    data
+  })
+}
+
+/**
+ * 编辑记录
+ * @param {*} data
+ */
+export function edit (data) {
+  return axios({
+    url: api.store.edit,
+    method: 'post',
+    data
   })
 }
 
@@ -57,7 +69,7 @@ export function recovery (data) {
   return axios({
     url: api.store.recovery,
     method: 'post',
-    data: data
+    data
   })
 }
 
@@ -69,7 +81,7 @@ export function del (data) {
   return axios({
     url: api.store.delete,
     method: 'post',
-    data: data
+    data
   })
 }
 
@@ -81,6 +93,6 @@ export function move (data) {
   return axios({
     url: api.store.move,
     method: 'post',
-    data: data
+    data
   })
 }

src/views/store/index.vue

@@ -15,11 +15,30 @@
     >
       <span class="actions" slot="action" slot-scope="text, item">
         <a @click="handleInto(item)">进入商城</a>
-        <a @click="handleDelete(item)">删除</a>
-        <!-- <a @click="handleModule(item)">功能模块</a> -->
+        <a-dropdown>
+          <a-menu slot="overlay">
+            <!-- <a-menu-item>
+              <a @click="handleModule(item)">功能模块</a>
+            </a-menu-item>-->
+            <a-menu-item>
+              <a @click="handleAccount(item)">修改账户</a>
+            </a-menu-item>
+            <!-- <a-menu-item>
+              <a @click="handleH5Domain(item)">H5域名绑定</a>
+            </a-menu-item>-->
+            <a-menu-item>
+              <a @click="handleDelete(item)">删除</a>
+            </a-menu-item>
+          </a-menu>
+          <a>
+            <span>更多</span>
+            <a-icon type="down" />
+          </a>
+        </a-dropdown>
       </span>
     </s-table>
     <create-form ref="createModal" @handleSubmit="handleRefresh" />
+    <AccountForm ref="AccountForm" @handleSubmit="handleRefresh" />
   </a-card>
 </template>
 
@@ -27,13 +46,15 @@
 import * as Api from '@/api/store'
 import { ContentHeader, STable } from '@/components'
 import CreateForm from './modules/CreateForm'
+import AccountForm from './modules/AccountForm'
 import { urlEncode } from '@/utils/util'
 
 export default {
   components: {
     ContentHeader,
     STable,
-    CreateForm
+    CreateForm,
+    AccountForm
   },
   data () {
     return {
@@ -73,13 +94,10 @@ export default {
       }
     }
   },
-  created () {
-  },
+  created () { },
   methods: {
 
-    /**
-     * 进入商城
-     */
+    // 进入商城
     handleInto (item) {
       if (process.env.NODE_ENV !== 'production') {
         this.$message.error('很抱歉，开发环境中不支持')
@@ -90,9 +108,7 @@ export default {
       window.open(url, '_blank')
     },
 
-    /**
-     * 删除记录
-     */
+    // 删除记录
     handleDelete (item) {
       const app = this
       app.$confirm({
@@ -106,9 +122,7 @@ export default {
       })
     },
 
-    /**
-     * 确认删除
-     */
+    // 确认删除
     onSubmitDelete (item) {
       return Api.recovery({ storeId: item['store_id'] })
         .then(result => {
@@ -117,15 +131,17 @@ export default {
         })
     },
 
-    // // 分配功能模块
+    // // 设置功能模块
     // handleModule (item) {
-    //   // 显示对话框
     //   this.$refs.ModuleForm.show(item)
     // },
 
-    /**
-     * 刷新列表
-     */
+    // 修改商家账户
+    handleAccount (item) {
+      this.$refs.AccountForm.show(item)
+    },
+
+    // 刷新列表
     handleRefresh () {
       this.$refs.table.refresh()
     }

src/views/store/modules/AccountForm.vue

@@ -0,0 +1,128 @@
+<template>
+  <a-modal
+    title="修改商家账户"
+    :width="720"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    :maskClosable="false"
+    @ok="handleSubmit"
+    @cancel="handleCancel"
+  >
+    <a-spin :spinning="confirmLoading">
+      <a-form :form="form">
+        <a-form-item label="商城名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <span>{{ record.store_name }}</span>
+        </a-form-item>
+        <a-form-item label="商家用户名" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="商家后台登录用户名">
+          <a-input
+            v-decorator="['user_name', { rules: [{ required: true, min: 4, message: '请输入至少4个字符' }] }]"
+          />
+        </a-form-item>
+        <a-form-item label="用户密码" :labelCol="labelCol" :wrapperCol="wrapperCol" extra="商家后台登录密码">
+          <a-input
+            type="password"
+            v-decorator="['password', { rules: [{ min: 6, message: '请输入至少6个字符' }] }]"
+          />
+        </a-form-item>
+        <a-form-item label="确认密码" :labelCol="labelCol" :wrapperCol="wrapperCol">
+          <a-input
+            type="password"
+            v-decorator="['password_confirm', { rules: [
+              { message: '请输入确认密码' },
+              { validator: compareToFirstPassword }
+            ] }]"
+          />
+        </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个数字'}]}]"
+          />
+        </a-form-item>
+      </a-form>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+import * as Api from '@/api/store'
+
+export default {
+  data () {
+    return {
+      // 标签布局属性
+      labelCol: { span: 7 },
+      // 输入框布局属性
+      wrapperCol: { span: 13 },
+      // modal(对话框)是否可见
+      visible: false,
+      // modal(对话框)确定按钮 loading
+      confirmLoading: false,
+      // 当前表单元素
+      form: this.$form.createForm(this),
+      // 当前商户信息
+      record: {},
+    }
+  },
+  methods: {
+
+    // 显示对话框
+    show (record) {
+      this.record = record
+      this.visible = true
+      this.setFieldsValue()
+    },
+
+    // 设置默认值
+    setFieldsValue () {
+      this.$nextTick(() => {
+        this.form.setFieldsValue({
+          'sort': this.record['sort'],
+          'user_name': this.record['superUser']['user_name'],
+        })
+      })
+    },
+
+    // 确认按钮
+    handleSubmit () {
+      const { form: { validateFields } } = this
+      // 表单的验证
+      validateFields((errors, values) => {
+        // 提交到后端api
+        !errors && this.onFormSubmit(values)
+      })
+    },
+
+    // 关闭对话框
+    handleCancel () {
+      this.visible = false
+      this.form.resetFields()
+    },
+
+    // 验证确认密码是否一致
+    compareToFirstPassword (rule, value, callback) {
+      const { form } = this
+      if (value && value !== form.getFieldValue('password')) {
+        return new Error('您输入的确认密码不一致')
+      }
+      return true
+    },
+
+    // 提交到后端api
+    onFormSubmit (values) {
+      this.confirmLoading = true
+      Api.edit({ storeId: this.record['store_id'], form: values })
+        .then(result => {
+          // 显示成功提示
+          this.$message.success(result.message, 1.2)
+          // 关闭对话框
+          this.handleCancel()
+          // 通知父端组件提交完成了
+          this.$emit('handleSubmit', values)
+        })
+        .finally(result => this.confirmLoading = false)
+    }
+
+  }
+}
+</script>