iov-pro-components 0.0.3

package/docs/template/dialog.md

@@ -0,0 +1,339 @@
+## 小型弹框
+
+::: demo
+```vue
+<template>
+  <div class="dialog-demo">
+    <el-button
+      round
+      size="small"
+      type="primary"
+      icon="iov-icon-plus"
+      @click.stop="onOpenAddDialog"
+    >新增表单</el-button>
+    <el-button
+      round
+      size="small"
+      type="primary"
+      icon="iov-icon-edit"
+      @click.stop="onOpenEditDialog"
+    >编辑表单</el-button>
+    <el-dialog
+      :title="type === 'add' ? '新增表单' : '编辑表单'"
+      :visible.sync="visible"
+      width="480px"
+      :close-on-click-modal="false"
+      @close="visible = false"
+    >
+      <el-form
+        ref="form" 
+        size="small"
+        :model="form"
+        label-position="top"
+        :rules="rules"
+        lable-width="100px"
+      >
+        <el-form-item label="租户编码" prop="tenantNo">
+          <el-input
+            v-model.trim="form.tenantNo"
+            placeholder="请输入租户编码"
+            autocomplete="off"
+            clearable
+            maxlength="100"
+          />
+        </el-form-item>
+        <el-form-item label="租户名称" prop="tenantName">
+          <el-input
+            v-model.trim="form.tenantName"
+            placeholder="请输入租户名称"
+            autocomplete="off"
+            clearable
+            maxlength="100"
+          />
+        </el-form-item>
+        <el-form-item label="租户代码" prop="alias">
+          <el-input
+            v-model.trim="form.alias"
+            placeholder="请输入租户代码"
+            autocomplete="off"
+            clearable
+            maxlength="100"
+          />
+        </el-form-item>
+        <el-form-item label="统一信用代码" prop="usci">
+          <el-input
+            v-model.trim="form.usci"
+            placeholder="请输入统一信用代码"
+            autocomplete="off"
+            clearable
+            maxlength="100"
+          />
+        </el-form-item>
+        <el-form-item label="租户状态" prop="status">
+          <el-select v-model="form.status" placeholder="请选择租户状态" clearable>
+            <el-option
+              v-for="item in DICT.TENANT_SATUS"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <template slot="footer">
+        <el-button round size="small" @click="visible = false">取 消</el-button>
+        <el-button type="primary" round size="small" @click="onConfirm">确 定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+const DICT = {
+  TENANT_SATUS: [
+    { label: '启用', value: 1, type: 'success' },
+    { label: '停用', value: 0, type: 'info' }
+  ]
+}
+export default {
+  data() {
+    return {
+      visible: false,
+      form: {
+        tenantNo: '',
+        tenantName: '',
+        alias: '',
+        usci: '',
+        status: 1
+      },
+      DICT,
+      rules: {
+        tenantName: [{ required: true, message: '请输入租户名称', trigger: 'blur' }],
+        status: [{ required: true, message: '请选择状态', trigger: 'change' }]
+      },
+      type: ''
+    }
+  },
+  methods: {
+    /**
+     * 打开新增弹框
+     */
+    onOpenAddDialog() {
+      // 展示弹框
+      this.visible = true
+      // 标记当前是新增
+      this.type = 'add'
+      // 重置表单
+      this.$nextTick(() => this.$refs.form.resetFields())
+    },
+
+    /**
+     * 打开编辑弹框
+     */
+    onOpenEditDialog() {
+      // 展示弹框
+      this.visible = true
+      // 标记当前是新增
+      this.type = 'edit'
+      // 开始进行赋值操作
+      this.form = {
+        tenantNo: '1',
+        tenantName: '租户名称',
+        alias: '338889999121212',
+        usci: '123456789',
+        status: 1
+      }
+      // 清空上一次校验
+      this.$nextTick(() => this.$refs.form.clearValidate())
+    },
+
+    /**
+     * 确认用户输入的内容
+     */
+    async onConfirm() {
+      // 触发表单校验
+      await this.$refs.form.validate()
+    }
+  }
+}
+</script>
+```
+:::
+
+
+
+## 大型弹框
+
+::: demo
+```vue
+<template>
+  <div class="dialog-demo">
+    <el-button
+      round
+      size="small"
+      type="primary"
+      icon="iov-icon-plus"
+      @click.stop="onOpenAddDialog"
+    >新增表单</el-button>
+    <el-button
+      round
+      size="small"
+      type="primary"
+      icon="iov-icon-edit"
+      @click.stop="onOpenEditDialog"
+    >编辑表单</el-button>
+    <el-dialog
+      :title="type === 'add' ? '新增表单' : '编辑表单'"
+      :visible.sync="visible"
+      width="1098px"
+      :close-on-click-modal="false"
+      @close="visible = false"
+    >
+      <el-form
+        ref="form" 
+        size="small"
+        :model="form"
+        label-position="top"
+        :rules="rules"
+        lable-width="100px"
+      >
+        <el-row gutter="24">
+          <el-col :span="8">
+            <el-form-item label="租户编码" prop="tenantNo">
+              <el-input
+                v-model.trim="form.tenantNo"
+                placeholder="请输入租户编码"
+                autocomplete="off"
+                clearable
+                maxlength="100"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="租户名称" prop="tenantName">
+              <el-input
+                v-model.trim="form.tenantName"
+                placeholder="请输入租户名称"
+                autocomplete="off"
+                clearable
+                maxlength="100"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="租户代码" prop="alias">
+              <el-input
+                v-model.trim="form.alias"
+                placeholder="请输入租户代码"
+                autocomplete="off"
+                clearable
+                maxlength="100"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="统一信用代码" prop="usci">
+              <el-input
+                v-model.trim="form.usci"
+                placeholder="请输入统一信用代码"
+                autocomplete="off"
+                clearable
+                maxlength="100"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="租户状态" prop="status">
+              <el-select v-model="form.status" placeholder="请选择租户状态" clearable>
+                <el-option
+                  v-for="item in DICT.TENANT_SATUS"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <template slot="footer">
+        <div style="text-align: center;">
+          <el-button round size="small" @click="visible = false">取 消</el-button>
+          <el-button type="primary" round size="small" @click="onConfirm">确 定</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+const DICT = {
+  TENANT_SATUS: [
+    { label: '启用', value: 1, type: 'success' },
+    { label: '停用', value: 0, type: 'info' }
+  ]
+}
+export default {
+  data() {
+    return {
+      visible: false,
+      form: {
+        tenantNo: '',
+        tenantName: '',
+        alias: '',
+        usci: '',
+        status: 1
+      },
+      DICT,
+      rules: {
+        tenantName: [{ required: true, message: '请输入租户名称', trigger: 'blur' }],
+        status: [{ required: true, message: '请选择状态', trigger: 'change' }]
+      },
+      type: ''
+    }
+  },
+  methods: {
+    /**
+     * 打开新增弹框
+     */
+    onOpenAddDialog() {
+      // 展示弹框
+      this.visible = true
+      // 标记当前是新增
+      this.type = 'add'
+      // 重置表单
+      this.$nextTick(() => this.$refs.form.resetFields())
+    },
+
+    /**
+     * 打开编辑弹框
+     */
+    onOpenEditDialog() {
+      // 展示弹框
+      this.visible = true
+      // 标记当前是新增
+      this.type = 'edit'
+      // 开始进行赋值操作
+      this.form = {
+        tenantNo: '1',
+        tenantName: '租户名称',
+        alias: '338889999121212',
+        usci: '123456789',
+        status: 1
+      }
+      // 清空上一次校验
+      this.$nextTick(() => this.$refs.form.clearValidate())
+    },
+
+    /**
+     * 确认用户输入的内容
+     */
+    async onConfirm() {
+      // 触发表单校验
+      await this.$refs.form.validate()
+    }
+  }
+}
+</script>
+```
+:::