uni-pos/src/components/Management/checkDialog.vue

<template>
  <div class="add-dialog-component">
    <Form ref="addForm" label-width="150px" :model="dataMap">
      <Tabs v-model="activeName">
        <tab-pane label="授权信息" name="authorize">
          <form-item label="店铺名称" prop="name">
            <Input
              v-model="dataMap.name"
              :disabled="dataMap.check"
              size="medium"
              maxlength="30"
              show-word-limit
              clearable
            />
          </form-item>
          <form-item label="店铺负责人" prop="duty">
            <Input
              v-model="dataMap.duty"
              :disabled="dataMap.check"
              size="medium"
              maxlength="50"
              show-word-limit
              clearable
            />
          </form-item>
          <form-item label="联系电话">
            <Input
              v-model="dataMap.contactTel"
              :disabled="dataMap.check"
              size="medium"
              maxlength="50"
              show-word-limit
              clearable
            />
          </form-item>
          <form-item label="联系地址">
            <Input
              v-model="dataMap.address"
              :disabled="dataMap.check"
              size="medium"
              maxlength="50"
              show-word-limit
              clearable
            />
          </form-item>
          <form-item label="生效日期" prop="startTime">
            <date-picker
              v-model="dataMap.startTime"
              :disabled="dataMap.check"
              size="medium"
              type="date"
              value-format="yyyy-MM-dd HH:mm:ss"
            />
          </form-item>
          <form-item label="生效时限(年)" prop="expireLimitYear">
            <Input
              v-model="dataMap.expireLimitYear"
              :disabled="dataMap.check"
              size="medium"
              maxlength="4"
              show-word-limit
              clearable
            />
          </form-item>
          <form-item label="合同状态">
            <Select v-model="dataMap.status.code" disabled size="mini">
              <Option label="有效" value="NORMAL" />
              <Option label="无效" value="FORBIDDEN" />
            </Select>
          </form-item>
          <form-item label="账号" prop="mobile">
            <Input
              v-model="dataMap.account"
              :disabled="dataMap.check"
              size="medium"
              maxlength="11"
              show-word-limit
              clearable
            />
          </form-item>

          <form-item label="收单类型">
            <Select v-model="dataMap.posType.code" size="mini">
              <Option label="普通餐饮" value="NORMALSTORE" />
              <Option label="快消餐饮" value="FASTSTORE" />
              <Option label="零售店" value="RETAILSTORE" />
            </Select>
          </form-item>

          <form-item size="large">
            <Button v-if="!dataMap.check" type="primary" @click="sumbit">确定</Button>
          </form-item>
        </tab-pane>
      </Tabs>
    </Form>
  </div>
</template>
<script>
import { Tabs, TabPane, Form, FormItem, Input, Button, Select, Option, DatePicker } from 'element-ui'
import Management from '@/api/Management'
export default {
  components: {
    Tabs,
    TabPane,
    Form,
    FormItem,
    Input,
    Button,
    Select,
    Option,
    DatePicker
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    dataMap: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      activeName: 'authorize'
    }
  },
  created() {},
  methods: {
    close() {
      this.$emit('close')
    },
    sumbit() {
      const _ = this
      Management.editTenant(this.dataMap).then(res => {
        if (res.data.code === 0) {
          _.$message.success('修改成功')
          _.close()
        }
      })
    }
  }
}
</script>
<style lang="less">
  .add-dialog-component {
    .tree-box {
      .el-tree-node__content {
        margin-bottom: 15px;
        height: auto;
      }
    }
  }
</style>
<style lang="less" scoped>
  .add-dialog-component {
    padding: 15px 20px;
    max-height: 80vh;
    overflow: auto;

    .tree-box {
      margin: 15px 0;

      .custom-tree-node {
        display: flex;
        width: 100%;
        text-align: left;

        .content {
          flex: 1;

        }

        .setting-box {
        }
      }
    }

    .add-btn-wrap {
      text-align: center;
    }
  }
</style>