|
@@ -21,7 +21,7 @@
|
|
|
<el-form-item label="添加模块内容:" prop="moduleInfo" class="formItem">
|
|
|
<div class="moduleInfoItem" v-for="(item,index) in moduleInfoList">
|
|
|
<div class="searchBox">
|
|
|
- <el-input v-model="item.searchName" placeholder="搜索字段单元" @input="searchFiled(index)">
|
|
|
+ <el-input v-model.trim="item.searchName" placeholder="搜索字段单元" @input="searchFiled(index)">
|
|
|
|
|
|
</el-input>
|
|
|
<ul v-if="searchIndex == index && item.searchResult.length > 0" class="searchResultBox">
|
|
@@ -37,12 +37,17 @@
|
|
|
<div>
|
|
|
<p>已选择字段:</p>
|
|
|
<div class="selectFiled" v-for="(it,ii) in item.selectFiled">
|
|
|
- <span>{{it.name}}</span>
|
|
|
- <span @click="upFiled(ii,index)">上升</span>
|
|
|
- <span @click="downFiled(ii,index)">下降</span>
|
|
|
- <span @click="delSelected(ii,index)">删除</span>
|
|
|
+ <div class="orderBox">
|
|
|
+ <span v-if="ii !=0" class="el-icon-top order" :class="{lastItem:ii ==item.selectFiled.length}" @click="upFiled(ii,index)"></span>
|
|
|
+ <span v-if="ii !=item.selectFiled.length-1" class="el-icon-bottom order" :class="{firstItem:ii == 0}" @click="downFiled(ii,index)"></span>
|
|
|
+ </div>
|
|
|
+ <span class="filedName">{{it.name}}
|
|
|
+ <span class="el-icon-circle-close delFiled" @click="delSelected(ii,index)"></span>
|
|
|
+ </span>
|
|
|
+
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <span class="el-icon-circle-close delUnit" @click="delUnit(index)"></span>
|
|
|
</div>
|
|
|
<span class="addUnit" @click="addUnit">+单元组</span>
|
|
|
</el-form-item>
|
|
@@ -53,6 +58,7 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
+// import api from '@api/safeControl.js';
|
|
|
export default {
|
|
|
name:"AddQualityControlTemp",
|
|
|
data: function(){
|
|
@@ -88,15 +94,15 @@ export default {
|
|
|
{
|
|
|
searchName:"",
|
|
|
searchResult:[
|
|
|
- {
|
|
|
- name: "4姓名"
|
|
|
- },
|
|
|
- {
|
|
|
- name: "5职业"
|
|
|
- },
|
|
|
- {
|
|
|
- name: "6年龄"
|
|
|
- }
|
|
|
+ // {
|
|
|
+ // name: "4姓名"
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // name: "5职业"
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // name: "6年龄"
|
|
|
+ // }
|
|
|
],
|
|
|
selectFiled:[
|
|
|
{
|
|
@@ -118,15 +124,7 @@ export default {
|
|
|
this.moduleInfoList.push({
|
|
|
searchName:"",
|
|
|
searchResult:[
|
|
|
- {
|
|
|
- name: "4姓名"
|
|
|
- },
|
|
|
- {
|
|
|
- name: "5职业"
|
|
|
- },
|
|
|
- {
|
|
|
- name: "6年龄"
|
|
|
- }
|
|
|
+
|
|
|
],
|
|
|
selectFiled:[
|
|
|
{
|
|
@@ -144,10 +142,35 @@ export default {
|
|
|
searchFiled(index){
|
|
|
console.log(index)
|
|
|
this.searchIndex = index
|
|
|
+ const searchName = this.moduleInfoList[index].searchName
|
|
|
+ // api.searchFiled(param).then(res =>{
|
|
|
+ // if(res.data.code == '0'){
|
|
|
+ // this.moduleInfoList[index].searchResult = []
|
|
|
+ // this.moduleInfoList[index].searchResult.push(res.data.data)
|
|
|
+ // }
|
|
|
+ // }).catch(e =>{
|
|
|
+ // console.log(e)
|
|
|
+ // })
|
|
|
+ if(this.moduleInfoList[index].searchName){
|
|
|
+ this.moduleInfoList[index].searchResult = []
|
|
|
+ this.moduleInfoList[index].searchResult.push([
|
|
|
+ {
|
|
|
+ name: "4姓名"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "5职业"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "6年龄"
|
|
|
+ }
|
|
|
+ ])
|
|
|
+ }
|
|
|
},
|
|
|
selectSearchFiled(searchItem,index){
|
|
|
this.moduleInfoList[index].selectFiled.push(searchItem)
|
|
|
this.searchIndex = -1
|
|
|
+ this.moduleInfoList[index].searchName=""
|
|
|
+ this.moduleInfoList[index].searchResult = []
|
|
|
console.log(searchItem)
|
|
|
},
|
|
|
upFiled(ii,index){
|
|
@@ -168,10 +191,12 @@ export default {
|
|
|
|
|
|
},
|
|
|
delSelected(ii,index){
|
|
|
- console.log(this.moduleList)
|
|
|
this.moduleInfoList[index].selectFiled.splice(ii,1)
|
|
|
|
|
|
},
|
|
|
+ delUnit(index){
|
|
|
+ this.moduleInfoList.splice(index,1)
|
|
|
+ },
|
|
|
warning(msg, type,time) {
|
|
|
this.$message({
|
|
|
showClose: true,
|
|
@@ -208,13 +233,14 @@ export default {
|
|
|
width: 500px;
|
|
|
min-height: 200px;
|
|
|
padding: 0 50px 0 50px;
|
|
|
- border: 1px solid rgb(220, 223, 230);
|
|
|
+ border: 1px solid #dcdfe6;
|
|
|
border-radius: 5px;
|
|
|
margin-bottom: 20px;
|
|
|
+ position: relative;
|
|
|
}
|
|
|
.addUnit{
|
|
|
display: inline-block;
|
|
|
- border: 1px solid rgb(220, 223, 230);
|
|
|
+ border: 1px solid #dcdfe6;
|
|
|
border-radius: 5px;
|
|
|
width: 80px;
|
|
|
text-align: center;
|
|
@@ -247,5 +273,40 @@ export default {
|
|
|
.searchItem:hover{
|
|
|
background-color: #abcdef;
|
|
|
}
|
|
|
-
|
|
|
+.selectFiled{
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+.orderBox{
|
|
|
+ position: absolute;
|
|
|
+ left: -50px;
|
|
|
+}
|
|
|
+.order{
|
|
|
+ display: inline-block;
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ font-size: 16px;
|
|
|
+ margin-left: 5px;
|
|
|
+ border: 1px solid #dcdfe6;
|
|
|
+ cursor: pointer;
|
|
|
+ i{
|
|
|
+ width: 15px;
|
|
|
+ height: 15px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.firstItem{
|
|
|
+ margin-left: 28px;
|
|
|
+}
|
|
|
+.delUnit,.delFiled{
|
|
|
+ position: absolute;
|
|
|
+ top: -8px;
|
|
|
+ right: -6px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.delFiled{
|
|
|
+ top: -7px;
|
|
|
+ right: -9px;
|
|
|
+}
|
|
|
+.filedName{
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
</style>
|