|
|
@@ -0,0 +1,512 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html>
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
|
|
+ <link rel="stylesheet" href="https://unpkg.com/form-making/dist/FormMaking.css">
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+<div id="app">
|
|
|
+ <div class="panel">
|
|
|
+ <h3>基本信息</h3>
|
|
|
+ <hr>
|
|
|
+ <fm-generate-form :data="jsonData1" ref="generateForm1" :value="editData1">
|
|
|
+ </fm-generate-form>
|
|
|
+ </div>
|
|
|
+ <div class="panel">
|
|
|
+ <h3>日常生活能力评定量表</h3>
|
|
|
+ <hr>
|
|
|
+ <fm-generate-form :data="jsonData2" ref="generateForm2" :value="editData2" @on-change="onChange">
|
|
|
+ </fm-generate-form>
|
|
|
+ <fm-generate-form :data="jsonData3" ref="generateForm3" :value="editData3">
|
|
|
+ </fm-generate-form>
|
|
|
+ <button @click="handleSubmit">保存提交</button>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+<script src="https://unpkg.com/vue/dist/vue.js"></script>
|
|
|
+<script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
|
|
+<script src="../../dist/FormMaking.umd.js"></script>
|
|
|
+<script>
|
|
|
+ new Vue({
|
|
|
+ el: '#app',
|
|
|
+ data: {
|
|
|
+ editData1: 0,
|
|
|
+ editData2: 0,
|
|
|
+ editData3: 0,
|
|
|
+ jsonData1: {
|
|
|
+ "list": [
|
|
|
+ {
|
|
|
+ "type": "grid",
|
|
|
+ "icon": "icon-grid-",
|
|
|
+ "columns": [
|
|
|
+ {
|
|
|
+ "span": 8,
|
|
|
+ "list": [
|
|
|
+ {
|
|
|
+ "type": "text",
|
|
|
+ "icon": "icon-wenzishezhi-",
|
|
|
+ "options": {
|
|
|
+ "defaultValue": "",
|
|
|
+ "customClass": "",
|
|
|
+ "remoteFunc": "func_1627611384000_98300"
|
|
|
+ },
|
|
|
+ "name": "姓名",
|
|
|
+ "key": "1627611384000_98300",
|
|
|
+ "model": "resident",
|
|
|
+ "rules": []
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "type": "text",
|
|
|
+ "icon": "icon-wenzishezhi-",
|
|
|
+ "options": {
|
|
|
+ "defaultValue": "",
|
|
|
+ "customClass": "",
|
|
|
+ "remoteFunc": "func_1627611437000_58862"
|
|
|
+ },
|
|
|
+ "name": "国籍",
|
|
|
+ "key": "1627611437000_58862",
|
|
|
+ "model": "country",
|
|
|
+ "rules": []
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "type": "text",
|
|
|
+ "icon": "icon-wenzishezhi-",
|
|
|
+ "options": {
|
|
|
+ "defaultValue": "",
|
|
|
+ "customClass": "",
|
|
|
+ "remoteFunc": "func_1627611434000_58872"
|
|
|
+ },
|
|
|
+ "name": "婚姻状态",
|
|
|
+ "key": "1627611434000_58872",
|
|
|
+ "model": "married",
|
|
|
+ "rules": []
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "span": 8,
|
|
|
+ "list": [
|
|
|
+ {
|
|
|
+ "type": "text",
|
|
|
+ "icon": "icon-wenzishezhi-",
|
|
|
+ "options": {
|
|
|
+ "defaultValue": "",
|
|
|
+ "customClass": "",
|
|
|
+ "remoteFunc": "func_1627611439000_99428"
|
|
|
+ },
|
|
|
+ "name": "性别",
|
|
|
+ "key": "1627611439000_99428",
|
|
|
+ "model": "gender",
|
|
|
+ "rules": []
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "type": "text",
|
|
|
+ "icon": "icon-wenzishezhi-",
|
|
|
+ "options": {
|
|
|
+ "defaultValue": "",
|
|
|
+ "customClass": "",
|
|
|
+ "remoteFunc": "func_1627611440000_1153"
|
|
|
+ },
|
|
|
+ "name": "民族",
|
|
|
+ "key": "1627611440000_1153",
|
|
|
+ "model": "nation",
|
|
|
+ "rules": []
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "type": "text",
|
|
|
+ "icon": "icon-wenzishezhi-",
|
|
|
+ "options": {
|
|
|
+ "defaultValue": "",
|
|
|
+ "customClass": "",
|
|
|
+ "remoteFunc": "func_1627611389000_53699"
|
|
|
+ },
|
|
|
+ "name": "文化程度",
|
|
|
+ "key": "1627611389000_53699",
|
|
|
+ "model": "educationLevel",
|
|
|
+ "rules": []
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "span": 8,
|
|
|
+ "list": [
|
|
|
+ {
|
|
|
+ "type": "text",
|
|
|
+ "icon": "icon-wenzishezhi-",
|
|
|
+ "options": {
|
|
|
+ "defaultValue": "",
|
|
|
+ "customClass": "",
|
|
|
+ "remoteFunc": "func_1627611443000_48875"
|
|
|
+ },
|
|
|
+ "name": "年龄",
|
|
|
+ "key": "1627611443000_48875",
|
|
|
+ "model": "age",
|
|
|
+ "rules": []
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "type": "text",
|
|
|
+ "icon": "icon-wenzishezhi-",
|
|
|
+ "options": {
|
|
|
+ "defaultValue": "",
|
|
|
+ "customClass": "",
|
|
|
+ "remoteFunc": "func_1627611443000_96274"
|
|
|
+ },
|
|
|
+ "name": "职业",
|
|
|
+ "key": "1627611443000_96274",
|
|
|
+ "model": "job",
|
|
|
+ "rules": []
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "type": "text",
|
|
|
+ "icon": "icon-wenzishezhi-",
|
|
|
+ "options": {
|
|
|
+ "defaultValue": "",
|
|
|
+ "customClass": "",
|
|
|
+ "remoteFunc": "func_1627611397000_33710"
|
|
|
+ },
|
|
|
+ "name": "居住类型",
|
|
|
+ "key": "1627611397000_33710",
|
|
|
+ "model": "residentStatus",
|
|
|
+ "rules": []
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ "options": {
|
|
|
+ "gutter": 0,
|
|
|
+ "justify": "start",
|
|
|
+ "align": "top",
|
|
|
+ "remoteFunc": "func_1627611368000_38651"
|
|
|
+ },
|
|
|
+ "name": "栅格布局",
|
|
|
+ "key": "1627611368000_38651",
|
|
|
+ "model": "grid_1627611368000_38651",
|
|
|
+ "rules": []
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ "config": {
|
|
|
+ "labelWidth": 100,
|
|
|
+ "labelPosition": "left",
|
|
|
+ "size": "small"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ jsonData2: {
|
|
|
+ "list": [
|
|
|
+ {
|
|
|
+ "type": "scoreRadio",
|
|
|
+ "icon": "icon-radio-active",
|
|
|
+ "options": {
|
|
|
+ "inline": true,
|
|
|
+ "defaultValue": "1",
|
|
|
+ "showLabel": true,
|
|
|
+ "options": [
|
|
|
+ {
|
|
|
+ "value": "1",
|
|
|
+ "label": "良好",
|
|
|
+ "score": "4"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "value": "2",
|
|
|
+ "label": "尚可",
|
|
|
+ "score": "3"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "value": "3",
|
|
|
+ "label": "虚弱/差",
|
|
|
+ "score": "2"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "value": "4",
|
|
|
+ "label": "非常差",
|
|
|
+ "score": "1"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ "required": false,
|
|
|
+ "width": "",
|
|
|
+ "scoreTo": "totalScore",
|
|
|
+ "remote": false,
|
|
|
+ "remoteOptions": [],
|
|
|
+ "props": {
|
|
|
+ "value": "value",
|
|
|
+ "label": "label"
|
|
|
+ },
|
|
|
+ "disabled": false,
|
|
|
+ "remoteFunc": "func_1628153495000_97711"
|
|
|
+ },
|
|
|
+ "name": "身体状况",
|
|
|
+ "key": "1628153495000_97711",
|
|
|
+ "model": "physicalCondition",
|
|
|
+ "rules": []
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "type": "scoreRadio",
|
|
|
+ "icon": "icon-radio-active",
|
|
|
+ "options": {
|
|
|
+ "inline": true,
|
|
|
+ "defaultValue": "1",
|
|
|
+ "showLabel": true,
|
|
|
+ "options": [
|
|
|
+ {
|
|
|
+ "value": "1",
|
|
|
+ "label": "清醒",
|
|
|
+ "score": "4"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "value": "2",
|
|
|
+ "label": "冷漠",
|
|
|
+ "score": "3"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "value": "3",
|
|
|
+ "label": "混淆",
|
|
|
+ "score": "2"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "value": "4",
|
|
|
+ "label": "木僵",
|
|
|
+ "score": "1"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ "required": false,
|
|
|
+ "width": "",
|
|
|
+ "scoreTo": "totalScore",
|
|
|
+ "remote": false,
|
|
|
+ "remoteOptions": [],
|
|
|
+ "props": {
|
|
|
+ "value": "value",
|
|
|
+ "label": "label"
|
|
|
+ },
|
|
|
+ "disabled": false,
|
|
|
+ "remoteFunc": "func_1628153552000_35486"
|
|
|
+ },
|
|
|
+ "name": "精神状况",
|
|
|
+ "key": "1628153552000_35486",
|
|
|
+ "model": "mentalState",
|
|
|
+ "rules": []
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "type": "scoreRadio",
|
|
|
+ "icon": "icon-radio-active",
|
|
|
+ "options": {
|
|
|
+ "inline": true,
|
|
|
+ "defaultValue": "1",
|
|
|
+ "showLabel": true,
|
|
|
+ "options": [
|
|
|
+ {
|
|
|
+ "value": "1",
|
|
|
+ "label": "活动自如",
|
|
|
+ "score": "4"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "value": "2",
|
|
|
+ "label": "扶助行走",
|
|
|
+ "score": "3"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "value": "3",
|
|
|
+ "label": "轮椅活动",
|
|
|
+ "score": "2"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "value": "4",
|
|
|
+ "label": "卧床不起",
|
|
|
+ "score": "1"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ "required": false,
|
|
|
+ "width": "",
|
|
|
+ "scoreTo": "totalScore",
|
|
|
+ "remote": false,
|
|
|
+ "remoteOptions": [],
|
|
|
+ "props": {
|
|
|
+ "value": "value",
|
|
|
+ "label": "label"
|
|
|
+ },
|
|
|
+ "disabled": false,
|
|
|
+ "remoteFunc": "func_1628153651000_873"
|
|
|
+ },
|
|
|
+ "name": "活动力",
|
|
|
+ "key": "1628153651000_873",
|
|
|
+ "model": "activityForce",
|
|
|
+ "rules": []
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "type": "scoreRadio",
|
|
|
+ "icon": "icon-radio-active",
|
|
|
+ "options": {
|
|
|
+ "inline": true,
|
|
|
+ "defaultValue": "1",
|
|
|
+ "showLabel": true,
|
|
|
+ "options": [
|
|
|
+ {
|
|
|
+ "value": "1",
|
|
|
+ "label": "完全不受限制",
|
|
|
+ "score": "4"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "value": "2",
|
|
|
+ "label": "稍微受限制",
|
|
|
+ "score": "3"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "value": "3",
|
|
|
+ "label": "大部分受限制",
|
|
|
+ "score": "2"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "value": "4",
|
|
|
+ "label": "移动障碍",
|
|
|
+ "score": "1"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ "required": false,
|
|
|
+ "width": "",
|
|
|
+ "scoreTo": "totalScore",
|
|
|
+ "remote": false,
|
|
|
+ "remoteOptions": [],
|
|
|
+ "props": {
|
|
|
+ "value": "value",
|
|
|
+ "label": "label"
|
|
|
+ },
|
|
|
+ "disabled": false,
|
|
|
+ "remoteFunc": "func_1628153780000_60388"
|
|
|
+ },
|
|
|
+ "name": "移动力",
|
|
|
+ "key": "1628153780000_60388",
|
|
|
+ "model": "movingForce",
|
|
|
+ "rules": []
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "type": "scoreRadio",
|
|
|
+ "icon": "icon-radio-active",
|
|
|
+ "options": {
|
|
|
+ "inline": true,
|
|
|
+ "defaultValue": "1",
|
|
|
+ "showLabel": true,
|
|
|
+ "options": [
|
|
|
+ {
|
|
|
+ "value": "1",
|
|
|
+ "label": "无",
|
|
|
+ "score": "4"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "value": "2",
|
|
|
+ "label": "偶尔失禁",
|
|
|
+ "score": "3"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "value": "3",
|
|
|
+ "label": "经常失禁",
|
|
|
+ "score": "2"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "value": "4",
|
|
|
+ "label": "大小便失禁",
|
|
|
+ "score": "1"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ "required": false,
|
|
|
+ "width": "",
|
|
|
+ "scoreTo": "totalScore",
|
|
|
+ "remote": false,
|
|
|
+ "remoteOptions": [],
|
|
|
+ "props": {
|
|
|
+ "value": "value",
|
|
|
+ "label": "label"
|
|
|
+ },
|
|
|
+ "disabled": false,
|
|
|
+ "remoteFunc": "func_1628153357000_39388"
|
|
|
+ },
|
|
|
+ "name": "失禁",
|
|
|
+ "key": "1628153357000_39388",
|
|
|
+ "model": "incontinence",
|
|
|
+ "rules": [],
|
|
|
+ "scoreTo": "totalScore"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ "config": {
|
|
|
+ "labelWidth": 100,
|
|
|
+ "labelPosition": "right",
|
|
|
+ "size": "small"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ jsonData3: {
|
|
|
+ "list": [
|
|
|
+ {
|
|
|
+ "type": "text",
|
|
|
+ "icon": "icon-wenzishezhi-",
|
|
|
+ "options": {
|
|
|
+ "defaultValue": "0",
|
|
|
+ "name": "",
|
|
|
+ "customClass": "",
|
|
|
+ "remoteFunc": "func_1628155073000_84476"
|
|
|
+ },
|
|
|
+ "name": "总分",
|
|
|
+ "key": "1628155073000_84476",
|
|
|
+ "model": "totalScore",
|
|
|
+ "rules": []
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ "config": {
|
|
|
+ "labelWidth": 100,
|
|
|
+ "labelPosition": "right",
|
|
|
+ "size": "small"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 保存提交
|
|
|
+ handleSubmit() {
|
|
|
+ var obj = {};
|
|
|
+ Object.assign(obj, this.$refs.generateForm1.models, this.$refs.generateForm2.models, this.$refs.generateForm3.models);
|
|
|
+ console.log(JSON.stringify(obj));
|
|
|
+ },
|
|
|
+ // 单选框改变
|
|
|
+ onChange(field, value, models, options) {
|
|
|
+ try {
|
|
|
+ // console.log(field, value);
|
|
|
+ // console.log('models', JSON.stringify(models));
|
|
|
+ // console.log('options', JSON.stringify(options));
|
|
|
+ // 计算总分
|
|
|
+ var totalScore = 0;
|
|
|
+ for (var key in models) {
|
|
|
+ if (models[key] && options[key]) {
|
|
|
+ var val = models[key];
|
|
|
+ var modelOptions = options[key];
|
|
|
+ var filter = modelOptions.filter((e) => {
|
|
|
+ return e['value'] === val;
|
|
|
+ });
|
|
|
+ console.log(filter[0].score);
|
|
|
+ totalScore += parseInt(filter[0].score);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ console.log('totalScore', totalScore);
|
|
|
+ // 设置总分
|
|
|
+ if (this.$refs.generateForm3) {
|
|
|
+ this.$set(this.$refs.generateForm3.models, 'totalScore', totalScore);
|
|
|
+ this.editData3 += 1;
|
|
|
+ } else {
|
|
|
+ this.jsonData3.list[0]['options']['defaultValue'] = totalScore;
|
|
|
+ }
|
|
|
+ } catch (e) {
|
|
|
+ console.log(e);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+</script>
|
|
|
+</body>
|
|
|
+<style>
|
|
|
+ .panel {
|
|
|
+ border-radius: 10px;
|
|
|
+ box-shadow: -10px 0px 10px rgb(190, 190, 190), /*左边阴影*/ /* 0px -10px 10px rgb(190, 190, 190), 上边阴影 */ 10px 0px 10px rgb(190, 190, 190) /*右边阴影*/
|
|
|
+ /* 0px 10px 10px rgb(190, 190, 190); 下边阴影 */;
|
|
|
+ width: 90%;
|
|
|
+ margin-top: 10px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ margin-left: 5%;
|
|
|
+ padding: 10px;
|
|
|
+ padding-left: 20px;
|
|
|
+ }
|
|
|
+</style>
|
|
|
+</html>
|
