From 0733833340a773ec9ea4d3acee3d37526161bfd9 Mon Sep 17 00:00:00 2001 From: WXL <1785969728@qq.com> Date: 星期四, 22 八月 2024 16:51:03 +0800 Subject: [PATCH] 测试完成 --- src/components/Regular/index.vue | 425 +++++++++++++++++++++++++++++------------------------ 1 files changed, 233 insertions(+), 192 deletions(-) diff --git a/src/components/Regular/index.vue b/src/components/Regular/index.vue index d389f14..71a6fc0 100644 --- a/src/components/Regular/index.vue +++ b/src/components/Regular/index.vue @@ -1,210 +1,219 @@ <template> <div> <div class="topicxq" v-for="item in TargetoptionList"> - <el-row :gutter="10"> - <el-col :span="12" - ><el-form-item label="閫夐」鍚嶇О"> - <el-input - type="text" - placeholder="璇疯緭鍏�" - v-model="item.targetvalue" - show-word-limit - > - </el-input> </el-form-item - ></el-col> - <el-col :span="12" - ><el-form-item label="棰勮鍊�"> - <el-radio-group v-model="radio"> - <el-radio :label="3">鏄�</el-radio> - <el-radio :label="6">鍚�</el-radio> - </el-radio-group> - </el-form-item></el-col - > - <el-col :span="12" v-if="intent" - ><el-form-item label="閫夐」鑺傜偣"> - <el-input - type="text" - placeholder="璇疯緭鍏ヨ妭鐐�" - v-model="item.targetid" - show-word-limit - > - </el-input> </el-form-item - ></el-col> - </el-row> - <el-row :gutter="10" v-if="!intent"> - <el-col :span="20" - ><el-form-item label="閫夐」璇存槑"> - <el-input - type="text" - placeholder="璇疯緭鍏�" - v-model="item.targetvalue2" - show-word-limit - > - </el-input> </el-form-item - ></el-col> - </el-row> - <el-row :gutter="10" v-if="intent"> - <el-col :span="12" - ><el-form-item label="澶勭悊"> - <el-input - type="text" - placeholder="(榛樿)鏃犲0" - v-model="item.text" - maxlength="10" - show-word-limit - > - </el-input> </el-form-item - ></el-col> - <el-col :span="12" - ><el-form-item label="閫変腑璺宠浆"> - <el-input - type="text" - placeholder="璇疯緭鍏ラ鐩妭鐐�" - v-model="item.nextQuestion" - show-word-limit - > - </el-input> </el-form-item - ></el-col> - </el-row> - <el-form-item label="鍏抽敭瀛�(鍚�)" prop="desc"> - <div class="xinz-inf"> - <el-tag - :key="crux" - type="success" - v-for="crux in item.dynamiccruxs" - closable - effect="dark" - :disable-transitions="false" - @close="handleClosecrux(crux, item, 1)" + <el-form :inline="true" :rules="rules" :model="item"> + <el-row :gutter="10"> + <el-col :span="12" + ><el-form-item prop="targetvalue" label="閫夐」鍚嶇О"> + <el-input + type="text" + placeholder="璇疯緭鍏ワ紙蹇呭~椤癸級" + v-model="item.targetvalue" + show-word-limit + > + </el-input> </el-form-item + ></el-col> + <el-col :span="12" + ><el-form-item label="棰勮鎻愰啋"> + <el-radio-group v-model="item.isabnormal"> + <el-radio :label="1">鏄�</el-radio> + <el-radio :label="0">鍚�</el-radio> + </el-radio-group> + </el-form-item></el-col > - {{ crux }} - </el-tag> - <el-select - v-model="inputValue" - v-if="item.inputVisible" - @change="handleInputConfirm(item)" - filterable - remote - allow-create - reserve-keyword - default-first-option - :loading="loading" - placeholder="璇烽�夋嫨" - > - <el-option - v-for="items in regular" - :key="items.label" - :label="items.label" - :value="items.label" + <!-- <el-col :span="12" v-if="intent" + ><el-form-item label="閫夐」鑺傜偣"> + <el-input + type="text" + placeholder="璇疯緭鍏ヨ妭鐐�" + v-model="item.targetid" + show-word-limit + > + </el-input> </el-form-item + ></el-col> --> + </el-row> + <el-row :gutter="10" v-if="!intent"> + <el-col :span="20" + ><el-form-item label="閫夐」璇存槑"> + <el-input + type="text" + placeholder="璇疯緭鍏�" + v-model="item.optiondesc" + show-word-limit + > + </el-input> </el-form-item + ></el-col> + </el-row> + <el-row :gutter="10" v-if="intent"> + <el-col :span="12" + ><el-form-item label="澶勭悊"> + <el-input + type="text" + placeholder="(榛樿)鏃犲0" + v-model="item.text" + maxlength="10" + show-word-limit + > + </el-input> </el-form-item + ></el-col> + <el-col :span="12" + ><el-form-item label="閫変腑璺宠浆"> + <el-input + type="text" + placeholder="璇疯緭鍏ラ鐩妭鐐�" + v-model="item.nextQuestion" + show-word-limit + > + </el-input> </el-form-item + ></el-col> + </el-row> + <el-form-item label="鍏抽敭瀛�(鍚�)" prop="desc" v-if="hasValue"> + <div class="xinz-inf"> + <el-tag + :key="crux" + type="success" + v-for="crux in item.dynamiccruxs" + closable + effect="dark" + :disable-transitions="false" + @close="handleClosecrux(crux, item, 1)" > - </el-option> - </el-select> - <el-button - v-else - class="button-new-tag" - size="small" - @click="showInput(item)" - >+ 鏂板</el-button - > - </div> - </el-form-item> - <el-form-item label="鍏抽敭瀛�(闈�)" prop="desc"> - <div class="xinz-inf"> - <el-tag - :key="crux" - type="warning" - v-for="crux in item.nodynamiccruxs" - closable - effect="dark" - :disable-transitions="false" - @close="handleClosecrux(crux, item, 2)" - > - {{ crux }} - </el-tag> - <el-select - v-model="inputValue" - v-if="item.noinputVisible" - @change="handleInputConfirm(item)" - filterable - remote - allow-create - reserve-keyword - default-first-option - :loading="loading" - placeholder="璇烽�夋嫨" - > - <el-option - v-for="items in noregular" - :key="items.value" - :label="items.label" - :value="items.label" + {{ crux }} + </el-tag> + <el-select + v-model="inputValue" + v-if="item.inputVisible" + @change="handleInputConfirm(item)" + filterable + remote + allow-create + reserve-keyword + default-first-option + :loading="loading" + placeholder="璇烽�夋嫨" > - </el-option> - </el-select> - <el-button - v-else - class="button-new-tag" - size="small" - @click="showInputno(item)" - >+ 鏂板</el-button - > - </div> - </el-form-item> - - <el-row :gutter="10"> - <el-col :span="16" v-if="intent"> - <el-form-item label="璇煶鏂囦欢"> + <el-option + v-for="items in regular" + :key="items.label" + :label="items.label" + :value="items.label" + > + </el-option> + </el-select> + <el-button + v-else + class="button-new-tag" + size="small" + @click="showInput(item)" + >+ 鏂板</el-button + > + </div> + </el-form-item> + <el-form-item label="鍏抽敭瀛�(闈�)" prop="adesc" v-if="hasValue"> + <div class="xinz-inf"> + <el-tag + :key="crux" + type="warning" + v-for="crux in item.nodynamiccruxs" + closable + effect="dark" + :disable-transitions="false" + @close="handleClosecrux(crux, item, 2)" + > + {{ crux }} + </el-tag> + <el-select + v-model="inputValue" + v-if="item.noinputVisible" + @change="handleInputConfirm(item)" + filterable + remote + allow-create + reserve-keyword + default-first-option + :loading="loading" + placeholder="璇烽�夋嫨" + > + <el-option + v-for="items in noregular" + :key="items.value" + :label="items.label" + :value="items.label" + > + </el-option> + </el-select> + <el-button + v-else + class="button-new-tag" + size="small" + @click="showInputno(item)" + >+ 鏂板</el-button + > + </div> + </el-form-item> + <el-form-item label="閫夐」鏂囦欢" prop="sickness" v-if="Verbalproblem"> + <div style="width: 40vw"> <el-upload class="upload-demo" - style="display: flex" - action="https://jsonplaceholder.typicode.com/posts/" - :on-change="handleChange" - :file-list="fileList" - :limit="1" - :on-exceed="handleExceed" + :action="uploadImgUrl" + :headers="headers" + accept=".jpg,.png,image/*" + :on-success="handleChange.bind(this, item)" > <el-button size="small" type="primary">鐐瑰嚮涓婁紶</el-button> </el-upload> - </el-form-item></el-col - > - <el-col :span="intent ? 8 : 22"> - <div style="text-align: right; padding-right: 10px"> - <el-button - v-if="controlsc" - @click="$emit('addoption', item)" - type="success" - icon="el-icon-circle-plus-outline" - circle - ></el-button> - <el-button - type="danger" - icon="el-icon-delete" - circle - @click="$emit('deloption', item)" - ></el-button> - <el-button - v-if="controlsc" - @click="$emit('syioption', item)" - type="primary" - icon="el-icon-top" - circle - ></el-button> - <el-button - v-if="controlsc" - @click="$emit('xiayioption', item)" - type="primary" - icon="el-icon-bottom" - circle - ></el-button> + <div style="margin: 20px"> + <el-image + style="width: 100px; height: 100px" + :src="item.picturePath" + :preview-src-list="[...item.picturePath]" + > + </el-image> + </div> </div> - </el-col> - </el-row> + </el-form-item> + + <el-row :gutter="10"> + <el-col> + <div style="text-align: right; padding-right: 10px"> + <el-button + v-if="controlsc || addoption" + @click="$emit('addoption', item)" + type="success" + icon="el-icon-circle-plus-outline" + circle + ></el-button> + <el-button + type="danger" + icon="el-icon-delete" + circle + @click="$emit('deloption', item)" + ></el-button> + <el-button + v-if="controlsc" + @click="$emit('syioption', item)" + type="primary" + icon="el-icon-top" + circle + ></el-button> + <el-button + v-if="controlsc" + @click="$emit('xiayioption', item)" + type="primary" + icon="el-icon-bottom" + circle + ></el-button> + </div> + </el-col> + </el-row> + </el-form> </div> </div> </template> <script> import store from "@/store"; +import { getToken } from "@/utils/auth"; export default { data() { @@ -217,6 +226,10 @@ url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100", }, ], + headers: { + Authorization: "Bearer " + getToken(), + }, + uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/uploadSort", whether: 1, //1涓哄叧閿瘝锛�2涓哄惁瀹氬叧閿瘝 inputValue: "", inputVisible: false, @@ -226,6 +239,11 @@ noregular: [], nodynamiccruxs: ["鍒�", "涓�"], dynamiccruxs: ["濂�"], + rules: { + targetvalue: [ + { required: true, message: "璇疯緭鍏ラ�夐」鍚嶇О", trigger: "blur" }, + ], + }, }; }, props: { @@ -238,7 +256,19 @@ type: Boolean, default: true, }, + addoption: { + type: Boolean, + default: false, + }, intent: { + type: Boolean, + default: true, + }, + hasValue: { + type: Boolean, + default: true, + }, + Verbalproblem: { type: Boolean, default: true, }, @@ -288,9 +318,9 @@ this.handleSelectionChange(); }, // 鎺у埗鏂囦欢 - handleChange(file, fileList) { - this.fileList = fileList.slice(-3); - }, + // handleChange(file, fileList) { + // this.fileList = fileList.slice(-3); + // }, // 鏂囦欢瓒呭嚭涓暟闄愬埗鏃剁殑閽╁瓙 handleExceed(files, fileList) { this.$message.warning( @@ -364,6 +394,17 @@ console.log(this.TargetoptionList); this.$emit("handleSelectionChange", selection); }, + // 閫夐」鏂囦欢涓婁紶 + handleChange(item, response, file, fileList) { + console.log(response, "response"); + console.log(item, "item"); + console.log(this.TargetoptionList, "this.TargetoptionList"); + let index = this.TargetoptionList.findIndex( + (obj) => obj.guid == item.guid + ); + console.log(index); + this.TargetoptionList[index].picturePath = response.url; + }, }, }; </script> -- Gitblit v1.9.3