chenrui преди 4 години
родител
ревизия
02d8998c27

+ 20 - 0
src/api/dealer.js

@@ -0,0 +1,20 @@
+import { axios } from '@/utils/request'
+// 根据sn查找修改过后的经销商信息
+export const dealerFindUpdateInfoBySn = (params) => {
+  return axios({
+    url: `/dealer/findUpdateInfoBySn/${params.sn}`,
+    data: params,
+    method: 'get'
+  })
+}
+//  经销商列表有分页
+export const dealerQueryList = (params) => {
+  const url = `/dealer/queryPage/${params.pageNo}/${params.pageSize}`
+  delete params.pageNo
+  delete params.pageSize
+  return axios({
+    url: url,
+    data: params,
+    method: 'post'
+  })
+}

+ 47 - 0
src/api/linkageGroup.js

@@ -0,0 +1,47 @@
+import { axios } from '@/utils/request'
+
+//  连锁组 列表  分页
+export const linkageGroupList = (params) => {
+  const url = `/linkageGroup/queryPage/${params.pageNo}/${params.pageSize}`
+  delete params.pageNo
+  delete params.pageSize
+  return axios({
+    url: url,
+    data: params,
+    method: 'post'
+  })
+}
+//  连锁组 保存
+export const linkageGroupSave = (params) => {
+  return axios({
+    url: '/linkageGroup/save',
+    data: params,
+    method: 'post'
+  })
+}
+//  连锁组 详情
+export const linkageGroupDetail = (params) => {
+  const url = `/linkageGroup/queryDetail/${params.sn}`
+  return axios({
+    url: url,
+    data: params,
+    method: 'post'
+  })
+}
+//  连锁组 关联
+export const linkageGroupRelation = (params) => {
+  return axios({
+    url: '/linkageGroup/relation',
+    data: params,
+    method: 'post'
+  })
+}
+//  连锁组 取消关联
+export const linkageGroupUnRelation = (params) => {
+  const url = `/linkageGroup/unRelation/${params.sn}`
+  return axios({
+    url: url,
+    data: params,
+    method: 'post'
+  })
+}

+ 224 - 2
src/components/global.less

@@ -527,10 +527,232 @@ body {
 
 .content {
   .table-operator {
-    margin-bottom: 18px;
-
+    padding: 15px 0;
+    border-top: 1px solid #eee;
     button {
       margin-right: 8px;
     }
   }
+  .table-operator-nobor{
+    padding: 0 0 15px 0;
+    button {
+      margin-right: 8px;
+    }
+  }
+}
+
+/* 扩展ant design pro按钮组件颜色 */
+.ant-btn-primary.button-primary {
+  background-color: #39f;
+  border-color: #39f;
+  margin: 0 5px;
+  font-size: 12px;
+  &:hover, &:focus {
+    background-color: #52a6fb;
+    border-color: #52a6fb;
+  }
+ 
+  &:active, &.active {
+    background-color: #3d80bf;
+    border-color: #3d80bf;
+  }
+}
+ 
+.ant-btn-primary.button-info {
+  background-color: #2db7f5;
+  border-color: #2db7f5;
+  margin: 0 5px;
+  font-size: 12px;
+  &:hover, &:focus {
+    background-color: #32c8f5;
+    border-color: #32c8f5;
+  }
+ 
+  &:active, &.active {
+    background-color: #27a3d8;
+    border-color: #27a3d8;
+  }
+}
+ 
+.ant-btn-primary.button-success {
+  background-color: #0c6;
+  border-color: #0c6;
+  margin: 0 5px;
+  font-size: 12px;
+  &:hover, &:focus {
+    background-color: #01dc8c;
+    border-color: #01dc8c;
+  }
+ 
+  &:active, &.active {
+    background-color: #00af57;
+    border-color: #00af57;
+  }
+}
+ 
+.ant-btn-primary.button-warning {
+  background-color: #f90;
+  border-color: #f90;
+  margin: 0 5px;
+  font-size: 12px;
+  &:hover, &:focus {
+    background-color: #ffb60a;
+    border-color: #ffb60a;
+  }
+ 
+  &:active, &.active {
+    background-color: #dd8500;
+    border-color: #dd8500;
+  }
+}
+ 
+.ant-btn-primary.button-error {
+  background-color: #f30;
+  border-color: #f30;
+  margin: 0 5px;
+  font-size: 12px;
+  &:hover, &:focus {
+    background-color: #ff6666;
+    border-color: #ff6666;
+  }
+ 
+  &:active, &.active {
+    background-color: #d62a00;
+    border-color: #d62a00;
+  }
+}
+ 
+.ant-btn-primary.button-geekblue {
+  background-color: #2F54EB;
+  border-color: #2F54EB;
+  margin: 0 5px;
+  font-size: 12px;
+  &:hover, &:focus {
+    background-color: #1d39c4;
+    border-color: #1d39c4;
+  }
+ 
+  &:active, &.active {
+    background-color: #597ef7;
+    border-color: #597ef7;
+  }
+}
+ 
+.ant-btn-primary.button-purple {
+  background-color: #722ED1;
+  border-color: #722ED1;
+  margin: 0 5px;
+  font-size: 12px;
+  &:hover, &:focus {
+    background-color: #9254de;
+    border-color: #9254de;
+  }
+ 
+  &:active, &.active {
+    background-color: #531dab;
+    border-color: #531dab;
+  }
 }
+.ant-btn-primary.button-grey {
+  background-color: #82848a;
+  border-color: #82848a;
+  margin: 0 5px;
+  font-size: 12px;
+  &:hover, &:focus {
+    background-color: #909399;
+    border-color: #909399;
+  }
+ 
+  &:active, &.active {
+    background-color: #c8c9cc;
+    border-color: #c8c9cc;
+  }
+}
+
+// btn-link
+.ant-btn-link.button-primary {
+  color: #39f;
+  &:hover, &:focus {
+    color: #52a6fb;
+  }
+ 
+  &:active, &.active {
+    color: #3d80bf;
+  }
+}
+ 
+.ant-btn-link.button-info {
+  color: #2db7f5;
+  &:hover, &:focus {
+    color: #32c8f5;
+  }
+ 
+  &:active, &.active {
+    color: #27a3d8;
+  }
+}
+ 
+.ant-btn-link.button-success {
+  color: #0c6;
+  &:hover, &:focus {
+    color: #01dc8c;
+  }
+ 
+  &:active, &.active {
+    color: #00af57;
+  }
+}
+ 
+.ant-btn-link.button-warning {
+  color: #e89105;
+  &:hover, &:focus {
+    color: #ffb60a;
+  }
+ 
+  &:active, &.active {
+    color: #dd8500;
+  }
+}
+ 
+.ant-btn-link.button-error {
+  color: #f30;
+  &:hover, &:focus {
+    color: #ff6666;
+  }
+ 
+  &:active, &.active {
+    color: #d62a00;
+  }
+}
+ 
+.ant-btn-link.button-geekblue {
+  color: #2F54EB;
+  &:hover, &:focus {
+    color: #1d39c4;
+  }
+ 
+  &:active, &.active {
+    color: #597ef7;
+  }
+}
+ 
+.ant-btn-link.button-purple {
+  color: #722ED1;
+  &:hover, &:focus {
+    color: #9254de;
+  }
+ 
+  &:active, &.active {
+    color: #531dab;
+  }
+}
+.ant-btn-link.button-grey {
+  color: #82848a;
+  &:hover, &:focus {
+    color: #909399;
+  }
+ 
+  &:active, &.active {
+    color: #c8c9cc;
+  }
+}

+ 128 - 0
src/views/chainGroupManagement/chainGroupSetting/associateModal.vue

@@ -0,0 +1,128 @@
+<template>
+  <a-modal
+    centered
+    class="chainGroupAssociate-modal"
+    :footer="null"
+    :maskClosable="false"
+    title="关联分店"
+    v-model="isShow"
+    @cancle="isShow=false"
+    :width="800">
+    <!-- 操作按钮 -->
+    <div class="table-operator">
+      <a-button id="chainGroupAssociate-add" type="primary" class="button-error" @click="openStoreModal=true">新增分店</a-button>
+    </div>
+    <!-- 列表 -->
+    <a-table
+      class="sTable"
+      ref="table"
+      size="small"
+      :rowKey="(record) => record.id"
+      :columns="columns"
+      :dataSource="loadData"
+      :scroll="{ x: 910, y: 500 }"
+      bordered>
+      <!-- 操作 -->
+      <template slot="action" slot-scope="text, record">
+        <a-button
+          type="link"
+          class="button-error"
+          size="small"
+          icon="close"
+          :id="'chainGroupAssociate-delSubItem'+record.id"
+          @click.stop="handleDisassociate(record)">取消关联</a-button>
+      </template>
+    </a-table>
+    <!-- 新增关联分店 -->
+    <chain-group-store-modal :openModal="openStoreModal" @close="openStoreModal=false" />
+  </a-modal>
+</template>
+
+<script>
+// import { bindRelation } from '@/api/dealerRelation'
+import chainGroupStoreModal from './storeModal.vue'
+export default {
+  name: 'ChainGroupAssociateModal',
+  components: { chainGroupStoreModal },
+  props: {
+    openModal: { //  弹框显示状态
+      type: Boolean,
+      default: false
+    },
+    itemSn: {
+      type: [Number, String],
+      default: ''
+    },
+    nowData: {
+      type: Object,
+      default: null
+    }
+  },
+  data () {
+    return {
+      isShow: this.openModal, //  是否打开弹框
+      form: {},
+      rules: {},
+      formItemLayout: {
+        labelCol: { span: 6 },
+        wrapperCol: { span: 16 }
+      },
+      subDealerSn: '',
+      columns: [
+        { title: '序号', dataIndex: 'no', width: 80, align: 'center' },
+        { title: '连锁分店名称', dataIndex: 'createDate', width: 220, align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
+        { title: '负责人', dataIndex: 'name', align: 'center', width: 220, customRender: function (text) { return text || '--' }, ellipsis: true },
+        { title: '联系电话', dataIndex: 'code', width: 100, align: 'center', customRender: function (text) { return text || '--' } },
+        { title: '邮箱', dataIndex: 'origCode', width: 140, align: 'center', customRender: function (text) { return text || '--' } },
+        { title: '操作', scopedSlots: { customRender: 'action' }, width: 150, align: 'center', fixed: 'right' }
+      ],
+      // // 加载数据方法 必须为 Promise 对象
+      // loadData: parameter => {
+      //   return productList(Object.assign(parameter, this.queryParam)).then(res => {
+      //     const data = res.data
+      //     const no = (data.pageNo - 1) * data.pageSize
+      //     for (var i = 0; i < data.list.length; i++) {
+      //       data.list[i].no = no + i + 1
+      //     }
+      //     this.disabled = false
+      //     return data
+      //   })
+      // },
+      loadData: [],
+      openStoreModal: false
+    }
+  },
+  methods: {
+  },
+  watch: {
+    //  父页面传过来的弹框状态
+    openModal (newValue, oldValue) {
+      this.isShow = newValue
+    },
+    //  重定义的弹框状态
+    isShow (newValue, oldValue) {
+      if (!newValue) {
+        this.$emit('close')
+      } else {
+        console.log(this.nowData, '-------------nowData')
+      }
+    },
+    itemSn (newValue, oldValue) {
+      if (this.isShow && newValue) {
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less">
+  .chainGroupAssociate-modal{
+    .table-operator{
+      margin-bottom: 15px;
+    }
+    .btn-cont {
+      text-align: center;
+      margin: 35px 0 10px;
+    }
+  }
+</style>

+ 169 - 0
src/views/chainGroupManagement/chainGroupSetting/editModal.vue

@@ -0,0 +1,169 @@
+<template>
+  <a-modal
+    centered
+    class="chainGroupEdit-modal"
+    :footer="null"
+    :maskClosable="false"
+    :title="(itemId?'编辑':'新增')+'连锁组'"
+    v-model="isShow"
+    @cancle="isShow=false"
+    :width="800">
+    <!-- 表单 -->
+    <div>
+      <a-form-model
+        id="chainGroupEdit-form"
+        ref="ruleForm"
+        :model="form"
+        :rules="rules"
+        :label-col="formItemLayout.labelCol"
+        :wrapper-col="formItemLayout.wrapperCol"
+      >
+        <a-form-model-item label="连锁组名称" prop="linkageGroupName">
+          <a-input
+            id="chainGroupEdit-linkageGroupName"
+            :maxLength="30"
+            v-model="form.linkageGroupName"
+            placeholder="请输入连锁组名称(最多30个字符)"
+            allowClear />
+        </a-form-model-item>
+        <a-form-model-item label="负责人" prop="majorPersonName">
+          <a-input
+            id="chainGroupEdit-majorPersonName"
+            :maxLength="30"
+            v-model="form.majorPersonName"
+            placeholder="请输入负责人(最多30个字符)"
+            allowClear />
+        </a-form-model-item>
+        <a-form-model-item label="联系电话" prop="contactTel">
+          <a-input
+            id="chainGroupEdit-contactTel"
+            :maxLength="11"
+            v-model="form.contactTel"
+            placeholder="请输入联系电话(最多11个字符)"
+            allowClear />
+        </a-form-model-item>
+        <a-form-model-item label="邮箱" prop="email">
+          <a-input
+            id="chainGroupEdit-email"
+            :maxLength="60"
+            v-model="form.email"
+            placeholder="请输入邮箱(最多60个字符)"
+            allowClear />
+        </a-form-model-item>
+      </a-form-model>
+      <div class="btn-cont">
+        <a-button type="primary" id="chainGroupEdit-save" @click="handleSave">确定</a-button>
+        <a-button id="chainGroupEdit-back" @click="isShow = false" style="margin-left: 15px;">关闭</a-button>
+      </div>
+    </div>
+  </a-modal>
+</template>
+
+<script>
+import { linkageGroupSave } from '@/api/linkageGroup'
+export default {
+  name: 'ChainGroupEditModal',
+  props: {
+    openModal: { //  弹框显示状态
+      type: Boolean,
+      default: false
+    },
+    itemId: {
+      type: [Number, String],
+      default: ''
+    },
+    nowData: {
+      type: Object,
+      default: null
+    }
+  },
+  data () {
+    return {
+      isShow: this.openModal, //  是否打开弹框
+      form: {
+        linkageGroupName: '',
+        majorPersonName: '',
+        contactTel: '',
+        email: ''
+      },
+      rules: {
+        linkageGroupName: [
+          { required: true, message: '请输入连锁组名称', trigger: 'blur' }
+        ],
+        majorPersonName: [
+          { required: true, message: '请输入负责人', trigger: 'blur' }
+        ],
+        contactTel: [
+          { required: true, message: '请输入联系电话', trigger: 'blur' },
+          { pattern: /^[1][0-9]{10}$/, message: '请输入正确的手机号码!' }
+        ],
+        email: [
+          { required: true, message: '请输入邮箱', trigger: 'blur' },
+          { type: 'email', message: '请输入正确的邮箱' }
+        ]
+      },
+      formItemLayout: {
+        labelCol: { span: 5 },
+        wrapperCol: { span: 16 }
+      }
+    }
+  },
+  methods: {
+    //  保存
+    handleSave () {
+      const _this = this
+      _this.$refs.ruleForm.validate(valid => {
+        if (valid) {
+          const form = JSON.parse(JSON.stringify(_this.form))
+          form.id = _this.itemId ? _this.itemId : null
+          linkageGroupSave(form).then(res => {
+            if (res.status == 200) {
+              _this.$message.success(res.message)
+              _this.$emit('ok')
+              _this.isShow = false
+            }
+          })
+        } else {
+          return false
+        }
+      })
+    }
+  },
+  watch: {
+    //  父页面传过来的弹框状态
+    openModal (newValue, oldValue) {
+      this.isShow = newValue
+    },
+    //  重定义的弹框状态
+    isShow (newValue, oldValue) {
+      if (!newValue) {
+        this.$emit('close')
+        this.$refs.ruleForm.resetFields()
+      }
+    },
+    nowData: {
+      handler (newValue, oldValue) {
+        if (this.isShow && newValue) {
+          this.form.linkageGroupName = this.nowData.linkageGroupName
+          this.form.majorPersonName = this.nowData.majorPersonName
+          this.form.contactTel = this.nowData.contactTel
+          this.form.email = this.nowData.email
+        }
+      },
+      deep: true
+    }
+  }
+}
+</script>
+
+<style lang="less">
+  .chainGroupEdit-modal{
+    .ant-modal-body {
+      padding: 40px 40px 24px;
+    }
+    .btn-cont {
+      text-align: center;
+      margin: 35px 0 10px;
+    }
+  }
+</style>

+ 231 - 3
src/views/chainGroupManagement/chainGroupSetting/list.vue

@@ -1,8 +1,236 @@
 <template>
+  <a-card size="small" :bordered="false" class="chainGroupSetList-wrap">
+    <!-- 搜索条件 -->
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline" @keyup.enter.native="getList()">
+        <a-row :gutter="15">
+          <a-col :md="6" :sm="24">
+            <a-form-item label="连锁组名称">
+              <a-input id="chainGroupSetList-linkageGroupName" v-model.trim="queryParam.linkageGroupName" allowClear placeholder="请输入连锁组名称"/>
+            </a-form-item>
+          </a-col>
+          <a-col :md="6" :sm="24">
+            <a-form-item label="关联连锁店名称">
+              <a-input id="chainGroupSetList-dealerName" v-model.trim="queryParam.dealerName" allowClear placeholder="请输入关联连锁店名称"/>
+            </a-form-item>
+          </a-col>
+          <a-col :md="6" :sm="24">
+            <a-button style="margin-bottom: 18px;" type="primary" @click="getList()" :disabled="disabled" id="chainGroupSetList-refresh">查询</a-button>
+            <a-button style="margin: 0 0 18px 8px" @click="resetSearchForm()" :disabled="disabled" id="chainGroupSetList-reset">重置</a-button>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+    <!-- 操作按钮 -->
+    <div class="table-operator">
+      <a-button id="chainGroupSetList-add" type="primary" class="button-error" @click="openEditModal=true">新增</a-button>
+    </div>
+    <!-- 列表 -->
+    <a-table
+      class="sTable"
+      ref="table"
+      size="default"
+      :rowKey="(record) => record.linkageGroupSn"
+      :columns="columns"
+      :pagination="pagination"
+      :data-source="list"
+      @expand="expand"
+      @change="change"
+      :expandedRowKeys="expandedRowKeys"
+      :expandRowByClick="true"
+      :scroll="{ y: tableHeight }">
+      <span slot="expandIcon">
+        1
+      </span>
+      <!-- 操作 -->
+      <template slot="action" slot-scope="text, record">
+        <a-button
+          type="link"
+          class="button-success"
+          size="small"
+          icon="plus"
+          :id="'chainGroupSetList-addSubItem'+record.id"
+          @click.stop="handleAssociate(record)">关联分店</a-button>
+        <a-button
+          type="link"
+          class="button-info"
+          size="small"
+          icon="edit"
+          :id="'chainGroupSetList-addSubItem'+record.id"
+          @click.stop="handleEdit(record)">编辑</a-button>
+        <a-button
+          type="link"
+          class="button-error"
+          size="small"
+          icon="close"
+          :id="'chainGroupSetList-delSubItem'+record.id"
+          @click.stop="handleDisassociate(record)">取消关联</a-button>
+      </template>
+    </a-table>
+    <!-- 关联下级 -->
+    <associate-modal :openModal="openModal" :nowData="nowData" :itemSn="itemSn" @ok="addItemOk" @close="closeModal" />
+    <!-- 新增/编辑 -->
+    <chain-group-edit-modal :openModal="openEditModal" :nowData="nowData" :itemId="itemId" @ok="getList" @close="closeEditModal" />
+  </a-card>
 </template>
 
 <script>
+import { STable, VSelect } from '@/components'
+import associateModal from './associateModal.vue'
+import chainGroupEditModal from './editModal.vue'
+import { linkageGroupList, linkageGroupDetail, linkageGroupUnRelation } from '@/api/linkageGroup'
+export default {
+  components: { STable, VSelect, associateModal, chainGroupEditModal },
+  data () {
+    return {
+      tableHeight: 0,
+      formItemLayout: {
+        labelCol: { span: 6 },
+        wrapperCol: { span: 16 }
+      },
+      queryParam: {
+        linkageGroupName: '',
+        dealerName: ''
+      },
+      disabled: false, //  查询、重置按钮是否可操作
+      columns: [
+        { title: '序号', dataIndex: 'no' },
+        { title: '连锁组名称', dataIndex: 'linkageGroupName' },
+        { title: '操作', scopedSlots: { customRender: 'action' }, align: 'center' }
+      ],
+      expandedRowKeys: [],
+      list: [],
+      parameter: {
+        pageNo: 1,
+        pageSize: 10
+      },
+      pagination: {
+        total: 1,
+        current: 1,
+        showTotal: total => `共 ${total} 条记录 第 ${this.pagination.current} / ${Math.ceil(total / this.pagination.pageSize)} 页`,
+        showQuickJumper: true,
+        showSizeChanger: true,
+        pageSize: 10
+      },
+      openModal: false, //  新增编辑  弹框
+      nowData: null, //  当前记录数据
+      tabInd: '1', //  tabs选中项
+      dealerSn: [],
+      openEditModal: false,
+      itemId: '',
+      itemSn: ''
+    }
+  },
+  mounted () {
+    this.tableHeight = window.innerHeight - 380
+    this.getList()
+  },
+  methods: {
+    expand (expanded, record) {
+      this.nowData = record
+      this.expandedRowKeys = [] // 重置展开节点,只展开当前点击的节点(内部数据调用模板,无法做到同时几个内层表格数据直接缓存在页面)
+      if (expanded) {
+        this.getSubItem(record) // 获取表格内部数据
+      }
+    },
+    // 外层表格操作
+    change (pagination, filters, sorter) { // 对页面大小,筛选,排序等条件修改后重新查询数据
+      this.pagination = pagination
+      this.parameter.pageNo = pagination.current
+      this.parameter.pageSize = pagination.pageSize
+      this.getList()
+    },
+    // 获取子节点数据
+    getSubItem (record) {
+      record.children = []
+      linkageGroupDetail({ sn: record.linkageGroupSn }).then(res => {
+        if (res.status == 200 && res.data && res.data.length) {
+          record.children = res.data
+        } else {
+          record.children = this.nowData.children
+        }
+        if (record.children.length == 0) {
+          this.$message.info('暂无分店,请关联分店')
+        } else {
+          this.expandedRowKeys = [record.linkageGroupSn]
+        }
+      })
+    },
+    // 添加子机成功
+    addItemOk () {
+      this.getSubItem(this.nowData)
+    },
+    // 获取列表数据
+    getList () {
+      this.disabled = true
+      linkageGroupList(Object.assign(this.parameter, this.queryParam)).then(res => {
+        const data = res.data
+        this.pagination.total = Number(data.count)
+        this.pagination.current = data.pageNo
+        this.pagination.pageSize = data.pageSize
+        this.parameter.pageNo = data.pageNo
+        this.parameter.pageSize = data.pageSize
+        const no = (data.pageNo - 1) * data.pageSize
+        for (var i = 0; i < data.list.length; i++) {
+          data.list[i].no = no + i + 1
+          data.list[i].children = []
+        }
+        this.disabled = false
+        this.list = data.list
+      })
+    },
+    handleOk () {},
+    // 关闭  新增编辑 弹框
+    closeEditModal () {
+      this.itemId = ''
+      this.nowData = null
+      this.openEditModal = false
+    },
+    // 编辑连锁组
+    handleEdit (row) {
+      this.itemId = row.id
+      this.nowData = row
+      this.openEditModal = true
+    },
+    //  重置
+    resetSearchForm (flag) {
+      if (!flag) {
+        this.queryParam.linkageGroupName = ''
+        this.queryParam.dealerName = ''
+        this.parameter.pageNo = 1
+        this.parameter.pageSize = 10
+        this.expandedRowKeys = []
+      }
+      this.getList()
+    },
+    // 关联下级
+    handleAssociate (row) {
+      this.nowData = row
+      this.itemSn = row.linkageGroupSn
+      this.expandedRowKeys = [row.linkageGroupSn]
+      this.openModal = true
+    },
+    // 取消关联
+    handleDisassociate (row) {
+      const _this = this
+      _this.$confirm({
+        title: '提示',
+        content: '确认要解除关联的关系吗?',
+        centered: true,
+        onOk () {
+          linkageGroupUnRelation({ sn: row.linkageGroupSn }).then(res => {
+            if (res.status == 200) {
+              _this.$message.success(res.message)
+              _this.addItemOk()
+            }
+          })
+        }
+      })
+    },
+    //  关闭弹框
+    closeModal () {
+      this.openModal = false
+    }
+  }
+}
 </script>
-
-<style>
-</style>

+ 114 - 0
src/views/chainGroupManagement/chainGroupSetting/storeModal.vue

@@ -0,0 +1,114 @@
+<template>
+  <a-modal
+    centered
+    class="chainGroupStore-modal"
+    :footer="null"
+    :maskClosable="false"
+    title="新增连锁分店"
+    v-model="isShow"
+    @cancle="isShow=false"
+    :width="600">
+    <!-- 表单 -->
+    <div>
+      <a-form-model
+        id="chainGroupStore-form"
+        ref="ruleForm"
+        :model="form"
+        :rules="rules"
+        :label-col="formItemLayout.labelCol"
+        :wrapper-col="formItemLayout.wrapperCol"
+      >
+        <a-form-model-item label="商户名称" prop="linkageGroupName">
+          <custList ref="custList" id="chainGroupStore-linkageGroupName" @change="custChange"></custList>
+        </a-form-model-item>
+      </a-form-model>
+      <div class="btn-cont">
+        <a-button type="primary" id="chainGroupStore-save" @click="handleSave">确认关联</a-button>
+        <a-button id="chainGroupStore-back" @click="isShow = false" style="margin-left: 15px;">关闭</a-button>
+      </div>
+    </div>
+  </a-modal>
+</template>
+
+<script>
+import custList from '@/views/common/custList.vue'
+import { linkageGroupSave } from '@/api/linkageGroup'
+export default {
+  name: 'ChainGroupEditModal',
+  components: { custList },
+  props: {
+    openModal: { //  弹框显示状态
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      isShow: this.openModal, //  是否打开弹框
+      form: {
+        dealerSn: '',
+        linkageGroupSn: ''
+      },
+      rules: {
+        linkageGroupName: [
+          { required: true, message: '请输入商户名称', trigger: 'blur' }
+        ]
+      },
+      formItemLayout: {
+        labelCol: { span: 5 },
+        wrapperCol: { span: 16 }
+      }
+    }
+  },
+  methods: {
+    custChange (val) {
+      console.log('选中', val)
+      this.form.linkageGroupName = val.key
+    },
+    //  保存
+    handleSave () {
+      // const _this = this
+      // _this.$refs.ruleForm.validate(valid => {
+      //   if (valid) {
+      //     const form = JSON.parse(JSON.stringify(_this.form))
+      //     form.id = _this.itemId ? _this.itemId : null
+      //     linkageGroupSave(form).then(res => {
+      //       if (res.status == 200) {
+      //         _this.$message.success(res.message)
+      //         _this.$emit('ok')
+      //         _this.isShow = false
+      //       }
+      //     })
+      //   } else {
+      //     return false
+      //   }
+      // })
+    }
+  },
+  watch: {
+    //  父页面传过来的弹框状态
+    openModal (newValue, oldValue) {
+      this.isShow = newValue
+    },
+    //  重定义的弹框状态
+    isShow (newValue, oldValue) {
+      if (!newValue) {
+        this.$emit('close')
+        this.$refs.custList.resetForm()
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less">
+  .chainGroupStore-modal{
+    .ant-modal-body {
+      padding: 40px 40px 24px;
+    }
+    .btn-cont {
+      text-align: center;
+      margin: 35px 0 10px;
+    }
+  }
+</style>

+ 71 - 0
src/views/common/custList.vue

@@ -0,0 +1,71 @@
+<template>
+  <a-select
+    show-search
+    label-in-value
+    :value="dealerName"
+    placeholder="请输入名称搜索"
+    style="width: 100%"
+    :filter-option="false"
+    :not-found-content="fetching ? undefined : null"
+    @search="fetchUser"
+    @change="handleChange"
+  >
+    <a-spin v-if="fetching" slot="notFoundContent" size="small" />
+    <a-select-option v-for="item in data" :key="item.dealerSn" :value="item.dealerSn">
+      {{ item.dealerName }}
+    </a-select-option>
+  </a-select>
+</template>
+<script>
+import debounce from 'lodash/debounce'
+import { dealerQueryList, dealerFindUpdateInfoBySn } from '@/api/dealer'
+export default {
+  props: {
+  },
+  data () {
+    this.lastFetchId = 0
+    this.fetchUser = debounce(this.fetchUser, 800)
+    return {
+      data: [],
+      dealerName: [],
+      fetching: false
+    }
+  },
+  methods: {
+    fetchUser (dealerName) {
+      console.log('fetching user', dealerName)
+      if (dealerName == '') return
+      this.lastFetchId += 1
+      const fetchId = this.lastFetchId
+      this.data = []
+      this.fetching = true
+      console.log('------请求前')
+      dealerQueryList({ 'nameLike': dealerName, pageNo: 1, pageSize: 20 }).then(res => {
+        if (fetchId !== this.lastFetchId) {
+          return
+        }
+        this.data = res.data.list || []
+        console.log('------请求后')
+        this.fetching = false
+      })
+    },
+    handleChange (value) {
+      Object.assign(this, {
+        dealerName: value,
+        data: [],
+        fetching: false
+      })
+      this.$emit('change', value)
+    },
+    resetForm () {
+      this.dealerName = []
+    },
+    // 查询详细
+    getDetail (sn) {
+      dealerFindUpdateInfoBySn({ sn: sn }).then(res => {
+        this.$emit('dealerDetail', res.data || null)
+      })
+    }
+  }
+}
+</script>

+ 0 - 54
src/views/common/editInput.js

@@ -1,54 +0,0 @@
-const EditableCell = {
-  template: `
-      <div style="display:flex;align-items: center;">
-        <div class="editable-cell-input-wrapper">
-          <a-input-number 
-          size="small" 
-          :min="0.1" 
-          :max="100000" 
-          :value="value" 
-          :precision="precision"
-          :step="step"
-          @change="handleChange" 
-          @pressEnter="check"/>
-        </div>
-        <a-icon
-          type="check"
-          slot="suffix"
-          :style="{color: editable?'#08c':'#666', marginLeft: '10px' }"
-          @click="check"
-        />
-      </div>
-    `,
-  props: {
-    text: Number,
-    precision: {
-      type: [Number],
-      default: 2
-    },
-    step: {
-      type: [Number],
-      default: 1
-    }
-  },
-  data() {
-    return {
-      value: this.text,
-      editable: false,
-    };
-  },
-  methods: {
-    handleChange(value) {
-      this.value = value;
-      this.editable = true
-    },
-    check() {
-      if(this.editable){
-        this.editable = false;
-        this.$emit('change', this.value);
-      }
-    },
-  },
-};
-
-export default EditableCell