@wg-npm/survey-creator 0.3.377-8.develop → 0.3.496-8.release

package/src/components/editor/forms/evaluation/expr/if.vue

@@ -1,269 +1,181 @@
 <template>
-  <Card dis-hover>
-    <Row type="flex" :gutter="6" slot="title">
-      <Col>
-        <div class="text">
-          {{ t("survey_creator.question.evaluation.condition.if") }}
-        </div>
-      </Col>
-      <Col>
-        <Button type="primary" icon="md-add" @click="onAdd">
-          {{
-            t("survey_creator.question.evaluation.condition.add_if_template")
-          }}
-        </Button>
-      </Col>
-    </Row>
-    <a href="#" slot="extra" @click.prevent="onDelete" v-show="deletable">
-      {{ t("survey_creator.common.delete") }}
-    </a>
-    <Row type="flex" justify="start" align="middle">
-      <Col :span="22">
+    <Card dis-hover>
+        <Row type="flex" :gutter="6" slot="title">
+            <Col>
+                <div class="text">
+                    {{t('survey_creator.question.evaluation.condition.if') }}
+                </div>
+            </Col>
+            <Col>
+                <Button type="primary" icon="md-add" @click="onAdd">
+                    {{t('survey_creator.question.evaluation.condition.add_if_template') }}
+                </Button>
+            </Col>
+        </Row>
+        <a href="#" slot="extra" @click.prevent="onDelete" v-show="deletable">
+            {{t('survey_creator.common.delete') }}
+        </a>
         <Row type="flex" justify="start" align="middle">
-          <Col class="label">
-            <Icon type="ios-arrow-forward" color="#2d8cf0" />
-            {{ t("survey_creator.question.evaluation.condition.requirements") }}
-          </Col>
-          <Col :span="16">
-            <Select v-model="exprConditionType">
-              <Option
-                v-for="type in exprConditionTypes"
-                :value="type"
-                :key="type"
-              >
-                {{
-                  t(`survey_creator.question.evaluation.condition.type.${type}`)
-                }}
-              </Option>
-            </Select>
-          </Col>
+            <Col :span="22">
+                <Row type="flex" justify="start" align="middle">
+                    <Col class="label">
+                        <Icon type="ios-arrow-forward" color="#2d8cf0"/>
+                        {{t('survey_creator.question.evaluation.condition.requirements') }}
+                    </Col>
+                    <Col :span="16">
+                        <Select v-model="exprConditionType">
+                            <Option v-for="type in exprConditionTypes" :value="type" :key="type">
+                                {{ t(`survey_creator.question.evaluation.condition.type.${type}`) }}
+                            </Option>
+                        </Select>
+                    </Col>
+                </Row>
+            </Col>
+            <Col :span="2">
+                <Button icon="md-add" class="action" @click="addCondition"></Button>
+            </Col>
+        </Row>
+        <Row type="flex" justify="space-between" align="middle"
+             v-for="(condition, index) in evaluationItems[position].conditions" :key="index" class="mt-base">
+            <Col :span="22">
+                <condition :key="index" :index="index" :type="condition.type" v-model="condition.payload" @expr="expr"
+                           :question="question" :evaluation-items="evaluationItems" :item-index="position"/>
+            </Col>
+            <Col :span="2">
+                <Button icon="md-remove" class="action" style="margin-bottom: 24px;"
+                        @click="removeCondition(index)"></Button>
+            </Col>
         </Row>
-      </Col>
-      <Col :span="2">
-        <Button
-          icon="md-add"
-          :disabled="disableAddConditionBtn"
-          class="action"
-          @click="addCondition"
-        ></Button>
-      </Col>
-    </Row>
-    <Row
-      type="flex"
-      justify="space-between"
-      align="middle"
-      v-for="(condition, index) in evaluationItems[position].conditions"
-      :key="index"
-      class="mt-base"
-    >
-      <Col :span="22">
-        <condition
-          :key="index"
-          :index="index"
-          :type="condition.type"
-          v-model="condition.payload"
-          @expr="expr"
-          :question="question"
-          :evaluation-items="evaluationItems"
-          :item-index="position"
-        />
-      </Col>
-      <Col :span="2">
-        <Button
-          icon="md-remove"
-          class="action"
-          style="margin-bottom: 24px"
-          @click="removeCondition(index)"
-        ></Button>
-      </Col>
-    </Row>
-    <Row type="flex" justify="end" align="middle" class="mt-base">
-      <Col>
-        <FormItem
-          :prop="'evaluationItems[' + position + '].text.' + primaryLanguage"
-          :rules="{
-            required: true,
-            message: t(
-              'survey_creator.question.evaluation.condition.evaluation_require_tip'
-            ),
-          }"
-          >{{
-            t("survey_creator.question.evaluation.condition.evaluation_label")
-          }}
-          <Input
-            class="input"
-            v-model.trim="evaluationItems[position].text[primaryLanguage]"
-          />
-        </FormItem>
-      </Col>
-    </Row>
-  </Card>
+        <Row type="flex" justify="end" align="middle" class="mt-base">
+            <Col>
+                <FormItem
+                        :prop="'evaluationItems[' + position + '].text.' + primaryLanguage"
+                        :rules="{required: true, message: t('survey_creator.question.evaluation.condition.evaluation_require_tip')}"
+                >{{t('survey_creator.question.evaluation.condition.evaluation_label') }}
+                    <Input class="input" v-model.trim="evaluationItems[position].text[primaryLanguage]"/>
+                </FormItem>
+            </Col>
+        </Row>
+    </Card>
 </template>
 <script lang="ts">
-import Vue from "vue";
-import QuestionFormMixin from "../../../../../mixins/question-form-mixin";
-import {
-  ExprConditionType,
-  ExprEvaluationItemType,
-} from "@wg-npm/survey-core/src/models";
-import {
-  Card,
-  Row,
-  Col,
-  Button,
-  Select,
-  Option,
-  Icon,
-  FormItem,
-  Input,
-} from "view-design";
-import Condition from "./condition.vue";
-import _ from "lodash";
+    import Vue from "vue";
+    import QuestionFormMixin from "../../../../../mixins/question-form-mixin";
+    import {
+        ExprConditionType,
+        ExprEvaluationItemType
+    } from "@wg-npm/survey-core/src/models";
+    import {Card, Row, Col, Button, Select, Option, Icon, FormItem, Input} from "view-design";
+    import Condition from "./condition.vue"
+    import _ from "lodash";
 
-export default Vue.extend({
-  name: "if",
-  mixins: [QuestionFormMixin],
-  components: {
-    Card,
-    Row,
-    Col,
-    Select,
-    Option,
-    Button,
-    Icon,
-    Condition,
-    FormItem,
-    Input,
-  },
-  props: {
-    value: {
-      type: Array,
-      required: true,
-    },
-    position: {
-      type: Number,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      evaluationItems: this.value,
-      exprConditionType: ExprConditionType.AUTO,
-      exprConditionTypes: [
-        ExprConditionType.AUTO,
-        ExprConditionType.ASSIGN,
-        ExprConditionType.SCORE,
-      ],
-    };
-  },
-  computed: {
-    deletable() {
-      return (
-        _.size(
-          _.filter(
-            this.evaluationItems,
-            (item) => item.type == ExprEvaluationItemType.IF
-          )
-        ) > 1
-      );
-    },
-    disableAddConditionBtn() {
-      let conditions = this.evaluationItems[this.position].conditions;
-      let scoreConditions = _.size(
-        _.filter(conditions, (item) => item.type == ExprConditionType.SCORE)
-      );
-      return (
-        this.exprConditionType == ExprConditionType.SCORE && scoreConditions > 0
-      );
-    },
-  },
-  methods: {
-    onAdd() {
-      this.evaluationItems.splice(this.position + 1, 0, {
-        id: `Evaluation-Item-${_.now()}-${_.random(0, 9999999)}`,
-        type: ExprEvaluationItemType.IF,
-        text: {
-          "zh-CN": "",
+    export default Vue.extend({
+        name: "if",
+        mixins: [QuestionFormMixin],
+        components: {
+            Card,
+            Row,
+            Col,
+            Select,
+            Option,
+            Button,
+            Icon,
+            Condition,
+            FormItem,
+            Input
+        },
+        props: {
+            value: {
+                type: Array,
+                required: true
+            },
+            position: {
+                type: Number,
+                required: true
+            }
         },
-        conditions: [],
-      });
-    },
-    onDelete() {
-      this.evaluationItems.splice(this.position, 1);
-    },
-    addCondition() {
-      this.evaluationItems[this.position].conditions ||
-        this.$set(this.evaluationItems[this.position], "conditions", []);
-      this.evaluationItems[this.position].conditions.push({
-        type: this.exprConditionType,
-        payload: this.buildPayloadByType(this.exprConditionType),
-      });
-    },
-    buildPayloadByType(type) {
-      if (type == ExprConditionType.SCORE) {
-        return {
-          payload: {
-            minScore: 0,
-            operator: "<",
-            maxScore: 0,
-          },
-        };
-      }
-      return {
-        payload: {
-          scope: [],
-          operator: "=",
-          values: [],
-          size: 0,
+        data() {
+            return {
+                evaluationItems: this.value,
+                exprConditionType: ExprConditionType.AUTO,
+                exprConditionTypes: [ExprConditionType.AUTO, ExprConditionType.ASSIGN]
+            };
         },
-      };
-    },
-    removeCondition(index) {
-      this.evaluationItems[this.position].conditions.splice(index, 1);
-    },
-    expr(index, value) {
-      _.set(
-        this.evaluationItems[this.position].conditions[index],
-        "expr",
-        value
-      );
-    },
-  },
-});
+        computed: {
+            deletable() {
+                return _.size(_.filter(this.evaluationItems, item => item.type == ExprEvaluationItemType.IF)) > 1;
+            }
+        },
+        methods: {
+            onAdd() {
+                this.evaluationItems.splice(this.position + 1, 0, {
+                    "id": `Evaluation-Item-${_.now()}-${_.random(0, 9999999)}`,
+                    "type": ExprEvaluationItemType.IF,
+                    "text": {
+                        "zh-CN": ""
+                    },
+                    "conditions": []
+                });
+            },
+            onDelete() {
+                this.evaluationItems.splice(this.position, 1);
+            },
+            addCondition() {
+                this.evaluationItems[this.position].conditions || this.$set(this.evaluationItems[this.position], "conditions", []);
+                this.evaluationItems[this.position].conditions.push({
+                    type: this.exprConditionType,
+                    payload: {
+                        scope: [],
+                        operator: "=",
+                        values: [],
+                        size: 0
+
+                    }
+                });
+            },
+            removeCondition(index) {
+                this.evaluationItems[this.position].conditions.splice(index, 1);
+            },
+            expr(index, value) {
+                _.set(this.evaluationItems[this.position].conditions[index], "expr", value);
+            }
+        }
+    })
 </script>
 <style scoped lang="less">
-.mt-base {
-  margin-top: 12px;
-}
+    .mt-base {
+        margin-top: 12px;
+    }
+
+    .action {
+        float: right;
+    }
 
-.action {
-  float: right;
-}
+    .input {
+        width: 100px;
+    }
 
-.input {
-  width: 100px;
-}
+    .label {
+        text-align: right;
+        padding-right: 4px;
+    }
 
-.label {
-  text-align: right;
-  padding-right: 4px;
-}
+    .text {
+        background-color: #ebf7ff;
+        height: 32px;
+        padding: 8px 18px;
+        font-weight: 500;
+        color: #515a6e;
+    }
 
-.text {
-  background-color: #ebf7ff;
-  height: 32px;
-  padding: 8px 18px;
-  font-weight: 500;
-  color: #515a6e;
-}
+    /deep/ .ivu-card .ivu-form-item {
+        margin-bottom: 4px;
+        margin-top: 0;
+    }
 
-/deep/ .ivu-card .ivu-form-item {
-  margin-bottom: 4px;
-  margin-top: 0;
-}
+    /deep/ .ivu-card .ivu-form-item-error {
+        margin-bottom: 24px;
+        margin-top: 0;
 
-/deep/ .ivu-card .ivu-form-item-error {
-  margin-bottom: 24px;
-  margin-top: 0;
-}
+    }
 </style>

package/src/components/editor/forms/evaluation-form.vue

@@ -98,6 +98,9 @@
     /deep/ .ivu-table-cell-slot .ivu-form-item-error {
         margin-bottom: 24px;
         margin-top: 0;
+    }
 
+    /deep/ .ivu-form-item {
+        width: 100%;
     }
-</style>
+</style>

package/src/components/editor/forms/fill-blank-form.vue

@@ -26,3 +26,9 @@
   mixins: [questionFormMixin]
 });
 </script>
+
+<style scoped lang="less">
+  /deep/ .ivu-form-item {
+    width: 100%;
+  }
+</style>

package/src/components/editor/forms/matrix-form.vue

@@ -206,3 +206,9 @@
   }
 });
 </script>
+
+<style scoped lang="less">
+  /deep/ .ivu-form-item {
+    width: 100%;
+  }
+</style>

package/src/components/editor/forms/multi-selection-form.vue

@@ -194,4 +194,8 @@
         padding-bottom: 10px;
         padding-left: 80px;
     }
+
+    /deep/ .ivu-form-item {
+        width: 100%;
+    }
 </style>

package/src/components/editor/forms/short-answer-form.vue

@@ -2,7 +2,7 @@
   <Form ref="questionForm" :model="editQuestion" :label-colon="false">
     <Form-item
       :prop="'header.text.' + primaryLanguage"
-      :rules="{required: true, 
+      :rules="{required: true,
     message: t('survey_creator.question.titleRequiredTip')}"
     >
       <label slot="label">
@@ -37,3 +37,9 @@
   mixins: [questionFormMixin]
 });
 </script>
+
+<style scoped lang="less">
+  /deep/ .ivu-form-item {
+    width: 100%;
+  }
+</style>

package/src/components/editor/forms/single-selection-form.vue

@@ -184,4 +184,8 @@
         padding-bottom: 10px;
         padding-left: 80px;
     }
+
+    /deep/ .ivu-form-item {
+        width: 100%;
+    }
 </style>

package/src/locale/index.ts

@@ -4,7 +4,7 @@
  */
 import Vue from 'vue'
 import deepmerge from 'deepmerge';
-import defaultLang from './lang/zh-CN'
+import defaultLang from './lang/en-US'
 
 let lang = defaultLang;
 let merged = false;