5.29

src/components/Form/FormConfig.js

@@ -0,0 +1,219 @@
+export default {
+	formItems: [{
+			input: true, //是input
+			label: "input+正则", //字段
+			prop: "input", //字段名
+			placeholder: "请填写手机号", //提示内容
+			width: 12, //参考el-col
+			disabled: false, //是否禁用
+			unit:'单位',
+			rules: [{
+				required: true,
+				message: '联系方式'
+			}] //验证
+		}, {
+			textarea: true, //是input
+			label: "输入框", //字段
+			prop: "textearea", //字段名
+			placeholder: "请填写输入框", //提示内容
+			width: 12, //参考el-col
+			disabled: false, //是否禁用
+			rules: [{
+				required: true,
+				message: '输入框'
+			}, ] //验证
+		},
+		{
+			select: true,
+			label: "选择框",
+			prop: "select",
+			placeholder: "请选择",
+			width: 12, //参考el-col
+			disabled: false,
+			options: [{
+				label: "options1",
+				value: "1"
+			}, {
+				label: "options2",
+				value: "2"
+			}, ],
+			rules: [{
+				required: true,
+				message: '选择框不能为空！'
+			}]
+		}, {
+			searchSelect: true,
+			label: "select搜索框",
+			prop: "searchSelect",
+			placeholder: "请选择",
+			width: 12, //参考el-col
+			disabled: false,
+			options: [],
+			rules: [{
+				required: true,
+				message: 'select搜索框！'
+			}]
+		}, {
+			dateTimeRange: true,
+			label: "年月日时分秒开",
+			prop: "dateTimeRange",
+			width: 12, //参考el-col
+			disabled: false,
+			options: {
+				selectableRange: '18:30:00 - 20:30:00'
+			},
+			rules: [{
+				required: true,
+				message: '年月日时分秒开'
+			}, ]
+		}, {
+			timePicker: true,
+			label: "时分秒选择器",
+			prop: "timePicker",
+			placeholder: "请选择",
+			width: 12, //参考el-col
+			disabled: false,
+			options: "",
+			rules: [{
+				required: true,
+				message: '时分秒选择器'
+			}, ]
+		}, {
+			timePickerIsRange: true,
+			label: "时分秒开始结束",
+			prop: "timePickerIsRange",
+			placeholder: "请选择",
+			width: 12, //参考el-col
+			disabled: false,
+			options: "",
+			rules: [{
+				required: true,
+				message: '时分秒开始结束'
+			}, ]
+		}, {
+			datePicker: true,
+			label: "年月日选择器",
+			prop: "datePicker",
+			placeholder: "请选择",
+			width: 12, //参考el-col
+			disabled: false,
+			options: "",
+			rules: [{
+				required: true,
+				message: '年月日选择器'
+			}, ]
+		}, {
+			datePickerIsRange: true,
+			label: "年月日开始结束",
+			prop: "datePickerIsRange",
+			placeholder: "请选择",
+			width: 12, //参考el-col
+			disabled: false,
+			options: "",
+			rules: [{
+				required: true,
+				message: '年月日开始结束'
+			}, ]
+		}, {
+			dateTime: true,
+			label: " 年月日时分秒",
+			prop: "dateTime",
+			placeholder: "请选择",
+			width: 12, //参考el-col
+			disabled: false,
+			options: "",
+			rules: [{
+				required: true,
+				message: ' 年月日时分秒'
+			}, ]
+		}, {
+			switch: true,
+			label: "switch",
+			prop: "switch",
+			placeholder: "请选择",
+			width: 12, //参考el-col
+			disabled: false,
+			rules: [{
+				required: true,
+				message: 'switch'
+			}, ]
+		}, {
+			radio: true,
+			label: "单选框",
+			prop: "radio",
+			placeholder: "请选择",
+			width: 12, //参考el-col
+			disabled: false,
+			options: [{
+				label: "单选框1",
+				value: "1"
+			}, {
+				label: "单选框2",
+				value: "2"
+			}, ],
+			rules: [{
+				required: true,
+				message: '单选框不能为空'
+			}, ]
+		}, {
+			checkbox: true,
+			label: "复选框",
+			prop: "checkbox",
+			disabled: false,
+			width: 12, //参考el-col
+			options: [{
+				label: "复选框1",
+				value: "1"
+			}, {
+				label: "复选框2",
+				value: "2"
+			}, {
+				label: "复选框3",
+				value: "3"
+			}, ],
+			rules: [{
+				required: true,
+				message: '复选框不能为空'
+			}, ]
+		},
+		{
+			upload: true,
+			label: "文件上传",
+			prop: "upload",
+			disabled: false,
+			uploadObj: {
+				fileType: "2001",
+				limit: 1, //上传长度限制
+				hideUpload: false, //是否隐藏上传框
+ 
+			},
+			rules: [{
+				required: true,
+				message: '文件上传'
+			}, ]
+		},
+		{
+			button: true,
+			label: "按钮",
+			prop: "buttona",
+			placeholder:"发送验证码",
+			width: 12, //参考el-col
+			disabled: false,
+		},
+		{
+			text: true,
+			label: "文本",
+			prop: "text",
+			width: 12, //参考el-col
+			disabled: false,
+		},
+		{
+			quillEditor: true,
+			label: "富文本",
+			prop: "quill",
+			disabled: false,
+		},
+    ],
+    refVerification:'ruleForm',
+	
+}

src/components/Form/MyForm.vue

@@ -0,0 +1,284 @@
+<template>
+    <el-form :model="formData" class="demo-ruleForm" :ref="refVerification" label-position="left" label-width="120px">
+        <el-col v-for=" (formItems, index) in formItems" v-show="!formItems.notShow" :key="index"
+            :span="formItems.width ? formItems.width : 24">
+            <el-form-item :label="formItems.label" :prop="formItems.prop" :rules="formItems.rules">
+                <!-- inupt输入框 -->
+                <el-input v-if="formItems.input" v-model="formData[formItems.prop]" size="small"
+                    :disabled="formItems.disabled" :placeholder="formItems.placeholder"
+                    @input="inputINPUT($event, index, formItems.prop)"
+                    @change="inputChange($event, index, formItems.prop)" />
+                <!-- textarea输入框 -->
+                <el-input v-if="formItems.textarea" v-model="formData[formItems.prop]" size="small" type="textarea"
+                    :rows="formItems.rows" :disabled="formItems.disabled" :placeholder="formItems.placeholder" />
+                <!-- select选择器 -->
+                <el-select v-if="formItems.select" v-model="formData[formItems.prop]" size="small"
+                    :disabled="formItems.disabled" :placeholder="formItems.placeholder"
+                    @change="selectChange($event, index, formItems.prop)">
+                    <el-option v-for="(options, sIndex) in formItems.options" :key="sIndex" :label="options.label"
+                        :value="options.value" />
+                </el-select>
+                <!-- select搜索框 -->
+                <el-select v-if="formItems.searchSelect" v-model="formData[formItems.prop]" size="small"
+                    :disabled="formItems.disabled" filterable remote reserve-keyword :placeholder="formItems.placeholder"
+                    :remote-method="(query) => remoteMethod(query, index, formItems.prop)" :loading="searchSelectLoading"
+                    @change="selectChange($event, index, formItems.prop)">
+                    <el-option v-for="(item, ssIndex) in formItems.options" :key="ssIndex" :label="item.label"
+                        :value="item.value" />
+                </el-select>
+                <!-- 年月日时分秒选择器 -->
+                <el-date-picker v-if="formItems.dateTime" v-model="formData[formItems.prop]"
+                    value-format="yyyy-MM-dd HH:mm:ss" type="datetime" size="small" :disabled="formItems.disabled"
+                    :placeholder="formItems.placeholder" />
+                <!-- 年月日时分秒，开始和结束时间 -->
+                <el-date-picker v-if="formItems.dateTimeRange" v-model="formData[formItems.prop]"
+                    value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" size="small" type="datetimerange"
+                    :disabled="formItems.disabled" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
+                <!-- 时分秒选择器 -->
+                <el-time-picker v-if="formItems.timePicker" v-model="formData[formItems.prop]" value-format="HH:mm:ss"
+                    format="HH:mm:ss" size="small" :disabled="formItems.disabled" :placeholder="formItems.placeholder"
+                    :picker-options="formItems.options" />
+                <!-- 时分秒选择器，开始和结束时间 -->
+                <el-time-picker v-if="formItems.timePickerIsRange" v-model="formData[formItems.prop]"
+                    value-format="HH:mm:ss" format="HH:mm:ss" is-range size="small" :disabled="formItems.disabled"
+                    range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围" />
+                <!-- 年月日选择器 -->
+                <el-date-picker v-if="formItems.datePicker" v-model="formData[formItems.prop]" value-format="yyyy-MM-dd"
+                    size="small" :disabled="formItems.disabled" :placeholder="formItems.placeholder" />
+                <!-- 年月日选择器，开始和介绍年月日 -->
+                <el-date-picker v-if="formItems.datePickerIsRange" v-model="formData[formItems.prop]"
+                    value-format="yyyy-MM-dd" type="daterange" size="small" :disabled="formItems.disabled"
+                    :placeholder="formItems.placeholder" range-separator="至" start-placeholder="开始日期"
+                    end-placeholder="结束日期" />
+                <!-- switch开关 -->
+                <el-switch v-if="formItems.switch" v-model="formData[formItems.prop]" size="small"
+                    :disabled="formItems.disabled" @change="formSwitchChange($event, index, formItems.prop)" />
+                <!-- radio单选框 -->
+                <el-radio-group v-if="formItems.radio" v-model="formData[formItems.prop]" :disabled="formItems.disabled">
+                    <el-radio v-for="(options, rIndex) in formItems.options" :key="rIndex" :label="options.label"
+                        :value="options.value" />
+                </el-radio-group>
+                <!-- checkbox复选框 -->
+                <el-checkbox-group v-if="formItems.checkbox" v-model="formData[formItems.prop]"
+                    :disabled="formItems.disabled">
+                    <el-checkbox v-for="options in formItems.options" :key="options.value" :label="options.label" />
+                </el-checkbox-group>
+
+                <!-- 文件上传 -->
+                <!-- 如果对象有值就回显，没有值就为空 -->
+                <el-upload v-if="formItems.upload" :ref="formItems.prop"
+                    :accept="formItems.accept ? formItems.accept : 'PNG,JPEG'"
+                    :file-list="formData[formItems.prop] ? formData[formItems.prop] : []"
+                    :action="`${uploadUrl}${formItems.uploadObj.fileType ? formItems.uploadObj.fileType : ''}`"
+                    :limit="formItems.uploadObj.limit"
+                    :class="{ 'hide': formItems.uploadObj.hideUpload || formData[formItems.prop].length == formItems.uploadObj.limit }"
+                    :on-preview="handlePictureCardPreview"
+                    :on-remove="(file, fileList) => handleRemove(file, fileList, formItems.uploadObj.limit, formItems.prop, index)"
+                    :on-success="(response, file, fileList) => uploadSuccess(response, file, fileList, formItems.uploadObj.limit, formItems.prop, index)"
+                    list-type="picture-card" :auto-upload="true">
+                    <i slot="default" class="el-icon-plus" />
+                </el-upload>
+                <el-dialog v-if="formItems.upload" :visible.sync="dialogVisible" :append-to-body="true" width="40%">
+                    <img width="100%" :src="dialogImageUrl" alt="">
+                </el-dialog>
+
+                <!-- 按钮 -->
+                <el-button v-if="formItems.button" size="small" :disabled="formItems.disabled" :loading="formItems.loading"
+                    :type="formItems.buttonType || 'primary'" @click="buttonClick(formItems.prop, index)">
+                    {{ formItems.placeholder }}
+                </el-button>
+                <!-- text展示 -->
+                <span v-if="formItems.text" v-text="formData[formItems.prop]" />
+                <!-- 计量单位 -->
+                <span v-if="formItems.unit" class="left10">{{ formItems.unit }}</span>
+
+                <!-- 高德地图 -->
+                <!-- <div class="amap_div" v-if="formItems.aMap">
+					<el-input size="small" v-model="formData[formItems.prop]" @input="aMapInput($event,formItems.prop)"></el-input>
+					<ul v-show="searchShow==formItems.prop" class="sreach_ul">
+						<li @click="selectVal(sval,formItems.prop,index)" v-for=" (sval, index) in setSearchVal" :key="index">{{sval.name}}
+							<span style="color:#8591A6 ;font-size: 12px;">{{sval.district}}</span>
+						</li>
+					</ul>
+					<aMap :ref="'aMap'+formItems.prop" :aMapId="'aMapId'+formItems.prop" :location="formData[formItems.prop+'location']" @cbSearch="cbSearch($event,formItems.prop)"></aMap>
+				</div> -->
+
+            </el-form-item>
+        </el-col>
+    </el-form>
+</template>
+<script>
+export default {
+    name: "MyForm",
+    model: {
+        prop: 'modelValue',
+        event: 'update:modelValue',
+    },
+    props: {
+        modelValue: Object,
+        formItems: {
+            type: Array,
+            required: true
+        },
+        searchSelectOptionsCb: {
+            type: Array,
+        },
+        refVerification: {
+            type:String,
+        }
+    },
+    data() {
+        let uploadFileUrl = this.$store.state.user.uploadFileUrl;
+        return {
+            formData: {},
+            uploadUrl: uploadFileUrl,
+            dialogImageUrl: '',
+            searchSelectLoading: false,
+            dialogVisible: false,
+            disabled: false,
+            searchShow: '', //高德地图input收索联想
+            setSearchVal: [], //高德地图赋值搜索内容
+        };
+    },
+    emits: ['update:modelValue'],
+    created() {
+        // 表单初始化
+        for (let item of this.formItems) {
+            // 注意：这里要进行响应式的设置，否则表单控件会无法输入的
+            this.$set(this.formData, item.prop, '')
+        }
+        this.$emit('update:modelValue', this.formData)
+    },
+    watch: {
+        formData: {
+            handler(newValue) {
+            },
+            deep: true,
+        },
+    },
+    methods: {
+        //select变化调用
+        selectChange(value, index, prop) {
+            this.$emit('selectChange', value, index, prop);
+        },
+        // input的input事件
+        inputINPUT(value, index, prop) {
+            this.$emit('inputINPUT', value, index, prop);
+        },
+        // input的change事件
+        inputChange(value, index, prop) {
+            this.$emit('inputChange', value, index, prop);
+        },
+        // 搜索类型select搜索
+        remoteMethod(query, index, prop) {
+            if (query) {
+                this.searchSelectLoading = true;
+                this.$emit('querySelectValue', query, index, prop);
+                setTimeout(() => {
+                    this.formItems[index].options = this.searchSelectOptionsCb;
+                    this.searchSelectLoading = false;
+                }, 500)
+            } else {
+                this.searchSelectOptios = [];
+            }
+        },
+        //switch变化
+        formSwitchChange(val, index, prop) {
+            this.$emit("formSwitchChange", val, index, prop);
+        },
+        //按钮点击事件
+        buttonClick(prop, index) {
+            this.$emit("buttonClick", prop, index);
+        },
+
+        //文件上传成功回调
+        uploadSuccess(response, file, fileList, limit, prop, index) {
+            this.formItems[index].uploadObj.hideUpload = fileList.length == limit;//文件列表变化后判断当前文件列表长度是否等于限制长度。目的，当长度相等时隐藏文件上传按钮
+            this.pushUpload(file, fileList, limit, prop);
+        },
+        //文件删除
+        handleRemove(file, fileList, limit, prop, index) {
+            this.formItems[index].uploadObj.hideUpload = fileList.length == limit;//文件删除后判断当前文件列表长度是否等于限制长度。目的，当长度相等时隐藏文件上传按钮
+            this.pushUpload(file, fileList, limit, prop);
+        },
+        // 文件预览
+        handlePictureCardPreview(file) {
+            this.dialogImageUrl = file.url;
+            this.dialogVisible = true;
+        },
+
+        //提交时验证表单，直接在父级调用
+        submitForm() {
+            let formValidate = Boolean;
+            this.$refs.refVerification.validate((valid) => {
+                if (valid) {
+                    formValidate = true;
+                } else {
+                    this.$message.warning("请把信息填写完整！");
+                    formValidate = false;
+                }
+            });
+            return formValidate;
+        },
+        /* 清空表单
+            逻辑：
+            1 、如果要清空文件上传列表，要传入要清空的upload的字段名，假如多个upload用for循环，调用清空方法！
+            2、清空upload之后，还要把upload上传框展示出来，通过字段名比对，获取到在formItems中的下标，通过下标操作对象属性，进行展示
+         */
+        resetForm(uploadArr) {
+            this.$refs.ruleForm.resetFields();
+            if (uploadArr) {
+                for (let i = 0; i < uploadArr.length; i++) {
+                    this.$refs[uploadArr[i]][0].clearFiles();
+                    let index = this.formItems.findIndex(item => item.prop == uploadArr[i]);
+                    this.formItems[index].uploadObj.hideUpload = false;
+                }
+            }
+        },
+        // 单个字段验证
+        validateFieldProp(prop) {
+            let formValidate = Boolean;
+            this.$refs.ruleForm.validateField(prop, valid => {
+                if (!valid) {
+                    formValidate = true;
+                } else {
+                    formValidate = false;
+                }
+            });
+            return formValidate;
+        },
+        // 对文件上传，删除进行赋值，调用form验证
+        pushUpload(file, fileList, limit, prop) {
+            if (fileList.length > 0) {
+                this.formData[prop] = fileList;
+            } else {
+                // 表示没有数据,把字段置空
+                this.formData[prop] = "";
+            }
+            this.$refs.ruleForm.validateField(prop);//调用验证form表单的文件上传
+        },
+        //地图input的input事件
+        aMapInput(value, prop) {
+            this.$refs[`aMap${prop}`][0].getSearch(value);
+        },
+        //子组件返回地图搜索值
+        cbSearch(val, prop) {
+            this.setSearchVal = val.tips; //子组件
+            this.searchShow = prop; //显示input输入联想
+        },
+        //选中地图值
+        selectVal(val, prop, index) {
+            // 赋值的时候，拿到键，及formItems的下标，进行赋值
+            this.formData[prop] = val.name; //input输入框赋值
+            this.formData.district = val.district; //传入省市区
+            let lngLat = {
+                lng: val.location.lng,
+                lat: val.location.lat
+            };
+            this.formData[`${prop}location`] = lngLat;
+            this.searchShow = ''; //隐藏input输入联想
+        },
+
+    }
+}
+</script>

src/components/Form/index.vue

@@ -0,0 +1,78 @@
+<template>
+    <div>
+      <MyForm ref="publicForm" :formItems="formItems" :formData="formData" :searchSelectOptionsCb="searchSelectOptionsCb"
+        @selectChange="selectChange" @inputINPUT="inputINPUT" @inputChange="inputChange"
+        @querySelectValue="querySelectValue" @formSwitchChange="formSwitchChange" @buttonClick="buttonClick">
+      </MyForm>
+    </div>
+  </template>
+   
+  <script>
+  import MyForm from '../../components/Form/MyForm.vue';
+  import formJs from '@/components/Form/FormConfig.js'
+  export default {
+    components: {
+      MyForm
+    },
+    data() {
+      return {
+        dialog: false, //弹出框
+        formItems: formJs.formItems,
+        formData: {},
+        searchSelectOptionsCb: [], //form表单搜索select返回值
+      };
+    },
+    created() {
+    },
+    watch: {
+      dialog(newVal, oldVal) {
+        if (!newVal) {
+          this.$refs.publicForm.resetForm(); //窗口关闭清空表单
+        }
+      },
+    },
+    methods: {
+      // select选择框变化
+      selectChange(value, index, prop) {
+        console.log(value, index, prop)
+      },
+      // inpuit变化
+      inputINPUT(value, index, prop) {
+        console.log(value, index, prop)
+      },
+      // inpuit Change
+      inputChange(value, index, prop) {
+        console.log(value, index, prop)
+      },
+      // select 搜索值
+      querySelectValue(value, index, prop) {
+        console.log(value, index, prop)
+        let arr = [{
+          label: '搜索返回1号',
+          value: 1
+        }, {
+          label: '搜索返回2号',
+          value: 2
+        }];
+        this.searchSelectOptionsCb = arr;
+      },
+      // form表单switch变化
+      formSwitchChange(val, index, prop) {
+        console.log(val, index, prop)
+      },
+      // 按钮点击
+      buttonClick(index, prop) {
+        console.log(index, prop)
+      },
+      dialogOK() {
+        //判断表单验证是否通过
+        if (this.$refs.publicForm.submitForm()) {
+          console.log("success");
+          console.log(this.formData)
+        } else {
+          console.log("error")
+        }
+      },
+    }
+  }
+  </script>

src/views/Sys/Continuousconfiguration.vue

@@ -0,0 +1,297 @@
+<template>
+    <div class="page">
+        <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small" label-width="130px"
+            style="text-align:center;">
+            <el-row>
+                <el-col :span="6">
+                    <el-form-item label="车牌号">
+                        <el-input v-model="formInline.licenseNo" placeholder="请输入车牌号" class="widths"></el-input>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                    <el-form-item label="车架号">
+                        <el-input v-model="formInline.frameNo" placeholder="请输入车架号" class="widths"></el-input>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                    <el-form-item label="订单状态">
+                        <el-select v-model="formInline.orderstatus" class="widths">
+                            <el-option label="待继续" value="0"></el-option>
+                            <el-option label="已核保待缴费" value="5"></el-option>
+                            <el-option label="已承保" value="7"></el-option>
+                            <el-option label="已关闭" value="99"></el-option>
+
+                        </el-select>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                    <el-button type="primary" size="small">查询</el-button>
+                    <el-button type="danger" size="small" @click="dialogVisible = true">新增</el-button>
+                </el-col>
+            </el-row>
+        </el-form>
+        <el-table size="small" :data="pageResult" height="690" border style="width: 100%" v-loading="loading"
+            highlight-current-row stripe
+            :header-cell-style="{ background: '#F2F7FC', fontWeight: '700', color: '#606266' }">
+            <el-table-column prop="id" label="ID" width="300" align="center"></el-table-column>
+            <el-table-column prop="insCompanyId" label="保险公司" width="100" align="center"></el-table-column>
+            <el-table-column prop="username" label="账号" align="center" width="150"></el-table-column>
+            <el-table-column prop="password" label="密码" align="center" width="200"></el-table-column>
+            <el-table-column prop="userId" label="操作人" align="center" width="200"></el-table-column>
+            <el-table-column label="操作" align="center" min-width="300" fixed="right">
+                <template slot-scope="scope">
+                    <el-button size="mini" type="text" @click="CloseEdit(scope.$index, scope.row)">编辑</el-button>
+                    <el-button size="mini" type="text" @click="empowerBtn(scope.$index, scope.row)">授权</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+        <!-- 分页功能 -->
+        <div class="block">
+            <el-pagination @size-change="applyhandleSizeChange" @current-change="applyhandleCurrentChange"
+                :current-page="pageNum" :page-size="pageSize" :page-sizes="[10, 20, 50, 100]"
+                layout="total, sizes, prev, pager, next, jumper" :total="totalSize"></el-pagination>
+        </div>
+        <el-dialog title="渠道信息新增" :visible.sync="dialogVisible" width="70vw">
+            <el-form class="demo-ruleForm" :inline="true" :model="attributionform" ref="attributionform" label-width="130px"
+                size="small" style="margin-top:30px;">
+                <el-row>
+                    <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8" :span="8">
+                        <el-form-item label="保险公司：">
+                            <el-select class="widths1" v-model="attributionform.insCompanyId" @change="companyChange">
+                                <el-option v-for="(item, index) in companyselect" :key="index.id" :label="item.namesimple"
+                                    :value="item.id"></el-option>
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8" :span="8">
+                        <el-form-item prop="username" label="用户名：" :rules="[
+                            { required: true, message: '请输入用户名', trigger: 'blur' },
+                        ]">
+                            <el-input v-model="attributionform.username" class="widths1"></el-input>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8" :span="8">
+                        <el-form-item prop="password" label="密码：" :rules="[
+                            { required: true, message: '请输入密码', trigger: 'blur' },
+                        ]">
+                            <el-input v-model="attributionform.password" class="widths1"></el-input>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8" :span="8"
+                        v-for="(domain, index) in  attributionform.fields" :key="domain.index">
+                        <el-form-item :label="domain.label + ':'" :prop="'fields.' + index + '.value'" :rules="{
+                            required: true, message: domain.label + '不能为空', trigger: 'blur'
+                        }">
+                            <el-input class="widths1" v-model="domain.value" :type="domain.type"></el-input>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+            </el-form>
+            <span slot="footer" class="dialog-footer">
+                <el-button size="small" @click="dialogVisible = false">取 消</el-button>
+                <el-button size="small" type="primary" @click="submitForm('attributionform')">提 交</el-button>
+            </span>
+        </el-dialog>
+        <el-dialog title="归属授权" :visible.sync="empowerdialogVisible" width="50vw">
+            <div style=" padding:20px;max-height: 500px; overflow-y: auto;">
+                <el-input placeholder="输入关键字进行过滤" v-model="filterText" style="margin-bottom:20px;">
+                </el-input>
+                <el-tree class="filter-tree" :data="treedata" accordion :props="defaultProps" show-checkbox node-key="id"
+                    :filter-node-method="filterNode" ref="tree" @check="treechange">
+                </el-tree>
+            </div>
+            <span slot="footer" class="dialog-footer">
+                <el-button size="mini" @click="empowerdialogVisible = false">取 消</el-button>
+                <el-button size="mini" type="primary" @click="treesubmit()">保 存</el-button>
+            </span>
+        </el-dialog>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            filterText: '',
+            treedata: [],//树形数据
+            defaultProps: {
+                children: 'children',
+                label: 'name'
+            },
+            loading: false,//加载效果
+            dialogVisible: false,//归属信息弹框
+            empowerdialogVisible: false,//授权弹框
+            pageNum: 1,//页数
+            pageSize: 20,//条数
+            totalSize: null,//总数
+            pageResult: [],//表格数据
+            formInline: {
+                licenseNo: '',//车牌号
+                frameNo: '',//车架号
+                orderstatus: "",//订单状态
+                monthvalue: "",//日期
+            },
+            attributionform: {
+                fields: [],
+                insCompanyId: "",
+                password: "",
+                username: "",
+                id: "",
+            },
+            pageRequest: {
+                "pageNum": 1,
+                "pageSize": 20,
+                "columnFilters": {
+                    "parentId":
+                    {
+                        "name": "parentId",
+                        "value": "0"
+                    }
+                }
+            },
+            companyselect: [],
+            fieldslist: [],
+            treeparams: {
+                deptIds: [],
+                attributionId: "",
+                insCompanyId: "",
+            }
+        }
+    },
+    created() {
+        this.$api.insCompany.attribution(this.pageNum, this.pageSize).then((res) => {
+            this.pageResult = res.data.content;
+            this.pageSize=res.data.pageSize;
+            this.pageNum=res.data.pageNum;
+            this.totalSize=res.data.totalSize;
+        })
+        this.$api.insCompany.findPage(this.pageRequest).then((res) => {
+            this.companyselect = res.data.content;
+        })
+        this.$api.dept.findDeptTree().then((res) => {
+            this.treedata = res.data;
+        })
+    },
+    watch: {
+        filterText(val) {
+            this.$refs.tree.filter(val);
+        }
+    },
+    methods: {
+        //获取选中节点
+        treechange(data, node) {
+            var treelist = [];
+            node.checkedKeys.map(ele => {
+                treelist.push(ele);
+            })
+            this.treeparams.deptIds = treelist;
+        },
+        //节点过滤
+        filterNode(value, data) {
+            console.log(value, data)
+            if (!value) return true;
+            return data.name.indexOf(value) !== -1;
+        },
+        //选择保险公司获取归属模板
+        companyChange(e) {
+            this.$api.insCompany.attributionTemplate(e).then((res) => {
+                if (res.data) {
+                    this.fieldslist = JSON.parse(res.data.fields);
+                    this.fieldslist.map((ele, index) => {
+                        this.attributionform.fields.push({
+                            field: ele.field,
+                            isEdit: ele.isEdit,
+                            label: ele.label,
+                            type: ele.type,
+                            value: "",
+                        });
+                    })
+                } else {
+                    this.$message({ message: "暂无信息", type: "warning"});
+                }
+            })
+        },
+        //提交授权
+        treesubmit() {
+            if (this.treeparams.deptIds.length > 0) {
+                this.$api.insCompany.authorize(this.treeparams).then((res) => {
+                    if(res.code=='200'){
+                        this.$message({ message: "保存成功", type: "success" });
+                        this.empowerdialogVisible=false;
+                    }
+                })
+            } else {
+                this.$message({ message: "未选择归属机构", type: "warning" });
+            }
+        },
+        //提交表单
+        submitForm(formName) {
+            this.$refs[formName].validate((valid) => {
+                if (valid) {
+                    let params = {
+                        fields: JSON.stringify(this.attributionform.fields),
+                        id: this.attributionform.id,
+                        insCompanyId: this.attributionform.insCompanyId,
+                        password: this.attributionform.password,
+                        username: this.attributionform.username,
+                    }
+                    this.$api.insCompany.attributionsave(params).then((res) => {
+                        if (res.code == '200' && !res.msg) {
+                            this.$message({ message: '保存成功', type: "success" });
+                            this.dialogVisible = false;
+                        } else {
+                            this.$message({ message: res.msg, type: "warning" });
+                        }
+                    })
+                } else {
+                    this.$message({ message: "请检查信息", type: "warning" });
+                    return false;
+                }
+            });
+        },
+        //授权操作
+        empowerBtn(index, row) {
+            this.empowerdialogVisible = true;
+            this.treeparams.attributionId = row.id;
+            this.treeparams.insCompanyId = row.insCompanyId;
+        },
+        //编辑操作 
+        CloseEdit(index, row) {
+            let fileslist = JSON.parse(row.fields);
+            this.attributionform = {
+                fields: fileslist,
+                id: row.id,
+                insCompanyId: row.insCompanyId,
+                password: row.password,
+                username: row.username,
+            };
+            this.dialogVisible = true;
+        },
+        // 设置每页条数
+        applyhandleSizeChange(val) {
+            this.pageSize = val;
+            this.pageNum = 1;
+            this.pageRequest.pageNum = 1;
+            this.pageRequest.pageSize = val;
+            this.findPage();
+        },
+        // 当前页
+        applyhandleCurrentChange(val) {
+            this.pageNum = val;
+            this.pageRequest.pageNum = val;
+            this.findPage();
+        },
+
+    }
+}
+</script>
+<style>
+.saomazhifucodeClass .el-dialog__body,
+.saomazhifucodeClass .el-dialog__header {
+    padding: 0;
+}
+</style>
+<style scoped>
+.widths1 {
+    width: 250px;
+}
+</style>