tab-demo模板案例

components

firstTab.vue

<template>
  <div>
    <el-form
      ref="el_form"
      label-width="100px"
      :model="formData"
      @submit.native.prevent
    >
      <el-row>
        <el-col :span="6">
          <el-form-item
            label="用户姓名："
            prop="name"
            :rules="[
              { required: true, message: '必填', trigger: 'blur' }
            ]"
          >
            <el-input
              v-model.trim="formData.name"
              clearable
              placeholder="请输入用户姓名"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            label="手机号："
            prop="phone"
            :rules="[
              { required: true, message: '必填', trigger: 'blur' }
            ]"
          >
            <el-input
              v-model.trim="formData.phone"
              clearable
              placeholder="请输入角色名称"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            label="账号："
            prop="account"
            :rules="[
              { required: true, message: '必填', trigger: 'blur' }
            ]"
          >
            <el-input
              v-model.trim="formData.account"
              clearable
              placeholder="请输入角色名称"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            prop="status"
            label="状态："
            :rules="[
              { required: true, message: '必填', trigger: 'change' }
            ]"
          >
            <el-select
              v-model="formData.status"
              clearable
            >
              <el-option
                v-for="item in $getDicList('maintainOrderStatus')"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <nx-base-table
      v-bind="tableConfig"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    />

    <component
      :is="dialog.name"
      :ref="dialog.name"
      v-model="dialog.visible"
      v-bind="dialog.args"
    />
  </div>
</template>
<script>
import mixins from '../mixins'
import tableColum from '../config/table-colum.js'
export default {
  mixins: mixins,
  data() {
    return {
      formData: {
        // 姓名
        name: '',
        // 手机号
        phone: '',
        // 账号
        account: '',
        // 状态
        status: ''
      },
      tableConfig: {
        theadData: {
          needIndex: true,
          data: tableColum(this)
        },
        tableData: [],
        border: false,
        totalCount: 0,
        pageSize: 10,
        currentPage: 1,
        needPagination: true,
        needPapinationOPs: true,
        operationBtns: [
          {
            isShow: ({ row, $index }) => {
              return true
            },
            isDisabled: ({ row, $index }) => {
              return false
            },
            handleClick: (row, index) => {
            },
            btnTxt: '编辑'
          }
        ]
      }
    }
  },
  methods: {
    getData() {
      console.log('first');
    },
    handleSizeChange() {},
    handleCurrentChange() {},
    handleValidate() {
      return new Promise((resolve, reject) => {
        this.$refs.el_form.validate((valid) => {
          if (valid) {
            resolve({ ...this.formData })
          } else {
            this.$message.warning('firstTab必填')
            reject()
          }
        });
      })
    }
  }
}
</script>

secondTab.vue

<template>
  <div>
    <el-form
      ref="el_form"
      label-width="100px"
      :model="formData"
      @submit.native.prevent
    >
      <el-row>
        <el-col :span="6">
          <el-form-item
            label="用户姓名："
            prop="name"
            :rules="[
              { required: true, message: '必填', trigger: 'blur' }
            ]"
          >
            <el-input
              v-model.trim="formData.name"
              clearable
              placeholder="请输入用户姓名"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            label="手机号："
            prop="phone"
            :rules="[
              { required: true, message: '必填', trigger: 'blur' }
            ]"
          >
            <el-input
              v-model.trim="formData.phone"
              clearable
              placeholder="请输入角色名称"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            label="账号："
            prop="account"
            :rules="[
              { required: true, message: '必填', trigger: 'blur' }
            ]"
          >
            <el-input
              v-model.trim="formData.account"
              clearable
              placeholder="请输入角色名称"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            prop="status"
            label="状态："
            :rules="[
              { required: true, message: '必填', trigger: 'change' }
            ]"
          >
            <el-select
              v-model="formData.status"
              clearable
            >
              <el-option
                v-for="item in $getDicList('maintainOrderStatus')"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <component
      :is="dialog.name"
      :ref="dialog.name"
      v-model="dialog.visible"
      v-bind="dialog.args"
    />
  </div>
</template>
<script>
import mixins from '../mixins'
export default {
  mixins: mixins,
  data() {
    return {
      formData: {
        // 姓名
        name: '',
        // 手机号
        phone: '',
        // 账号
        account: '',
        // 状态
        status: ''
      }
    }
  },
  methods: {
    getData() {
      console.log('second');
    },
    handleValidate() {
      return new Promise((resolve, reject) => {
        this.$refs.el_form.validate((valid) => {
          if (valid) {
            resolve({ ...this.formData })
          } else {
            this.$message.warning('secondTab必填')
            reject()
          }
        });
      })
    }
  }
}
</script>

index.vue

<template>
  <div>
    <div class="container-wrapper">
      <el-form
        ref="el_form"
        label-width="100px"
        :model="formData"
        @submit.native.prevent
      >
        <el-row>
          <el-col :span="6">
            <el-form-item
              label="用户姓名："
              prop="name"
              :rules="[
                { required: true, message: '必填', trigger: 'blur' }
              ]"
            >
              <el-input
                v-model.trim="formData.name"
                clearable
                placeholder="请输入用户姓名"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="手机号："
              prop="phone"
              :rules="[
                { required: true, message: '必填', trigger: 'blur' }
              ]"
            >
              <el-input
                v-model.trim="formData.phone"
                clearable
                placeholder="请输入角色名称"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="账号："
              prop="account"
              :rules="[
                { required: true, message: '必填', trigger: 'blur' }
              ]"
            >
              <el-input
                v-model.trim="formData.account"
                clearable
                placeholder="请输入角色名称"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              prop="status"
              label="状态："
              :rules="[
                { required: true, message: '必填', trigger: 'change' }
              ]"
            >
              <el-select
                v-model="formData.status"
                clearable
              >
                <el-option
                  v-for="item in $getDicList('maintainOrderStatus')"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-tabs
        v-model="activeName"
        type="card"
        @tab-click="handleTabClick"
      >
        <el-tab-pane
          label="用户管理"
          name="firstTab"
        >
          <!-- 用户管理 -->
          <first-tab
            ref="firstTab"
          />
        </el-tab-pane>
        <el-tab-pane
          label="配置管理"
          name="secondTab"
        >
          <!-- 配置管理 -->
          <second-tab
            ref="secondTab"
          />
        </el-tab-pane>
      </el-tabs>
      <div style="display: flex; justify-content: center; margin-top: 20px;">
        <el-button
          type="primary"
          @click="handleSubmit"
        >
          提交
        </el-button>
        <el-button @click="handleCancel">
          重置
        </el-button>
      </div>
    </div>

    <component
      :is="dialog.name"
      :ref="dialog.name"
      v-model="dialog.visible"
      v-bind="dialog.args"
    />
  </div>
</template>
<script>
import mixins from './mixins'
import firstTab from './components/firstTab.vue'
import secondTab from './components/secondTab.vue'
export default {
  components: {
    firstTab,
    secondTab
  },
  mixins: mixins,
  data() {
    return {
      formData: {
        // 姓名
        name: '',
        // 手机号
        phone: '',
        // 账号
        account: '',
        // 状态
        status: ''
      },
      activeName: 'firstTab'
    }
  },
  mounted() {
    this.handleTabClick()
  },
  methods: {
    // 提交
    async handleSubmit() {
      await this.$refs.el_form.validate()
      const [firstData, secondData] = await Promise.all([
        this.$refs.firstTab.handleValidate(),
        this.$refs.secondTab.handleValidate()
      ])
      console.log({
        firstData, secondData
      }
      );
    },
    // 取消
    handleCancel() {
      this.$refs.el_form.resetFields()
    },
    handleTabClick({ name = this.activeName } = {}) {
      this.$refs[name].getData()
    }
  }
}
</script>
<style lang="scss" scoped>
.container-wrapper {
  /deep/.el-tabs__nav-scroll {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>