Merge branch 'master' of http://www.beijingsoft.cn:9090/r/smart-web

lzhe

2024-05-08 6f0d83f7e826d52121744b1524c7d8dc94029b29

Merge branch 'master' of http://www.beijingsoft.cn:9090/r/smart-web

 src/views/tpm/MachineTab.vue

@@ -1,7 +1,7 @@
<!--
 * @Date: 2024-04-27 20:04:34
 * @LastEditors: Sneed
 * @LastEditTime: 2024-04-27 21:51:12
 * @LastEditTime: 2024-05-07 22:40:21
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/tpm/MachineTab.vue
-->
<template>
@@ -18,25 +18,26 @@
            <el-header>
                <div class="left-panel">
                    <el-button size="small" @click="table_add" type="primary" icon="el-icon-plus"></el-button>
                    <el-button size="small" type="danger" plain icon="el-icon-delete" @click="batchDel"></el-button>
                    <el-button size="small" type="danger" plain icon="el-icon-delete" @click="batchDel"
                        :disabled="selection.length == 0"></el-button>
                    <!-- <el-button type="primary" plain>导入</el-button>
                                    <el-button type="primary" plain>批量操作</el-button> -->
                </div>
                <div class="right-panel">
                    <div class="right-panel-search">
                        <span>类型</span>
                        <el-select size="small" v-model="params.machineTypeId" style="width: 240px">
                            <el-option size="small" v-for="item in types" :key="item.value" :label="item.label"
                        <el-select v-model="params.machineTypeId" style="width: 240px" clearable>
                            <el-option v-for="item in types" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                        <span>状态</span>
                        <el-select size="small" v-model="params.status" style="width: 240px">
                            <el-option size="small" v-for="item in status" :key="item.value" :label="item.label"
                        <el-select v-model="params.status" style="width: 240px">
                            <el-option v-for="item in status" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                        <el-input size="small" v-model="params.machineName" style="width: 240px" placeholder="请输入机器名称"
                        <el-input v-model="params.machineName" style="width: 240px" placeholder="请输入机器名称"
                            clearable></el-input>
                        <el-button size="small" @click="search" type="primary" icon="el-icon-search"></el-button>
                        <el-button @click="search" type="primary" icon="el-icon-search"></el-button>
                    </div>
                </div>
            </el-header>
@@ -57,7 +58,10 @@
                            <el-button-group>
                                <el-button text type="primary" size="small"
                                    @click="table_edit(scope.row, scope.$index)">编辑</el-button>
                                <el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index, '0')">
                                <el-popconfirm cancel-button-text="停用" confirm-button-text="删除"
                                    title="删除数据会影响已关联的业务 ,若您想在已关联的业务中依然显示这些数据, æ‚¨å¯ä»¥é€‰æ‹© åœç”¨ æ“ä½œã€‚停用后此数据将不能再被新业务使用。"
                                    @confirm="table_del(scope.row, scope.$index, '0')"
                                    @cancel="table_del(scope.row, scope.$index, '1')">
                                    <template #reference>
                                        <el-button text type="primary" size="small">删除</el-button>
                                    </template>
@@ -66,26 +70,28 @@
                        </template>
                    </el-table-column>
                </scTable>

            </el-main>
        </el-container>
        <Dialog ref="dialog" @success="success"></Dialog>
    </el-container>
</template>

<script>
import Dialog from './machine/Dialog.vue'
export default {
    components: {
        Dialog
    },
    data() {
        return {
            apiObj: this.$API.machineManagement.getList,
            group: [],
            treeCheckKey: '',
            params: {
                groupId: '',
                machineCode: '',
                machineName: '',
                machineTypeId: '',
                status: 1,
            },
            treeCheckKey: '',
            status: [
                {
                    label: '启用',
@@ -96,31 +102,78 @@
                    value: 0
                }
            ],
            types: []
            types: [],
            selection: []
        }
    },
    created() {
        this.init()
        this.getTreeData()
    },
    methods: {
        init() {
            this.$HTTP.get('/api/blade-cps/device-types/page?keyWord=&current=1&size=-1').then(res => {
                if (res.code === 200) {
                    this.types = res.data.records.map(item => ({
                        label: item.name,
                        value: item.id
                    }))
                }
            })
        },
        getTreeData() {
            this.$HTTP.get('/api/blade-cps/group/tree?groupCategory=1&groupType=group_machine').then(res => {
                if (res.code === 200) {
                    this.group = res.data
                    this.params.groupId = res.data[0].id
                    // this.params.groupId = res.data[0].id
                    this.nodeClick(res.data[0])
                }
            })
        },
        nodeClick(node) {
            this.params.groupId = node.id
            this.search()
        },
        search() {
            this.$refs.table.reload(this.params)
        },
        table_add() {
            this.$router.push(`/tpm/machine/create`);
            this.$refs.dialog.open('add', {
                groupId: this.params.groupId
            })
        },
        batchDel() { },
        table_edit(row) {
            this.$refs.dialog.open('edit', { id: row.id })
        },
        success() {
            this.getTreeData()
        },
        table_del(row, index, type) {
            this.$HTTP.delete(`/api/blade-cps/machine?type=${type}`, {
                ids: [row.id]
            }).then(res => {
                if (res.code === 200) {
                    this.$message.success("操作成功");
                    this.getTreeData()
                }
            })
        },
        selectionChange(selection) {
            this.selection = selection
        },
        batchDel() {
            if (this.selection.length === 0) {
                return this.$message.warning("请选择");
            }
            this.$HTTP.delete(`/api/blade-cps/machine?type=1`, {
                ids: this.selection.map(item => item.id)
            }).then(res => {
                if (res.code === 200) {
                    this.$message.success("操作成功");
                    this.getTreeData()
                }
            })
        },
    }
}
</script>

 src/views/tpm/machine/Dialog.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,578 @@
<template>
    <el-dialog :title="titleMap[mode]" v-model="visible" :width="1100" destroy-on-close @closed="$emit('closed')">
        <el-form :model="form" :rules="rules" :disabled="mode == 'show'" ref="dialogForm" label-width="120px"
            label-position="center" v-if="visible">
            <el-row>
                <el-col :span="24" style="padding:12px 0;">
                    åŸºç¡€æ•°æ®
                </el-col>
                <el-col :span="8">
                    <el-form-item label="机器编号" prop="machineCode">
                        <el-input style="width: 240px" disabled v-model="form.machineCode"
                            placeholder="保存时系统自动生成"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="短编号" prop="shortCode">
                        <el-input style="width: 240px" v-model="form.shortCode" placeholder="短编号" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="机器PIN码" prop="pinCode">
                        <el-input style="width: 240px" v-model="form.pinCode" placeholder="机器PIN码" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="机器名称" prop="machineName">
                        <el-input style="width: 240px" v-model="form.machineName" placeholder="机器名称"
                            clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="机器类型" prop="machineTypeId">
                        <el-select v-model="form.machineTypeId" placeholder="" style="width: 240px">
                            <el-option v-for="item in options.machineTypeId" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="机器序列号" prop="serialNo">
                        <el-input style="width: 240px" v-model="form.serialNo" placeholder="机器序列号" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="产地国别" prop="countryOfManufacture">
                        <el-input style="width: 240px" v-model="form.countryOfManufacture" placeholder="产地国别"
                            clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="生命状态" prop="machineLifeStatus">
                        <el-select v-model="form.machineLifeStatus" placeholder="" style="width: 240px">
                            <el-option v-for="item in options.machineLifeStatus" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="电压(v)" prop="voltage">
                        <el-input style="width: 240px" v-model="form.voltage" placeholder="保留2位小数" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="机器规格" prop="machineModel">
                        <el-input style="width: 240px" v-model="form.machineModel" placeholder="机器规格"
                            clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="轮廓尺寸(cm)" prop="dimensions">
                        <el-input style="width: 240px" v-model="form.dimensions" placeholder="保留2位小数"
                            clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="净重(kg)" prop="netWeight">
                        <el-input style="width: 240px" v-model="form.netWeight" placeholder="保留2位小数"
                            clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="功率(kw)" prop="power">
                        <el-input style="width: 240px" v-model="form.power" placeholder="保留2位小数" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="系统名称" prop="systemName">
                        <el-input style="width: 240px" v-model="form.systemName" placeholder="系统名称"
                            clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="机器品牌" prop="brand">
                        <el-input style="width: 240px" v-model="form.brand" placeholder="机器品牌" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="机器铭牌" prop="nameplate">
                        <el-input style="width: 240px" v-model="form.nameplate" placeholder="机器铭牌" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="软件版本" prop="softwareVersion">
                        <el-input style="width: 240px" v-model="form.softwareVersion" placeholder="软件版本"
                            clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="所属机器组" prop="groupId">
                        <!-- <el-input style="width: 240px" v-model="form.groupId" placeholder="所属机器组" clearable></el-input> -->
                        <el-tree-select v-model="form.groupId" node-key="id" :props="props" :data="options.groupId"
                            filterable style="width: 240px" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="工位方式" prop="linkWay">
                        <el-checkbox v-model="form.linkWay" label="创建同名工位" :true-value="1" :false-value="2"
                            :true-label="1" :false-label="2" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="工位编号" prop="workstationId">
                        <el-input style="width: 240px" v-model="form.workstationId" placeholder="未绑定"
                            disabled></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="工位名称" prop="code">
                        <el-input style="width: 240px" v-model="form.code" placeholder="未绑定" disabled></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="状态" prop="status">
                        <el-select v-model="form.status" placeholder="" style="width: 240px">
                            <el-option v-for="item in options.status" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="24" style="padding:12px 0;">
                    èµ„产信息
                </el-col>
                <el-col :span="8">
                    <el-form-item label="发票金额" prop="invoiceValue">
                        <el-input style="width: 240px" v-model="form.invoiceValue" placeholder="保留2位小数"
                            clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="资产原值" prop="ovfa">
                        <el-input style="width: 240px" v-model="form.ovfa" placeholder="保留2位小数" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="折旧年限" prop="depreciationYear">
                        <el-input style="width: 240px" v-model="form.depreciationYear" placeholder="折旧年限"
                            clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="资产净值" prop="netAssetValue">
                        <el-input style="width: 240px" v-model="form.netAssetValue" placeholder="保留2位小数"
                            clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="资产编号" prop="assetsCode">
                        <el-input style="width: 240px" v-model="form.assetsCode" placeholder="资产编号"
                            clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="生产日期" prop="productionTime">
                        <el-date-picker style="width: 240px" v-model="form.productionTime" type="date"
                            placeholder="生产日期" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="交付日期" prop="deliveryTime">
                        <el-date-picker style="width: 240px" v-model="form.deliveryTime" type="date" placeholder="交付日期"
                            clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="制造厂商" prop="manufacturer">
                        <el-input style="width: 240px" v-model="form.manufacturer" placeholder="制造厂商"
                            clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24" style="padding:12px 0;">
                    å­˜æ”¾ä¿¡æ¯
                </el-col>
                <el-col :span="8">
                    <el-form-item label="出厂档案" prop="factoryFile">
                        <el-input style="width: 240px" v-model="form.factoryFile" placeholder="出厂档案"
                            clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="出厂编号" prop="factoryNo">
                        <el-input style="width: 240px" v-model="form.factoryNo" placeholder="出厂编号" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="安装位置" prop="installationLocation">
                        <el-input style="width: 240px" v-model="form.installationLocation" placeholder="安装位置"
                            clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="转固日期" prop="turnToFixedAssetsTime">
                        <el-date-picker style="width: 240px" v-model="form.turnToFixedAssetsTime" type="date"
                            placeholder="转固日期" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="管理等级" prop="managementClass">
                        <el-input style="width: 240px" v-model="form.managementClass" placeholder="管理等级"
                            clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="使用部门" prop="organizationId">
                        <el-tree-select v-model="form.organizationId" node-key="id" :props="props"
                            :data="options.organizationId" filterable style="width: 240px" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="生产线" prop="productionLine">
                        <el-input style="width: 240px" v-model="form.productionLine" placeholder="生产线"
                            clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="特种设备" prop="elaborateEquipment">
                        <el-select v-model="form.elaborateEquipment" placeholder="" style="width: 240px">
                            <el-option v-for="item in options.elaborateEquipment" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="使用状态" prop="machineUseStatus">
                        <el-select v-model="form.machineUseStatus" placeholder="" style="width: 240px">
                            <el-option v-for="item in options.machineUseStatus" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="责任人" prop="employeeId">
                        <!-- <el-input style="width: 240px" v-model="form.employeeId" placeholder="责任人" clearable></el-input> -->
                        <el-tree-select v-model="form.employeeId" node-key="id" :props="props"
                            :data="options.employeeId" filterable style="width: 240px" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="备注" prop="remark">
                        <el-input style="width: 240px" v-model="form.remark" placeholder="备注" clearable></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <el-button @click="visible = false">取 æ¶ˆ</el-button>
            <el-button v-if="mode != 'show'" type="primary" :loading="isSaveing" @click="submit()">保 å­˜</el-button>
        </template>
    </el-dialog>
</template>

<script>
const validator = (rule, value, callback) => {
    if (!value) {
        return callback();
    }
    if (!/^(\d+|\d+\.\d{1,2})$/.test(value)) {
        callback(new Error('请确保是有效的两位小数数字'));
    } else {
        callback();
    }
}
export default {
    emits: ['success', 'closed'],
    components: {
    },
    props: {
        option: {
            type: Object
        },
        detail: {
            type: Object
        }
    },
    watch: {

    },
    computed: {
    },
    data() {
        return {
            props: {
                label: 'name',
            },
            options: {
                machineTypeId: [],
                machineLifeStatus: [],
                elaborateEquipment: [
                    {
                        label: '是',
                        value: 1
                    },
                    {
                        label: '否',
                        value: 0
                    }
                ],
                status: [
                    {
                        label: '启用',
                        value: 1
                    },
                    {
                        label: '停用',
                        value: 0
                    }
                ],
                machineUseStatus: [],
                employeeId: [],
                groupId: [],
                organizationId: []
            },
            mode: "add",
            titleMap: {
                add: '新建机器台账',
                edit: '编辑机器台账',
                // show: '查看'
            },
            visible: false,
            isSaveing: false,
            //表单数据
            form: {
                machineCode: '',
                shortCode: '',
                pinCode: '',
                machineName: '',
                machineTypeId: '',
                serialNo: '',
                countryOfManufacture: '',
                machineLifeStatus: '',
                voltage: '',
                machineModel: '',
                dimensions: '',
                netWeight: '',
                power: '',
                systemName: '',
                brand: '',
                nameplate: '',
                softwareVersion: '',
                groupId: '',
                linkWay: '',
                machineCode: '',
                workstationId: '',
                code: '',
                status: '',
                invoiceValue: '',
                ovfa: '',
                depreciationYear: '',
                netAssetValue: '',
                assetsCode: '',
                productionTime: '',
                deliveryTime: '',
                manufacturer: '',
                factoryFile: '',
                factoryNo: '',
                installationLocation: '',
                turnToFixedAssetsTime: '',
                managementClass: '',
                organizationId: '',
                productionLine: '',
                elaborateEquipment: '',
                machineUseStatus: '',
                employeeId: '',
                remark: '',
            },
            //验证规则
            rules: {
                machineName: [
                    { required: true, message: '' }
                ],
                status: [
                    { required: true, message: '' }
                ],
                shortCode: [
                    {
                        validator: (rule, value, callback) => {
                            if (!value) {
                                return callback();
                            }
                            if (!/^[a-zA-Z0-9]{4,8}$/.test(value)) {
                                callback(new Error('请输入 4-8 è‹±æ–‡ï¼Œæ•°å­—'));
                            } else {
                                callback();
                            }
                        }, message: '请输入 4-8 è‹±æ–‡ï¼Œæ•°å­—', trigger: 'change',
                    }
                ],
                pinCode: [
                    {
                        validator: (rule, value, callback) => {
                            if (!value) {
                                return callback();
                            }
                            if (!/^[a-zA-Z0-9]{4,6}$/.test(value)) {
                                callback(new Error('请输入 4-6 è‹±æ–‡ï¼Œæ•°å­—'));
                            } else {
                                callback();
                            }
                        }, message: '请输入 4-6 è‹±æ–‡ï¼Œæ•°å­—', trigger: 'change',
                    }
                ],
                voltage: [
                    {
                        validator, message: '保留2位小数', trigger: 'change',
                    }
                ],
                dimensions: [
                    {
                        validator, message: '保留2位小数', trigger: 'change',
                    }
                ],
                netWeight: [
                    {
                        validator, message: '保留2位小数', trigger: 'change',
                    }
                ],
                power: [
                    {
                        validator, message: '保留2位小数', trigger: 'change',
                    }
                ],
                invoiceValue: [
                    {
                        validator, message: '保留2位小数', trigger: 'change',
                    }
                ],
                ovfa: [
                    {
                        validator, message: '保留2位小数', trigger: 'change',
                    }
                ],
                netAssetValue: [
                    {
                        validator, message: '保留2位小数', trigger: 'change',
                    }
                ],
            },

        }
    },
    created() {
        this.init()
    },
    methods: {
        init() {
            this.$HTTP.get('/api/blade-system/dict/dictionary?code=machine_life_state').then(res => {
                if (res.code === 200) {
                    this.options.machineLifeStatus = res.data.map(item => ({
                        label: item.dictValue,
                        value: item.dictKey
                    }))
                }
            })
            this.$HTTP.get('/api/blade-system/dict/dictionary?code=machine_use_state').then(res => {
                if (res.code === 200) {
                    this.options.machineUseStatus = res.data.map(item => ({
                        label: item.dictValue,
                        value: item.dictKey
                    }))
                }
            })
            this.$HTTP.get('/api/blade-cps/device-types/page?keyWord=&current=1&size=-1').then(res => {
                if (res.code === 200) {
                    this.options.machineTypeId = res.data.records.map(item => ({
                        label: item.name,
                        value: item.id
                    }))
                }
            })
            this.$HTTP.get('/api/blade-cps/employee/tree').then(res => {
                if (res.code === 200) {
                    this.options.employeeId = res.data
                }
            })
            this.$HTTP.get('/api/blade-cps/group/tree?groupCategory=1&groupType=group_machine').then(res => {
                if (res.code === 200) {
                    this.options.groupId = res.data
                }
            })
            this.$HTTP.get('/api/blade-cps/organization/tree?groupType=group_organization&groupCategory=1').then(res => {
                if (res.code === 200) {
                    this.options.organizationId = res.data
                }
            })
        },
        //显示
        open(mode = 'add', params) {
            this.mode = mode;
            this.$nextTick(() => {
                this.visible = true;
            })
            Object.keys(this.form).forEach(item => {
                this.form[item] = ''
            })
            if (params.id) {
                this.$HTTP.get(`/api/blade-cps/machine/detail/${params.id}`).then(res => {
                    if (res.code === 200) {
                        this.form = {
                            ...this.form,
                            ...res.data
                        }
                    }
                })
            } else {
                this.form = {
                    ...this.form,
                    ...params
                }
            }

            return this
        },
        //表单提交方法
        submit() {
            this.$refs.dialogForm.validate(async (valid) => {
                if (valid) {
                    this.isSaveing = true;
                    let data = {
                        ...this.form
                    }
                    let res
                    try {
                        if (this.form.id) {
                            res = await this.$HTTP.put('/api/blade-cps/machine', data).catch(() => {
                                throw new Error()
                            })
                        } else {
                            res = await this.$HTTP.post('/api/blade-cps/machine', data).catch(() => {
                                throw new Error()
                            })
                        }
                    } catch (error) {
                        this.isSaveing = false;
                    }

                    this.isSaveing = false;
                    if (res.code == 200) {
                        this.$emit('success', this.form, this.mode)
                        this.visible = false;
                        this.$message.success("操作成功")
                    } else {
                        this.$alert(res.message, "提示", { type: 'error' })
                    }
                } else {
                    return false;
                }
            })
        },
        //表单注入数据
        setData(data) {

            //可以和上面一样单个注入，也可以像下面一样直接合并进去
            //Object.assign(this.form, data)
        }
    }
}
</script>

<style></style>