update

src/loveflow/components/modal/formDialog.vue

@@ -0,0 +1,126 @@
+<template>
+  <el-dialog
+    title="提示"
+    :visible.sync="dialogVisible"
+    width="30%"
+    :before-close="handleClose"
+  >
+    
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="dialogVisible = false">取 消</el-button>
+      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+    </span>
+  </el-dialog>
+</template>
+<script>
+export default {
+  props: {
+    width: {
+      type: Number,
+      default: () => {
+        return 800
+      },
+    },
+    formItems: {
+      type: Array,
+      default: () => {
+        return []
+      },
+    },
+    labelWidth: {
+      type: String,
+      default: () => {
+        return '100px'
+      },
+    },
+    title: {
+      type: String,
+      default: () => {
+        return '新增'
+      },
+    },
+  },
+  data() {
+    return {
+      confirmLoading: false,
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 5 },
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 16 },
+      },
+      model: {},
+      modelTitle: '',
+      visible: false,
+      formDisabled: false, //是否是查看详情，不允许操作
+      isMerge: false, //model赋值合并，编辑
+    }
+  },
+  methods: {
+    openDialog(opt, data) {
+      this.visible = true
+      this.modelTitle = this.title
+      this.initModel()
+      if (opt === 'edit') {
+        //编辑
+        this.modelTitle = '编辑'
+        this.mergeModel(data)
+      }
+      if (opt === 'detail') {
+        //查看
+        this.modelTitle = '详情'
+        this.formDisabled = true
+        this.mergeModel(data)
+      }
+      if (opt === 'other') {
+        this.mergeModel(data)
+      }
+    },
+    //初始化表单
+    initModel() {
+      this.model = {}
+      this.formItems.forEach((formItem) => {
+        if (!formItem.attrs || !formItem.attrs.model) return //跳过没有model的属性(插槽)
+        this.$set(this.model, formItem.attrs.model, formItem.attrs.value ? formItem.attrs.value : '')
+      })
+    },
+    //表单合并赋值
+    mergeModel(data) {
+      this.model = Object.assign(this.model, data)
+    },
+    submitForm() {
+      // 触发表单验证
+      this.$refs.relForm.validate((valid) => {
+        if (!valid) {
+          return
+        }
+        this.$emit('dialogSubmit', this.model)
+      })
+    },
+    handleCancel() {
+      this.visible = false
+      this.formDisabled = false
+      this.isMerge = false
+    },
+  },
+  watch: {
+    /* formItems: {
+      handler() {
+        console.log(222)
+        this.formItems.forEach((formItem) => {
+          if (!formItem.attrs || !formItem.attrs.model) return //跳过没有model的属性(插槽)
+          this.$set(
+            this.model,
+            formItem.attrs.model,
+            this.model[formItem.attrs.model] ? this.model[formItem.attrs.model] : formItem.attrs.value
+          )
+        })
+      },
+      deep: true,
+      immediate: true,
+    }, */
+  },
+}
+</script>

src/main.js

@@ -12,12 +12,20 @@ import Message from './components/message';
 import erupload from "./components/upload";
 import lkyTable from "./components/publicModule/lkyTable" // 本组件样式包含普通表格、分页
 import lkyPagination from "./components/publicModule/lkyPagination" // 本组件单独抽离分页样式
+
+import * as cusRule from '@/loveflow/rules'
+import { registerPlugins } from '@/loveflow/plugins/index'
+import FormDialog from '@/loveflow/components/modal/formDialog.vue'
+Vue.prototype.$rules = cusRule
+registerPlugins(Vue)
+
 Vue.use(ElementUI);
 Vue.use(Message);
 Vue.use(HighchartsVue)
 Vue.component('erupload', erupload)
 Vue.component('lkyTable', lkyTable)
 Vue.component('lkyPagination',lkyPagination)
+Vue.component('FormDialog', FormDialog)
 const vm = new Vue({
   el: '#app',
   router,