|
|
@@ -0,0 +1,232 @@
|
|
|
+<template>
|
|
|
+ <div class="radioGroup">
|
|
|
+ <template v-for="(val, ind) in clueOptionList">
|
|
|
+ <!-- <div class="title" v-if="val.customerClueName">
|
|
|
+ <span class="van-f-red" v-if="val.isMust == 0">*</span>
|
|
|
+ {{ val.customerClueName }}
|
|
|
+ </div> -->
|
|
|
+ <template v-if="val.answerType == 'dx'">
|
|
|
+ <div class="title" v-if="val.customerClueName">
|
|
|
+ <span class="van-f-red" v-if="val.isMust == 0">*</span>
|
|
|
+ {{ val.customerClueName }}
|
|
|
+ </div>
|
|
|
+ <van-radio-group v-model="val.searchValue" @change="radioGroupChange">
|
|
|
+ <template v-for="(item, index) in val.customerClueOptionList">
|
|
|
+ <van-radio :name="item.customerClueOptionId" @click="radioClick" :key="index">
|
|
|
+ {{ item.customerClueOption }}
|
|
|
+ </van-radio>
|
|
|
+ <radioGroup
|
|
|
+ :clueOptionList="item.customerClueItemList"
|
|
|
+ :parentOptionList="val"
|
|
|
+ :parentId="item.customerClueOptionId"
|
|
|
+ v-if="val.searchValue == item.customerClueOptionId"></radioGroup>
|
|
|
+ </template>
|
|
|
+ </van-radio-group>
|
|
|
+ </template>
|
|
|
+ <!-- 回答类型:wb-文本，sz-数字，rq-日期，zp-照片，dx-单选，bg-表格 -->
|
|
|
+ <template v-if="val.answerType == 'wb'">
|
|
|
+ <div class="title" v-if="val.customerClueName">
|
|
|
+ <span class="van-f-red" v-if="val.isMust == 0">*</span>
|
|
|
+ {{ val.customerClueName }}
|
|
|
+ </div>
|
|
|
+ <template v-if="parentOptionList.searchValue == val.itemOptionParentId">
|
|
|
+ <van-field
|
|
|
+ v-model="val.answerValue"
|
|
|
+ :placeholder="val.remark"
|
|
|
+ :minTextLength="val.minTextLength"
|
|
|
+ :error-message="val.remark"
|
|
|
+ :class="{
|
|
|
+ fieldInput: true,
|
|
|
+ rulesClass: val.answerValue != null && val.answerValue.length < val.minTextLength,
|
|
|
+ }" />
|
|
|
+ <span
|
|
|
+ class="rulesErrorMessage"
|
|
|
+ v-if="val.answerValue != null && val.answerValue.length < val.minTextLength">
|
|
|
+ {{ val.remark }}
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ <!-- 数字输入框 -->
|
|
|
+ <template v-if="val.answerType == 'sz'">
|
|
|
+ <div class="title" v-if="val.customerClueName">
|
|
|
+ <span class="van-f-red" v-if="val.isMust == 0">*</span>
|
|
|
+ {{ val.customerClueName }}
|
|
|
+ </div>
|
|
|
+ <van-field
|
|
|
+ class="fieldInput"
|
|
|
+ v-model="val.answerValue"
|
|
|
+ :placeholder="val.remark"
|
|
|
+ :minTextLength="val.minTextLength"
|
|
|
+ :error-message="val.remark"
|
|
|
+ type="number"></van-field>
|
|
|
+ </template>
|
|
|
+ <!-- 表格 -->
|
|
|
+ <template v-if="val.answerType == 'bg'">
|
|
|
+ <div class="title" v-if="val.customerClueName">
|
|
|
+ <span class="van-f-red" v-if="val.isMust == 0">*</span>
|
|
|
+ {{ val.customerClueName }}
|
|
|
+ </div>
|
|
|
+ <el-table :data="val.tableData.data" style="width: 100%; position: relative; left: -10px">
|
|
|
+ <el-table-column
|
|
|
+ v-for="(item, index) in val.tableData.title"
|
|
|
+ :prop="item.prop"
|
|
|
+ :label="item.label"
|
|
|
+ align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <template v-if="item.answerType == 'text'">
|
|
|
+ {{ scope.row[item.prop] }}
|
|
|
+ </template>
|
|
|
+ <template v-if="item.answerType == 'wb'">
|
|
|
+ <van-field v-model="scope.row[item.prop]" />
|
|
|
+ </template>
|
|
|
+ <!-- 正整数 digit -->
|
|
|
+ <template v-if="item.answerType == 'sz'">
|
|
|
+ <van-field v-model="scope.row[item.prop]" type="digit" />
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: 'radioGroup',
|
|
|
+ props: {
|
|
|
+ clueOptionList: {
|
|
|
+ type: Array,
|
|
|
+ default: () => [],
|
|
|
+ },
|
|
|
+ parentOptionList: {
|
|
|
+ type: Object,
|
|
|
+ default: () => {},
|
|
|
+ },
|
|
|
+ parentId: {
|
|
|
+ type: [Number, null],
|
|
|
+ default: null,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {};
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ clueOptionList: {
|
|
|
+ handler(val) {
|
|
|
+ val.forEach((item) => {
|
|
|
+ // bg表格数据存在remark
|
|
|
+ if (item.answerType == 'bg') {
|
|
|
+ this.$set(item, 'tableData', JSON.parse(item.remark));
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ immediate: true,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ // console.log(this.clueOptionList);
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ radioGroupChange(name) {
|
|
|
+ if (!name) return;
|
|
|
+ // console.log(name);
|
|
|
+ // console.log(this.clueOptionList);
|
|
|
+ // 如果选中的数据有父级，将父级数据修改为选中状态
|
|
|
+ if (this.parentOptionList && this.parentId) {
|
|
|
+ this.$set(this.parentOptionList, 'searchValue', this.parentId);
|
|
|
+ }
|
|
|
+ // 获取选中数据
|
|
|
+ let clueOptionList = this.clueOptionList.find((val) => val.searchValue == name);
|
|
|
+ let activaRadio = clueOptionList.customerClueOptionList.find(
|
|
|
+ (val) => val.customerClueOptionId == name
|
|
|
+ );
|
|
|
+ // 修改选中状态
|
|
|
+ this.$set(activaRadio, 'value', 'Y');
|
|
|
+
|
|
|
+ // 过滤未选中的数据
|
|
|
+ let exceptItself = clueOptionList.customerClueOptionList.filter(
|
|
|
+ (val) => val.customerClueOptionId !== name
|
|
|
+ );
|
|
|
+ // 删除未选中数据状态兄弟级和子级
|
|
|
+ // console.log(exceptItself);
|
|
|
+ this.toggleOtheChildren(exceptItself);
|
|
|
+ },
|
|
|
+ toggleOtheChildren(exceptItself) {
|
|
|
+ if (!exceptItself) return;
|
|
|
+ exceptItself.forEach((val) => {
|
|
|
+ this.$set(val, 'value', 'N');
|
|
|
+ if (val.customerClueItemList && val.customerClueItemList[0]) {
|
|
|
+ this.$set(val.customerClueItemList[0], 'searchValue', null);
|
|
|
+ if (
|
|
|
+ val.customerClueItemList[0] &&
|
|
|
+ val.customerClueItemList[0].customerClueOptionList.length
|
|
|
+ ) {
|
|
|
+ this.toggleOtheChildren(val.customerClueItemList[0].customerClueOptionList);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ radioClick(event) {
|
|
|
+ // console.log(event);
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss">
|
|
|
+.radioGroup {
|
|
|
+ font-size: 15px;
|
|
|
+ .van-radio {
|
|
|
+ padding: 5px 0;
|
|
|
+ }
|
|
|
+ .van-radio-group {
|
|
|
+ padding-left: 20px;
|
|
|
+ }
|
|
|
+ .van-cell {
|
|
|
+ padding: 10px 0;
|
|
|
+ /* font-size: 14px; */
|
|
|
+ }
|
|
|
+ .van-cell::after {
|
|
|
+ border: 0;
|
|
|
+ }
|
|
|
+ .van-field {
|
|
|
+ padding: 0;
|
|
|
+ width: 100%;
|
|
|
+ border-radius: 4px;
|
|
|
+ overflow: hidden;
|
|
|
+ background-color: unset;
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ border: 1px solid #cdc8c8;
|
|
|
+ }
|
|
|
+ .van-field__control {
|
|
|
+ /* padding: 0 10px; */
|
|
|
+ /* margin: 5px 0; */
|
|
|
+ padding-left: 10px;
|
|
|
+ }
|
|
|
+ .van-radio__label {
|
|
|
+ /* font-size: 14px; */
|
|
|
+ }
|
|
|
+ .van-f-red {
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ .rulesClass {
|
|
|
+ border: 1px solid #ff0505;
|
|
|
+ }
|
|
|
+ .fieldInput {
|
|
|
+ /* height: 38px; */
|
|
|
+ }
|
|
|
+ .rulesErrorMessage {
|
|
|
+ color: red;
|
|
|
+ font-size: 12px;
|
|
|
+ padding: 3px 0;
|
|
|
+ }
|
|
|
+ .uploadImg {
|
|
|
+ width: 50px;
|
|
|
+ }
|
|
|
+ .el-table {
|
|
|
+ .el-table__cell {
|
|
|
+ padding: 3px 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
