Browse Source

Signed-off-by: 1004749546@qq.com <1004749546@qq.com>
租户管理 方案提交

1004749546@qq.com 4 years ago
parent
commit
3d2f357c59

+ 19 - 0
src/config/router.config.js

@@ -67,6 +67,25 @@ export const asyncRouterMap = [{
       }
       }
     }]
     }]
   },
   },
+  // 考评方案管理
+  {
+	  path: '/evaluationPlan',
+	  redirect: '/evaluationPlan/list',
+	  component: PageView,
+	  meta: {
+	    title: '考评方案管理',
+	    icon: 'team'
+	  },
+	  children: [{
+	    path: '/evaluationPlan/list',
+	    name: 'EvaluationPlanList',
+	    component: () => import(/* webpackChunkName: "tenants" */ '@/views/evaluationPlan/EvaluationPlanList.vue'),
+	    meta: {
+	      title: '考评方案管理列表',
+	      icon: 'team'
+	    }
+	  }]
+  },
   // 业务 设置setting
   // 业务 设置setting
   {
   {
     path: '/bnSetting',
     path: '/bnSetting',

+ 233 - 0
src/views/evaluationPlan/AddEvaModal.vue

@@ -0,0 +1,233 @@
+<template>
+  <div>
+    <a-modal class="modalBox" :title="titleText" v-model="isshow" @cancle="cancel" :width="600">
+      <a-form :form="form" ref="form" @submit="handleSubmit">
+        <a-row :gutter="24">
+          <a-col :span="20">
+            <!-- 考评方案名称 -->
+            <a-form-item label="考评方案名称:" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
+              <a-input
+                allowClear
+                :maxLength="128"
+                v-decorator="[
+                  'formData.name',
+                  { initialValue: formData.name,
+                    rules: [{ required: true, message: '请输入考评方案名称!' }] },
+                ]"
+                placeholder="请输入考评方案名称" />
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <a-row :gutter="24">
+          <a-col :span="20">
+            <!-- 适用模式 -->
+            <a-form-item label="适用模式:" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
+              <v-select
+                ref="orgType"
+                allowClear
+                @change="scopeTypeChange"
+                v-decorator="[
+                  'formData.scopeType',
+                  { initialValue: formData.scopeType,
+                    rules: [{ required: true, message: '请选择适用模式!' }] },
+                ]"
+                code="STORE_AUTH_TYPE"></v-select>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="24">
+          <a-col :span="20">
+            <!-- 考评方案说明 -->
+            <a-form-item label="考评方案说明:" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
+              <a-input
+                allowClear
+                :maxLength="512"
+                Input.TextArea
+                :autosize="{minRows:2}"
+                v-decorator="[
+                  'formData.remarks',
+                  { initialValue: formData.remarks },
+                ]"
+                placeholder="请输入考评方案名称" />
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-form-item :wrapper-col="{ span: 24, offset: 10 }">
+          <a-button type="primary" @click="handleSubmit()">
+            确定
+          </a-button>
+          <a-button :style="{ marginLeft: '8px' }" @click="handleCancel()">
+            取消
+          </a-button>
+        </a-form-item>
+      </a-form>
+
+    </a-modal>
+  </div>
+</template>
+
+<script>
+import {
+  STable,
+  VSelect
+} from '@/components'
+import {
+  saveAuth
+} from '@/api/tenants.js'
+export default {
+  name: 'TenantsModal',
+  components: {
+    STable,
+    VSelect
+  },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    // 要编辑的租户id
+    itemId: {
+      type: [String, Number],
+      default: ''
+    }
+  },
+  watch: {
+    visible (newValue, oldValue) {
+      this.isshow = newValue
+    },
+    isshow (newValue, oldValue) {
+      if (newValue) {
+
+      } else {
+        this.cancel()
+      }
+    }
+  },
+  data () {
+    return {
+      isshow: this.visible,
+      form: this.$form.createForm(this, {
+        name: 'tenantsModal'
+      }),
+      formData: {
+        name: '', // 方案名称
+        scopeType: '', // 适用类型
+        remarks: '' // 方案说明
+      }
+
+    }
+  },
+  computed: {
+    titleText () {
+      return this.itemId ? '编辑' : '新增'
+    }
+  },
+  methods: {
+    cancel (e) {
+      this.clear()
+      this.$emit('close')
+    },
+    // 有效期改变
+    expireDateChange (v) {
+      console.log(v)
+      this.form.setFields({
+        'formData.expireDate': {
+          value: v,
+          errors: ''
+        }
+      })
+    },
+    // 使用权限改变
+    scopeTypeChange (v) {
+      this.formData.scopeType = v
+    },
+    // 启用状态切换
+    onStatusChange (v) {
+      console.log(v, 'vvvvvvvvvv')
+    },
+    // 快捷时间处理
+    timeFilter (time) {
+      const now = moment().add(time, 'day').format('YYYY-MM-DD')
+      this.form.setFields({
+        'formData.expireDate': {
+          value: moment(now, 'YYYY-MM-DD'),
+          errors: ''
+        }
+      })
+    },
+
+    // 保存提交
+    handleSubmit () {
+      const _this = this
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          console.log(values.formData, ' formData.type222222222')
+          // const params = Object.assign({
+          //   id: this.itemData.id
+          // }, values.formData)
+          // params.expireDate = moment(params.expireDate).format('YYYY-MM-DD')
+          // console.log(params, 'ppppppppppppp')
+          // saveAuth(params).then(res => {
+          //   console.log(res, 'res--save')
+          //   if (res.status + '' === '200') {
+          //     this.$message.success(res.message ? res.message : '保存成功')
+          //     this.$emit('refresh')
+          //     setTimeout(function () {
+          //       _this.cancel()
+          //     }, 300)
+          //   } else {
+          //     // this.$message.warning(res.message)
+          //   }
+          // })
+        }
+      })
+    },
+    // 取消
+    handleCancel () {
+      const _this = this
+      this.$confirm({
+        title: '提示',
+        content: '确定取消吗?',
+        okText: '确定',
+        cancelText: '取消',
+        onOk () {
+          _this.clear()
+          _this.cancel()
+        }
+      })
+    },
+    clear () {
+      this.form.resetFields()
+    }
+
+  },
+  beforeCreate () {
+    this.form = this.$form.createForm(this, {
+      name: 'tenantsModal'
+    })
+  }
+
+}
+</script>
+
+<style>
+	.modalBox {}
+
+	.ant-modal-footer {
+		display: none;
+	}
+
+	.time-text {
+		color: #1890FF;
+		padding: 0px 20px;
+		cursor: pointer;
+	}
+
+	.labelT {
+		position: absolute;
+		left: -135px;
+		top: 20px;
+		color: rgba(0, 0, 0, 0.85);
+	}
+</style>

+ 267 - 0
src/views/evaluationPlan/EvaluationPlanList.vue

@@ -0,0 +1,267 @@
+<template>
+  <a-card :bordered="false">
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline">
+        <a-row :gutter="48">
+          <a-col :span="6">
+            <a-form-item label="方案名称">
+              <a-input allowClear v-model.trim="queryParam.name" placeholder="请输入企业名称" />
+            </a-form-item>
+          </a-col>
+          <a-col :span="6">
+            <a-form-item label="启用状态">
+              <v-select ref="status" allowClear placeholder="状态" v-model="queryParam.status" code="CHECK_ENABLE_STATE"></v-select>
+            </a-form-item>
+          </a-col>
+          <a-col :span="6">
+            <a-button type="primary" style="margin-right: 10px;" @click="$refs.table.refresh(true)">查询</a-button>
+            <a-button type="" @click="reset">重置</a-button>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+    <a-divider />
+    <div class="table-operator">
+      <a-button type="primary" icon="plus" @click="openModal">新建</a-button>
+    </div>
+    <s-table
+      ref="table"
+      size="default"
+      :rowKey="(record) => record.id"
+      :columns="columns"
+      :data="loadData"
+      bordered>
+      <!-- 操作 -->
+      <template slot="action" slot-scope="text, record">
+        <a-icon type="edit" class="actionBtn blue" v-if="record.status == '0'" @click="openModal(record)" />
+        <a-icon type="delete" class="actionBtn red" v-if="record.status == '0'" @click="delect(record)" />
+        <a-icon type="setting" class="actionBtn orange" @click="delect(record)" />
+      </template>
+      <!-- 启用禁用 -->
+      <template slot="enable" slot-scope="text, row">
+        <a-switch checkedChildren="已启用" unCheckedChildren="已禁用" v-model="row.status" @change="changeFlagHandle(text, row)"/>
+      </template>
+    </s-table>
+    <!-- 新增/编辑 弹窗 -->
+    <add-evaModal :itemId="itemId" :visible="openTenantsModal" @refresh="$refs.table.refresh()" @close="openTenantsModal=false"></add-evaModal>
+  </a-card>
+
+</template>
+
+<script>
+import {
+  STable,
+  VSelect
+} from '@/components'
+import {
+  getTenantsList,
+  enable
+} from '@/api/tenants.js'
+import addEvaModal from './AddEvaModal.vue'
+import moment from 'moment'
+export default {
+  name: 'EvaluationPlanList',
+  components: {
+    STable,
+    VSelect,
+    addEvaModal
+  },
+  data () {
+    return {
+      moment,
+      pageNo: 1,
+      pageSize: 10,
+      openTenantsModal: false, // 打开授权弹窗
+      itemId: '', // 要编辑的租户id
+      // 查询参数
+      queryParam: {
+        name: '',
+        contactPhone: '',
+        status: '' // 状态
+      },
+      // 表头
+      columns: [{
+        title: '序号',
+        dataIndex: 'no',
+        width: '40',
+        align: 'center'
+      },
+      {
+        title: '考评方案名称',
+        dataIndex: 'name',
+        align: 'center'
+      },
+      {
+        title: '考评方案说明',
+        dataIndex: 'orgType',
+        width: '120',
+        align: 'center'
+      },
+      {
+        title: '适用模式',
+        width: '120',
+        align: 'center',
+        dataIndex: 'contactPhone'
+      },
+      {
+        title: '状态',
+        width: '200',
+        align: 'center',
+        dataIndex: 'status',
+        scopedSlots: {
+          customRender: 'enable'
+        }
+      },
+      {
+        title: '操作',
+        width: '200',
+        align: 'center',
+        scopedSlots: {
+          customRender: 'action'
+        }
+      }
+      ],
+      // 加载数据方法 必须为 Promise 对象
+      loadData: parameter => {
+        return getTenantsList(Object.assign(parameter, this.queryParam)).then(res => {
+          if (res.status == 200) {
+            const no = (res.data.pageNo - 1) * res.data.pageSize
+            for (let i = 0; i < res.data.list.length; i++) {
+              const _item = res.data.list[i]
+              _item.no = no + i + 1
+              _item.status = _item.status + '' === '1'
+            }
+            return res.data
+          }
+        })
+      }
+    }
+  },
+  beforeRouteEnter (to, from, next) {
+    next(vm => {
+      vm.$refs.table.refresh()
+    })
+  },
+  methods: {
+    // 地址拼接
+    getAddr (row) {
+      const provinceName = row.provinceName ? row.provinceName : ''
+      const cityName = row.cityName ? row.cityName : ''
+      const districtName = row.districtName ? row.districtName : ''
+      const addrDetail = row.addrDetail ? row.addrDetail : ''
+      if (provinceName === cityName) {
+        return cityName + districtName + addrDetail
+      }
+      return provinceName + cityName + districtName + addrDetail
+    },
+    // 修改状态
+    changeFlagHandle (text, record) {
+      const _data = {
+        id: record.id,
+        status: record.status ? '1' : '0'
+      }
+      if (!record.expireDate && _data.status == '1') {
+        this.$message.success('请确认授权设置无误并点击【确定】后,再进行启用!')
+        record.status = !record.status
+      } else {
+        enable(_data).then(res => {
+          console.log(res.status)
+          if (res.status == '200') {
+            this.$message.success('修改成功')
+            this.$refs.table.refresh()
+          } else {
+            record.status = !record.status
+          }
+        })
+      }
+    },
+    // 打开授权弹窗
+    openModal (row) {
+      this.itemId = row ? row.id : ''
+      this.openTenantsModal = true
+    },
+    // 删除
+    delect (row) {
+      const _this = this
+      this.$confirm({
+        title: '警告',
+        content: '删除后无法恢复,确认删除?',
+        okText: '确定',
+        cancelText: '取消',
+        onOk () {
+          // deleteItem({
+          // 	id: row.id
+          // }).then(res => {
+          // 	if (res.status == 200) {
+          // 		_this.$message.success('删除成功')
+          // 		_this.$refs.table.refresh()
+          // 	}
+          // })
+        }
+      })
+    },
+    // 重置
+    reset () {
+      this.queryParam = {
+        name: '',
+        contactPhone: '',
+        status: '' // 状态
+      }
+      this.$refs.table.refresh()
+    }
+  }
+}
+</script>
+<style>
+	.table-page-search-wrapper,
+	.addButton {
+		margin-bottom: 0;
+	}
+
+	.table-page-search-wrapper .ant-form-inline .ant-form-item {
+		margin-bottom: 10px;
+	}
+
+	.textCount {
+		border: 1px solid #91d5ff;
+		background-color: #e6f7ff;
+		padding: 10px 0;
+		border-radius: 5px;
+		padding-left: 20px;
+		margin: 10px 0;
+	}
+
+	.action-button {
+		line-height: 40px;
+		white-space: nowrap;
+		padding: 5px 10px;
+		background-color: #1890ff;
+		border-radius: 4px;
+		color: #fff;
+		margin-right: 5px;
+	}
+
+	.menu-text {
+		background-color: #f90;
+	}
+
+	.actionBtn {
+		font-size: 20px;
+		padding: 0 10px;
+	}
+
+	.blue {
+		color: #1890FF;
+	}
+
+	.green {
+		color: #16b50e;
+	}
+
+	.red {
+		color: red;
+	}
+	.orange {
+		color: #ffaa00;
+	}
+</style>

+ 150 - 151
src/views/tenants/tenantsList.vue

@@ -4,18 +4,18 @@
       <a-form layout="inline">
       <a-form layout="inline">
         <a-row :gutter="48">
         <a-row :gutter="48">
           <a-col :span="6">
           <a-col :span="6">
-            <a-form-item label="企业名称" >
-              <a-input allowClear v-model.trim="queryParam.name" placeholder="请输入企业名称"/>
+            <a-form-item label="企业名称">
+              <a-input allowClear v-model.trim="queryParam.name" placeholder="请输入企业名称" />
             </a-form-item>
             </a-form-item>
           </a-col>
           </a-col>
           <a-col :span="6">
           <a-col :span="6">
-            <a-form-item label="申请人手机" >
-              <a-input allowClear v-model.trim="queryParam.contactPhone" placeholder="请输入申请人手机"/>
+            <a-form-item label="负责人手机">
+              <a-input allowClear v-model.trim="queryParam.contactPhone" placeholder="请输入申请人手机" />
             </a-form-item>
             </a-form-item>
           </a-col>
           </a-col>
           <a-col :span="6">
           <a-col :span="6">
-            <a-form-item label="推荐人手机" >
-              <a-input allowClear v-model.trim="queryParam.introPhone" placeholder="请输入推荐人手机"/>
+            <a-form-item label="启用状态">
+              <v-select ref="status" allowClear placeholder="状态" v-model="queryParam.status" code="CHECK_ENABLE_STATE"></v-select>
             </a-form-item>
             </a-form-item>
           </a-col>
           </a-col>
           <a-col :span="6">
           <a-col :span="6">
@@ -23,73 +23,52 @@
             <a-button type="" @click="reset">重置</a-button>
             <a-button type="" @click="reset">重置</a-button>
           </a-col>
           </a-col>
         </a-row>
         </a-row>
-        <a-row :gutter="48">
-          <a-col :span="6">
-            <a-form-item label="是否有推荐人" >
-              <a-select
-                allowClear
-                v-model="queryParam.applyType"
-                placeholder="是否有推荐人"
-              >
-                <a-select-option :value="1">
-                  是
-                </a-select-option>
-                <a-select-option :value="0">
-                  否
-                </a-select-option>
-              </a-select>
-              <!-- <v-select ref="applyType" allowClear placeholder="是否有推荐人" v-model="queryParam.applyType" code="FLAG"></v-select> -->
-            </a-form-item>
-          </a-col>
-          <a-col :span="6">
-            <a-form-item label="状态" >
-              <v-select ref="status" allowClear placeholder="状态" v-model="queryParam.status" code="CHECK_ENABLE_STATE"></v-select>
-            </a-form-item>
-          </a-col>
-        </a-row>
-        <v-select v-show="false" ref="orgType" allowClear code="ORG_TYPE"></v-select>
       </a-form>
       </a-form>
     </div>
     </div>
+    <a-divider />
+    <div class="table-operator">
+      <a-button type="primary" icon="plus" @click="openModal">新建</a-button>
+    </div>
     <s-table
     <s-table
       ref="table"
       ref="table"
       size="default"
       size="default"
       :rowKey="(record) => record.id"
       :rowKey="(record) => record.id"
       :columns="columns"
       :columns="columns"
       :data="loadData"
       :data="loadData"
-      bordered
-    >
+      bordered>
       <!-- 操作 -->
       <!-- 操作 -->
-      <template slot="action" slot-scope="text, row">
-        <a size="small" class="action-button menu-text" @click="openModal(row)" type="primary" >授权</a>
+      <template slot="action" slot-scope="text, record">
+        <a-icon type="edit" class="actionBtn blue" @click="openModal(record)" />
+        <a-icon type="delete" class="actionBtn red" v-if="record.status == '0'" @click="delect(record)" />
       </template>
       </template>
       <!-- 启用禁用 -->
       <!-- 启用禁用 -->
       <template slot="enable" slot-scope="text, row">
       <template slot="enable" slot-scope="text, row">
-        <a-switch checkedChildren="已启用" unCheckedChildren="已禁用" v-model="row.status" @change="changeFlagHandle(text, row)"/>
-      </template>
-      <!-- 门店类型 -->
-      <template slot="orgType" slot-scope="text, row">
-        {{ $refs.orgType.getNameByCode(text) }}
-      </template>
-      <!-- 地址 -->
-      <template slot="address" slot-scope="text, row">
-        {{ getAddr(row) }}
+        <span :class="[text==1 ? 'green' : 'red']">{{ text==1 ? '已启用' : '已禁用' }}</span>
       </template>
       </template>
     </s-table>
     </s-table>
-    <!-- 授权弹窗 -->
-    <tenantsModal :itemData="itemData" :visible="openTenantsModal" @refresh="$refs.table.refresh()" @close="openTenantsModal=false"></tenantsModal>
+    <!-- 新增/编辑 弹窗 -->
+    <tenantsModal :itemId="itemId" :visible="openTenantsModal" @refresh="$refs.table.refresh()" @close="openTenantsModal=false"></tenantsModal>
   </a-card>
   </a-card>
 
 
 </template>
 </template>
 
 
 <script>
 <script>
-import { STable, VSelect } from '@/components'
-import { getTenantsList, enable } from '@/api/tenants.js'
+import {
+  STable,
+  VSelect
+} from '@/components'
+import {
+  getTenantsList,
+  enable
+} from '@/api/tenants.js'
 import tenantsModal from './tenantsModal.vue'
 import tenantsModal from './tenantsModal.vue'
 import moment from 'moment'
 import moment from 'moment'
 export default {
 export default {
   name: 'TenantsList',
   name: 'TenantsList',
   components: {
   components: {
-    STable, VSelect, tenantsModal
+    STable,
+    VSelect,
+    tenantsModal
   },
   },
   data () {
   data () {
     return {
     return {
@@ -97,86 +76,66 @@ export default {
       pageNo: 1,
       pageNo: 1,
       pageSize: 10,
       pageSize: 10,
       openTenantsModal: false, // 打开授权弹窗
       openTenantsModal: false, // 打开授权弹窗
-      itemData: null, // 授权信息
+      itemId: '', // 要编辑的租户id
       // 查询参数
       // 查询参数
       queryParam: {
       queryParam: {
         name: '',
         name: '',
         contactPhone: '',
         contactPhone: '',
-        introPhone: '',
-        applyType: undefined, // 申请来源  0:自申请  1:推荐
         status: '' // 状态
         status: '' // 状态
       },
       },
       // 表头
       // 表头
-      columns: [
-        {
-          title: '序号',
-          dataIndex: 'no',
-          width: '40',
-          align: 'center'
-        },
-        {
-          title: '申请时间',
-          dataIndex: 'applyTime',
-          width: '200',
-          align: 'center'
-        },
-        {
-          title: '企业名称',
-          dataIndex: 'name',
-          align: 'center'
-        },
-        {
-          title: '门店类型',
-          dataIndex: 'orgType',
-          width: '120',
-          align: 'center',
-          scopedSlots: {
-            customRender: 'orgType'
-          }
-        },
-        {
-          title: '申请人手机',
-          width: '120',
-          align: 'center',
-          dataIndex: 'contactPhone'
-        },
-        {
-          title: '推荐人手机',
-          width: '120',
-          align: 'center',
-          dataIndex: 'introPhone'
-        },
-        {
-          title: '地址',
-          width: '200',
-          align: 'center',
-          scopedSlots: {
-            customRender: 'address'
-          }
-        },
-        {
-          title: '有效期至',
-          width: '200',
-          align: 'center',
-          dataIndex: 'expireDate'
-        },
-        {
-          title: '启用状态',
-          width: '200',
-          align: 'center',
-          dataIndex: 'status',
-          scopedSlots: {
-            customRender: 'enable'
-          }
-        },
-        {
-          title: '操作',
-          width: '200',
-          align: 'center',
-          scopedSlots: {
-            customRender: 'action'
-          }
+      columns: [{
+        title: '序号',
+        dataIndex: 'no',
+        width: '40',
+        align: 'center'
+      },
+      {
+        title: '创建时间',
+        dataIndex: 'applyTime',
+        width: '200',
+        align: 'center'
+      },
+      {
+        title: '企业名称',
+        dataIndex: 'name',
+        align: 'center'
+      },
+      {
+        title: '负责人名称',
+        dataIndex: 'orgType',
+        width: '120',
+        align: 'center'
+      },
+      {
+        title: '负责人手机',
+        width: '120',
+        align: 'center',
+        dataIndex: 'contactPhone'
+      },
+      {
+        title: '有效期至',
+        width: '200',
+        align: 'center',
+        dataIndex: 'expireDate'
+      },
+      {
+        title: '启用状态',
+        width: '200',
+        align: 'center',
+        dataIndex: 'status',
+        scopedSlots: {
+          customRender: 'enable'
         }
         }
+      },
+      {
+        title: '操作',
+        width: '200',
+        align: 'center',
+        scopedSlots: {
+          customRender: 'action'
+        }
+      }
       ],
       ],
       // 加载数据方法 必须为 Promise 对象
       // 加载数据方法 必须为 Promise 对象
       loadData: parameter => {
       loadData: parameter => {
@@ -233,17 +192,35 @@ export default {
       }
       }
     },
     },
     // 打开授权弹窗
     // 打开授权弹窗
-    openModal (data) {
-      this.itemData = data
+    openModal (row) {
+      this.itemId = row ? row.id : ''
       this.openTenantsModal = true
       this.openTenantsModal = true
     },
     },
+    // 删除
+    delect (row) {
+      const _this = this
+      this.$confirm({
+        title: '警告',
+        content: '删除后无法恢复,确认删除?',
+        okText: '确定',
+        cancelText: '取消',
+        onOk () {
+          // deleteItem({
+          // 	id: row.id
+          // }).then(res => {
+          // 	if (res.status == 200) {
+          // 		_this.$message.success('删除成功')
+          // 		_this.$refs.table.refresh()
+          // 	}
+          // })
+        }
+      })
+    },
     // 重置
     // 重置
     reset () {
     reset () {
       this.queryParam = {
       this.queryParam = {
         name: '',
         name: '',
         contactPhone: '',
         contactPhone: '',
-        introPhone: '',
-        applyType: '', // 申请来源  0:自申请  1:推荐
         status: '' // 状态
         status: '' // 状态
       }
       }
       this.$refs.table.refresh()
       this.$refs.table.refresh()
@@ -252,30 +229,52 @@ export default {
 }
 }
 </script>
 </script>
 <style>
 <style>
-  .table-page-search-wrapper ,.addButton{
-    margin-bottom: 0;
-  }
-  .table-page-search-wrapper .ant-form-inline .ant-form-item{
-    margin-bottom: 10px;
-  }
-  .textCount{
-    border: 1px solid #91d5ff;
-    background-color: #e6f7ff;
-    padding: 10px 0;
-    border-radius: 5px;
-    padding-left: 20px;
-    margin: 10px 0;
-  }
-  .action-button{
-    line-height: 40px;
-    white-space: nowrap;
-    padding: 5px 10px;
-    background-color: #1890ff;
-    border-radius: 4px;
-    color: #fff;
-    margin-right: 5px;
-  }
-  .menu-text {
-    background-color: #f90;
-  }
+	.table-page-search-wrapper,
+	.addButton {
+		margin-bottom: 0;
+	}
+
+	.table-page-search-wrapper .ant-form-inline .ant-form-item {
+		margin-bottom: 10px;
+	}
+
+	.textCount {
+		border: 1px solid #91d5ff;
+		background-color: #e6f7ff;
+		padding: 10px 0;
+		border-radius: 5px;
+		padding-left: 20px;
+		margin: 10px 0;
+	}
+
+	.action-button {
+		line-height: 40px;
+		white-space: nowrap;
+		padding: 5px 10px;
+		background-color: #1890ff;
+		border-radius: 4px;
+		color: #fff;
+		margin-right: 5px;
+	}
+
+	.menu-text {
+		background-color: #f90;
+	}
+
+	.actionBtn {
+		font-size: 20px;
+		padding: 0 10px;
+	}
+
+	.blue {
+		color: #1890FF;
+	}
+
+	.green {
+		color: #16b50e;
+	}
+
+	.red {
+		color: red;
+	}
 </style>
 </style>

+ 257 - 181
src/views/tenants/tenantsModal.vue

@@ -1,109 +1,159 @@
 <template>
 <template>
   <div>
   <div>
-    <a-modal class="modalBox" :title="titleText" v-model="isshow" @cancle="cancel" :width="600">
-      <a-form :form="form" @submit="handleSubmit" >
-        <!-- 企业名称 -->
-        <a-form-item label="企业名称:" :label-col="{ span: 9 }" :wrapper-col="{ span: 14 }">
-          <span>{{ itemData?itemData.name:'' }}</span>
-        </a-form-item>
-        <!-- 申请人手机 -->
-        <a-form-item label="申请人手机:" :label-col="{ span: 9 }" :wrapper-col="{ span: 14 }">
-          <span>{{ itemData?itemData.contactPhone:'' }}</span>
-        </a-form-item>
-        <!-- 推荐人手机 -->
-        <a-form-item label="推荐人手机:" :label-col="{ span: 9 }" :wrapper-col="{ span: 14 }">
-          <span>{{ itemData?itemData.introPhone:'' }}</span>
-        </a-form-item>
-
-        <!-- 使用有效期至 -->
-        <a-form-item label="使用有效期至:" :label-col="{ span: 9 }" :wrapper-col="{ span: 14 }">
-          <a-date-picker
-            style="width: 100%;"
-            @change="expireDateChange"
-            placeholder="年/月/日"
-            v-decorator="[
-              'formData.expireDate',
-              { initialValue: formData.expireDate,
-                rules: [{type: 'object', required: true, message: '请选择使用有效期!' }] },
-            ]"/>
-          <p>
-            常选:<span class="time-text" @click="timeFilter(3)">3天</span>  <span class="time-text" @click="timeFilter(30)">1个月</span>  <span class="time-text" @click="timeFilter(365)">1年</span>
-          </p>
-        </a-form-item>
-        <!-- 门店类型 -->
-        <a-form-item label="门店类型:" :label-col="{ span: 9 }" :wrapper-col="{ span: 14 }">
-          <v-select
-            ref="orgType"
-            allowClear
-            :disabled="hasOrgType"
-            @change="orgTypeChange"
-            v-decorator="[
-              'formData.orgType',
-              { initialValue: formData.orgType,
-                rules: [{ required: true, message: '请选择门店类型!' }] },
-            ]"
-            code="ORG_TYPE"></v-select>
-
-        </a-form-item>
-        <!-- 使用权限 -->
-        <a-form-item label="使用权限:" :label-col="{ span: 9 }" :wrapper-col="{ span: 14 }">
-          <v-select
-            ref="orgType"
-            allowClear
-            @change="scopeTypeChange"
-            v-decorator="[
-              'formData.scopeType',
-              { initialValue: formData.scopeType,
-                rules: [{ required: true, message: '请选择使用权限!' }] },
-            ]"
-            code="STORE_AUTH_TYPE"></v-select>
-
-        </a-form-item>
-        <!-- 最大可开通门店数 -->
-        <a-form-item v-if="formData.orgType=='ls'" label="最大可开通门店数:" :label-col="{ span: 9 }" :wrapper-col="{ span: 14 }">
-          <a-input-number
-            id="inputNumber"
-            :min="1"
-            :max="10"
-            style="width: 100%;"
-            v-decorator="[
-              'formData.childMaxNum',
-              { initialValue: formData.childMaxNum,
-                rules: [{ required: true, message: '请输入最大可开通门店数!' }] },
-            ]"
-          />
-        </a-form-item>
-        <!-- 单店最大可开通用户数 -->
-        <a-form-item v-if="formData.orgType=='ls'" label="单店最大可开通用户数:" :label-col="{ span: 9 }" :wrapper-col="{ span: 14 }">
-          <span class="labelT">( 包含管理员账号 )</span>
-          <a-input-number
-            id="inputNumber"
-            :min="1"
-            :max="100"
-            style="width: 100%;"
-            v-decorator="[
-              'formData.childUserMaxNum',
-              { initialValue: formData.childUserMaxNum,
-                rules: [{ required: true, message: '请输入单店最大可开通用户数!' }] },
-            ]"
-          />
-        </a-form-item>
-        <!-- 最大可开通用户数 -->
-        <a-form-item v-if="formData.orgType!='ls'" label="最大可开通用户数:" :label-col="{ span: 9 }" :wrapper-col="{ span: 14 }">
-          <span class="labelT">( 包含管理员账号 )</span>
-          <a-input-number
-            id="inputNumber"
-            :min="1"
-            :max="100"
-            style="width: 100%;"
-            v-decorator="[
-              'formData.childUserMaxNum',
-              { initialValue: formData.childUserMaxNum,
-                rules: [{ required: true, message: '请输入最大可开通用户数!' }] },
-            ]"
-          />
-        </a-form-item>
-
+    <a-modal class="modalBox" :title="titleText" v-model="isshow" @cancle="cancel" :width="900">
+      <a-form :form="form" ref="form" @submit="handleSubmit">
+        <a-row :gutter="24">
+          <a-col :span="12">
+            <!-- 企业名称 -->
+            <a-form-item label="企业名称:" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
+              <a-input
+                allowClear
+                :maxLength="32"
+                v-decorator="[
+                  'formData.name',
+                  { initialValue: formData.name,
+                    rules: [{ required: true, message: '请输入企业名称!' }] },
+                ]"
+                placeholder="请输入企业名称" />
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <!-- 企业编码 -->
+            <a-form-item label="企业编码:" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
+              <a-input
+                allowClear
+                :maxLength="32"
+                v-decorator="[
+                  'formData.mark',
+                  { initialValue: formData.mark, },
+                ]"
+                placeholder="请输入企业编码" />
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="24">
+          <a-col :span="12">
+            <!-- 负责人名称 -->
+            <a-form-item label="负责人名称:" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
+              <a-input
+                allowClear
+                :maxLength="32"
+                v-decorator="[
+                  'formData.userName',
+                  { initialValue: formData.userName,
+                    rules: [] },
+                ]"
+                placeholder="请输入负责人名称" />
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <!-- 负责人手机 -->
+            <a-form-item label="负责人手机:" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
+              <a-input
+                allowClear
+                :maxLength="11"
+                v-decorator="[
+                  'formData.phone',
+                  { initialValue: formData.phone,
+                    rules: [{ required: true,
+                              message:'请输入负责人手机号!'
+                            },
+                            { pattern:/^\d{11}$/, message:'请输入正确的负责人手机号'}
+                    ]
+                  },
+                ]"
+                placeholder="请输入负责人手机" />
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="24">
+          <a-col :span="12">
+            <!-- 使用有效期至 -->
+            <a-form-item label="使用有效期至:" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
+              <a-date-picker
+                style="width: 100%;"
+                @change="expireDateChange"
+                placeholder="年/月/日"
+                v-decorator="[
+                  'formData.expireDate',
+                  { initialValue: formData.expireDate,
+                    rules: [{type: 'object', required: true, message: '请选择使用有效期!' }] },
+                ]" />
+              <p>
+                常选:<span class="time-text" @click="timeFilter(3)">3天</span> <span class="time-text" @click="timeFilter(30)">1个月</span>
+                <span class="time-text" @click="timeFilter(365)">1年</span>
+              </p>
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <!-- 启用状态 -->
+            <a-form-item label="启用状态:" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
+              <a-radio-group
+                @change="onStatusChange"
+                v-decorator="[
+                  'formData.status',
+                  { initialValue: formData.status,
+                    rules: [{ required: true, message: '请选择启用状态!' }] },
+                ]">
+                <a-radio :value="1">
+                  是
+                </a-radio>
+                <a-radio :value="0">
+                  否
+                </a-radio>
+              </a-radio-group>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="24">
+          <a-col :span="12">
+            <!-- 使用权限 -->
+            <a-form-item label="使用权限:" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
+              <v-select
+                ref="orgType"
+                allowClear
+                @change="scopeTypeChange"
+                v-decorator="[
+                  'formData.scopeType',
+                  { initialValue: formData.scopeType,
+                    rules: [{ required: true, message: '请选择使用权限!' }] },
+                ]"
+                code="STORE_AUTH_TYPE"></v-select>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="24">
+          <a-col :span="12">
+            <!-- 地址 -->
+            <a-form-item label="地址:" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
+              <a-cascader
+                allowClear
+                :options="addressData"
+                placeholder="请选择省市区"
+                v-decorator="[
+                  'formData.address',
+                  { initialValue: formData.address,
+                    rules: [] },
+                ]"
+              />
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <!-- 详细地址 -->
+            <a-form-item>
+              <a-input
+                :maxLength="32"
+                allowClear
+                placeholder="请输入详细地址"
+                v-decorator="[
+                  'formData.addressDetail',
+                  { initialValue: formData.addressDetail,
+                    rules: [] },
+                ]"
+              />
+            </a-form-item>
+          </a-col>
+        </a-row>
         <a-form-item :wrapper-col="{ span: 24, offset: 10 }">
         <a-form-item :wrapper-col="{ span: 24, offset: 10 }">
           <a-button type="primary" @click="handleSubmit()">
           <a-button type="primary" @click="handleSubmit()">
             确定
             确定
@@ -119,64 +169,105 @@
 </template>
 </template>
 
 
 <script>
 <script>
-import { STable, VSelect } from '@/components'
-import { saveAuth } from '@/api/tenants.js'
+import {
+  STable,
+  VSelect
+} from '@/components'
+import {
+  saveAuth
+} from '@/api/tenants.js'
 import moment from 'moment'
 import moment from 'moment'
 export default {
 export default {
   name: 'TenantsModal',
   name: 'TenantsModal',
   components: {
   components: {
-    STable, VSelect
+    STable,
+    VSelect
   },
   },
   props: {
   props: {
     visible: {
     visible: {
       type: Boolean,
       type: Boolean,
       default: false
       default: false
     },
     },
-    itemData: {
-      type: Object,
-      default: function () {
-        return {}
+    // 要编辑的租户id
+    itemId: {
+      type: [String, Number],
+      default: ''
+    }
+  },
+  watch: {
+    visible (newValue, oldValue) {
+      this.isshow = newValue
+    },
+    isshow (newValue, oldValue) {
+      if (newValue) {
+        const now = moment().add(7, 'day').format('YYYY-MM-DD')
+        const expireDate = moment(now, 'YYYY-MM-DD')
+        // this.formData.expireDate = this.itemData.expireDate ? moment(this.itemData.expireDate, 'YYYY-MM-DD') : expireDate
+        // // this.form.setFields({ 'formData.expireDate': { value: this.formData.expireDate, errors: '' } })
+      } else {
+        this.cancel()
       }
       }
     }
     }
   },
   },
   data () {
   data () {
     return {
     return {
       moment,
       moment,
-      titleText: '设置权限',
       isshow: this.visible,
       isshow: this.visible,
-      hasOrgType: false,
-      formLayout: 'horizontal',
-      form: this.$form.createForm(this, { name: 'tenantsModal' }),
+      form: this.$form.createForm(this, {
+        name: 'tenantsModal'
+      }),
+      addressData: null, // 省市区
       formData: {
       formData: {
-        expireDate: null,
-        orgType: '',
-        scopeType: '',
-        childMaxNum: 1,
-        childUserMaxNum: 1
+        name: '', // 企业名称
+        mark: '', // 企业编码
+        userName: '', // 负责人名称
+        phone: '', // 负责人电话
+        expireDate: null, // 使用有效期
+        scopeType: '', // 权限类型
+        status: 1, // 启用状态
+        address: [], // 省市区
+        addressDetail: '' // 详细地址
       }
       }
 
 
     }
     }
   },
   },
+  computed: {
+    titleText () {
+      return this.itemId ? '编辑' : '新增'
+    }
+  },
   methods: {
   methods: {
     cancel (e) {
     cancel (e) {
       this.clear()
       this.clear()
       this.$emit('close')
       this.$emit('close')
     },
     },
+    // 有效期改变
     expireDateChange (v) {
     expireDateChange (v) {
       console.log(v)
       console.log(v)
-      this.form.setFields({ 'formData.expireDate': { value: v, errors: '' } })
-    },
-    orgTypeChange (v) {
-      this.formData.orgType = v
-      
+      this.form.setFields({
+        'formData.expireDate': {
+          value: v,
+          errors: ''
+        }
+      })
     },
     },
+    // 使用权限改变
     scopeTypeChange (v) {
     scopeTypeChange (v) {
       this.formData.scopeType = v
       this.formData.scopeType = v
     },
     },
+    // 启用状态切换
+    onStatusChange (v) {
+      console.log(v, 'vvvvvvvvvv')
+    },
     // 快捷时间处理
     // 快捷时间处理
     timeFilter (time) {
     timeFilter (time) {
       const now = moment().add(time, 'day').format('YYYY-MM-DD')
       const now = moment().add(time, 'day').format('YYYY-MM-DD')
-      this.form.setFields({ 'formData.expireDate': { value: moment(now, 'YYYY-MM-DD'), errors: '' } })
+      this.form.setFields({
+        'formData.expireDate': {
+          value: moment(now, 'YYYY-MM-DD'),
+          errors: ''
+        }
+      })
     },
     },
 
 
     // 保存提交
     // 保存提交
@@ -185,21 +276,23 @@ export default {
       this.form.validateFields((err, values) => {
       this.form.validateFields((err, values) => {
         if (!err) {
         if (!err) {
           console.log(values.formData, ' formData.type222222222')
           console.log(values.formData, ' formData.type222222222')
-          const params = Object.assign({ id: this.itemData.id }, values.formData)
-          params.expireDate = moment(params.expireDate).format('YYYY-MM-DD')
-            console.log(params, 'ppppppppppppp')
-          saveAuth(params).then(res => {
-            console.log(res, 'res--save')
-            if (res.status + '' === '200') {
-              this.$message.success(res.message ? res.message : '保存成功')
-              this.$emit('refresh')
-              setTimeout(function () {
-                _this.cancel()
-              }, 300)
-            } else {
-              // this.$message.warning(res.message)
-            }
-          })
+          // const params = Object.assign({
+          //   id: this.itemData.id
+          // }, values.formData)
+          // params.expireDate = moment(params.expireDate).format('YYYY-MM-DD')
+          // console.log(params, 'ppppppppppppp')
+          // saveAuth(params).then(res => {
+          //   console.log(res, 'res--save')
+          //   if (res.status + '' === '200') {
+          //     this.$message.success(res.message ? res.message : '保存成功')
+          //     this.$emit('refresh')
+          //     setTimeout(function () {
+          //       _this.cancel()
+          //     }, 300)
+          //   } else {
+          //     // this.$message.warning(res.message)
+          //   }
+          // })
         }
         }
       })
       })
     },
     },
@@ -221,50 +314,33 @@ export default {
       this.form.resetFields()
       this.form.resetFields()
     }
     }
 
 
-  },
-  mounted () {
   },
   },
   beforeCreate () {
   beforeCreate () {
-    this.form = this.$form.createForm(this, { name: 'tenantsModal' })
-  },
-  watch: {
-    visible (newValue, oldValue) {
-      this.isshow = newValue
-    },
-    isshow (newValue, oldValue) {
-      if (newValue) {
-        const now = moment().add(7, 'day').format('YYYY-MM-DD')
-        const expireDate = moment(now, 'YYYY-MM-DD')
-        this.formData.expireDate = this.itemData.expireDate ? moment(this.itemData.expireDate, 'YYYY-MM-DD') : expireDate
-        // this.form.setFields({ 'formData.expireDate': { value: this.formData.expireDate, errors: '' } })
-        this.formData.orgType = this.itemData.orgType ? this.itemData.orgType : ''
-        this.formData.scopeType = this.itemData.scopeType ? this.itemData.scopeType : ''
-        this.formData.childMaxNum = this.itemData.childMaxNum ? this.itemData.childMaxNum : 1
-        this.formData.childUserMaxNum = this.itemData.childUserMaxNum ? this.itemData.childUserMaxNum : 1
-        this.hasOrgType = !!this.itemData.menuMouldId
-      } else {
-        this.cancel()
-      }
-    }
+    this.form = this.$form.createForm(this, {
+      name: 'tenantsModal'
+    })
   }
   }
+
 }
 }
 </script>
 </script>
 
 
-<style >
-  .modalBox{
-  }
-  .ant-modal-footer {
-    display: none;
-  }
-  .time-text{
-    color: #1890FF;
-    padding: 0px 20px;
-    cursor: pointer;
-  }
-  .labelT{
-     position: absolute;
-     left: -135px;
-     top: 20px;
-     color: rgba(0, 0, 0, 0.85);
-  }
+<style>
+	.modalBox {}
+
+	.ant-modal-footer {
+		display: none;
+	}
+
+	.time-text {
+		color: #1890FF;
+		padding: 0px 20px;
+		cursor: pointer;
+	}
+
+	.labelT {
+		position: absolute;
+		left: -135px;
+		top: 20px;
+		color: rgba(0, 0, 0, 0.85);
+	}
 </style>
 </style>