123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229 |
- <template>
- <a-modal
- class="StoreModal"
- title="编辑"
- :width="1000"
- :footer="null"
- :destroyOnClose="true"
- @cancel="isShow = false"
- v-model="isShow">
- <!-- 表单 -->
- <a-form-model
- class="form"
- ref="ruleForm"
- :model="form"
- :rules="rules"
- :label-col="{ span: 6 }"
- :wrapper-col="{ span: 18 }">
- <a-row :gutter="20" v-if="storeInfo">
- <a-col :span="8" class="item-w">
- <div class="item-label">门店名称:</div>
- <div class="item-cont">{{ storeInfo.name }}</div>
- </a-col>
- <a-col :span="8" class="item-w">
- <div class="item-label">门店负责人:</div>
- <div class="item-cont">{{ storeInfo.managerName }}</div>
- </a-col>
- <a-col :span="8" class="item-w">
- <div class="item-label">负责人手机:</div>
- <div class="item-cont">{{ storeInfo.managerMobile }}</div>
- </a-col>
- <a-col :span="24" class="item-w">
- <div class="item-label">地址:</div>
- <div class="item-cont">{{ storeInfo.addrProvinceName }} - {{ storeInfo.addrCityName }} - {{ storeInfo.addrDistrictName }} - {{ storeInfo.addrDetail }}</div>
- </a-col>
- <a-col :span="8" class="item-w">
- <div class="item-label">纬度:</div>
- <div class="item-cont">{{ storeInfo.lat }}</div>
- </a-col>
- <a-col :span="8" class="item-w">
- <div class="item-label">经度:</div>
- <div class="item-cont">{{ storeInfo.lng }}</div>
- </a-col>
- <a-col :span="8" class="item-w">
- <div class="item-label">营业时间:</div>
- <div class="item-cont">{{ storeInfo.beginTime }} - {{ storeInfo.endTime }}</div>
- </a-col>
- <a-col :span="8" class="item-w">
- <div class="item-label">是否自营:</div>
- <div class="item-cont">{{ storeInfo.selfFlag }}</div>
- </a-col>
- <a-col :span="8" class="item-w">
- <div class="item-label">启用状态:</div>
- <div class="item-cont">{{ storeInfo.isEnable }}</div>
- </a-col>
- <a-col :span="8">
- <a-form-model-item class="form-label" label="组织归属" prop="orgCode" :label-col="{ span: 7 }" :wrapper-col="{ span: 17 }">
- <a-tree-select
- showSearch
- id="store-editOrg"
- v-model="form.orgCode"
- allowClear
- style="width: 100%"
- :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
- :tree-data="treeData"
- placeholder="请选择组织归属"
- treeNodeFilterProp="title">
- </a-tree-select>
- </a-form-model-item>
- </a-col>
- <a-col :span="24">
- <a-form-model-item class="btn-cont" :label-col="{ span: 0 }" :wrapper-col="{ span: 24 }">
- <a-button id="store-saveOrg" type="primary" @click="onSubmit">保存</a-button>
- <a-button id="store-cancelOrg" class="cancel" @click="isShow = false">取消</a-button>
- </a-form-model-item>
- </a-col>
- </a-row>
- </a-form-model>
- </a-modal>
- </template>
- <script>
- import { Tree } from '@/components'
- import { findStoreDetail, saveStoreOrg } from '@/api/store.js'
- import { findOrgTree } from '@/api/atorg.js'
- export default {
- components: { Tree },
- name: 'StoreModal',
- props: {
- openModal: {
- // 弹框是否展示
- type: Boolean,
- default: false
- },
- storeId: {
- // 门店id
- type: String,
- default: ''
- }
- },
- data () {
- return {
- isShow: this.openModal, // 弹框是否展示
- form: { // 编辑
- orgCode: null // 机构编码
- },
- rules: { // 表单校验规则
- orgCode: [{ required: true, message: '请选择所属组织归属', trigger: 'change' }]
- },
- treeData: [],
- storeInfo: null // 门店详情
- }
- },
- methods: {
- // 门店详情
- getStoreInfo (id) {
- findStoreDetail({ id: id }).then(res => {
- console.log(res, '————————')
- if (res.status == 200) {
- this.storeInfo = res.data
- }
- })
- },
- // 获取组织机构 数据
- getOrgList () {
- findOrgTree().then(res => {
- if (res.status == 200) {
- this.treeData = this.recursionFun(res.data.list)
- } else {
- this.treeData = []
- }
- })
- },
- // 递归函数
- recursionFun (data) {
- data.map(item => {
- if (item.children && item.children.length == 0) {
- item.key = item.id ? 'org' + item.id : ''
- item.value = item.id ? item.id : ''
- item.title = item.name ? item.name : ''
- } else {
- item.key = item.id ? 'org' + item.id : ''
- item.value = item.id ? item.id : ''
- item.title = item.name ? item.name : ''
- this.recursionFun(item.children)
- }
- })
- return data
- },
- // 保存
- onSubmit () {
- const _this = this
- _this.$refs.ruleForm.validate(valid => {
- if (valid) {
- const formData = JSON.parse(JSON.stringify(_this.form))
- formData.tenantId = this.storeId
- console.log(formData)
- saveStoreOrg(formData).then(res => {
- if (res.status == 200) {
- _this.$message.success(res.message)
- _this.$emit('success')
- } else {
- _this.$message.error(res.message)
- }
- })
- } else {
- return false
- }
- })
- }
- },
- watch: {
- // 父页面传过来的弹框状态
- openModal (newValue, oldValue) {
- this.isShow = newValue
- },
- // 重定义的弹框状态
- isShow (val) {
- if (!val) {
- this.$emit('close')
- } else {
- // 重置表单数据
- this.form.orgCode = null
- }
- },
- storeId (newValue, oldValue) {
- if (newValue && this.isShow) {
- this.getOrgList()
- this.getStoreInfo(newValue)
- }
- }
- }
- }
- </script>
- <style lang="less">
- .StoreModal{
- .form{
- .item-w{
- display: flex;
- line-height: 24px;
- padding: 8px 0;
- margin-bottom: 24px;
- .item-label{
- flex-shrink: 0;
- width: 90px;
- text-align: right;
- font-weight: bold;
- }
- .item-cont{
- flex-grow: 1;
- }
- }
- .btn-cont {
- text-align: center;
- .cancel {
- margin-left: 40px;
- }
- }
- .form-label{
- .ant-form-item-label{
- .ant-form-item-required{
- font-weight: bold;
- color: rgba(0, 0, 0, 0.65);
- }
- }
- }
- }
- }
- </style>
|