商城列表

src/api/store.js

@@ -1,5 +1,16 @@
 import api from './api.config'
 import { axios } from '@/utils/request'
+/**
+ * 商城记录编辑
+ * @param {*} data
+ */
+export function storeEdit (data) {
+  return axios({
+    url: 'store/edit',
+    method: 'post',
+    data: data
+  })
+}
 /**
  * 获取列表
  * @param {*} params

src/views/store/index.vue

@@ -12,6 +12,9 @@
       :data="loadData"
       :pagination="pagination"
     >
+    <span slot="is_sync_cate" slot-scope="text, item">
+        {{ item.is_sync_cate == 1 ? '是' : '否' }}
+      </span>
       <span slot="is_provider_data" slot-scope="text, item">
         {{ item.is_provider_data == 1 ? '是' : '否' }}
       </span>
@@ -20,6 +23,7 @@
         <a @click="handleInto(item)">进入商城</a>
         <a @click="handleDelete(item)">删除</a>
         <a @click="handleModule(item)">功能模块</a>
+        <a @click="handleEdit(item)">编辑</a>
       </span>
     </s-table>
     <create-form ref="createModal" @handleSubmit="handleRefresh" />
@@ -37,6 +41,7 @@
         </a-checkbox-group>
       </div>
     </a-modal>
+    <edit-form ref="EditForm"  @handleSubmit="handleRefresh" />
   </a-card>
 </template>
 
@@ -46,13 +51,14 @@ import { ContentHeader, STable } from '@/components'
 import CreateForm from './modules/CreateForm'
 import ModuleForm from './modules/ModuleForm'
 import { urlEncode } from '@/utils/util'
-
+import EditForm from './modules/EditForm'
 export default {
   components: {
     ContentHeader,
     STable,
     CreateForm,
-    ModuleForm
+    ModuleForm,
+    EditForm
   },
   data () {
     return {
@@ -72,6 +78,11 @@ export default {
           title: '商城版本',
           dataIndex: 'store_version'
         },
+        {
+          title: '是否同步分类',
+          dataIndex: 'is_sync_cate',
+          scopedSlots: { customRender: 'is_sync_cate' }
+        },
         {
           title: '是否数据服务商',
           dataIndex: 'is_provider_data',
@@ -109,6 +120,18 @@ export default {
     this.getDataList()
   },
   methods: {
+       /**
+     * 刷新列表
+     */
+     handleRefresh () {
+      this.getListData()
+    },
+      /**
+     * 编辑菜单
+     */
+     handleEdit (item) {
+      this.$refs.EditForm.show(item)
+    },
     /**
      * 进入商城
      */

src/views/store/modules/EditForm.vue

@@ -0,0 +1,139 @@
+<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"
+        >
+          <a-radio-group
+            v-decorator="['is_sync_cate', { initialValue: 1, rules: [{ required: true }] }]"
+          >
+            <a-radio :value="1">是</a-radio>
+            <a-radio :value="0">否</a-radio>
+          </a-radio-group>
+        </a-form-item>
+        <a-form-item
+          label="是否数据服务商"
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+        >
+          <a-radio-group
+            v-decorator="['is_provider_data', { initialValue: 1, rules: [{ required: true }] }]"
+          >
+            <a-radio :value="1">是</a-radio>
+            <a-radio :value="0">否</a-radio>
+          </a-radio-group>
+        </a-form-item>
+      </a-form>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+import pick from 'lodash.pick'
+import * as Api from '@/api/store'
+
+export default {
+  props: {},
+  data () {
+    return {
+      // 标签布局属性
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 7 }
+      },
+      // 输入框布局属性
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 13 }
+      },
+      // modal(对话框)是否可见
+      visible: false,
+      // modal(对话框)确定按钮 loading
+      confirmLoading: false,
+      // 当前表单
+      form: this.$form.createForm(this),
+      // 当前菜单记录
+      record: {},
+    }
+  },
+  created () {
+
+  },
+  methods: {
+
+    /**
+     * 显示对话框
+     */
+    async show (record) {
+      // 显示窗口
+      this.visible = true
+      // 设置默认值
+      this.record=record
+      this.setFieldsValue()
+    },
+
+    /**
+     * 设置默认值
+     */
+    setFieldsValue () {
+      this.$nextTick(() => {
+        this.form.setFieldsValue(pick(this.record, ['is_sync_cate',  'is_provider_data']))
+      })
+    },
+    /**
+     * 确认按钮
+     */
+    handleSubmit () {
+      const { form: { validateFields } } = this
+      this.confirmLoading = true
+      // 表单的验证
+      validateFields((errors, values) => {
+        if (!errors) {
+          // 提交到后端api
+          this.onFormSubmit(values)
+        } else {
+          this.confirmLoading = false
+        }
+      })
+    },
+
+    /**
+     * 取消按钮
+     */
+    handleCancel () {
+      this.visible = false
+      this.form.resetFields()
+    },
+
+    /**
+    * 提交到后端api
+    */
+    onFormSubmit (values) {
+      Api.storeEdit({store_id: this.record['store_id'],form: values })
+        .then((result) => {
+          // 显示成功
+          this.$message.success(result.message)
+          // 关闭对话框
+          this.handleCancel()
+          // 通知父端组件提交完成了
+          this.$emit('handleSubmit', values)
+        })
+        .finally((result) => {
+          this.confirmLoading = false
+        })
+    }
+
+  }
+}
+</script>