|
@@ -5,12 +5,17 @@
|
|
|
<div class="form_top">
|
|
|
<div class="link_name" v-if="state > 0">
|
|
|
<span>线路编号:</span>
|
|
|
- <el-input placeholder="请输入内容" v-model="lineNo" disabled>
|
|
|
+ <el-input placeholder="请输入内容" class="el_input_suffix" v-model="lineNo" disabled>
|
|
|
</el-input>
|
|
|
</div>
|
|
|
<div class="link_name">
|
|
|
<span>线路名称:</span>
|
|
|
- <el-input placeholder="请输入内容" v-model="line_name" class="el_input_suffix" clearable>
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入内容"
|
|
|
+ v-model="line_name"
|
|
|
+ class="el_input_suffix"
|
|
|
+ clearable
|
|
|
+ >
|
|
|
</el-input>
|
|
|
</div>
|
|
|
<div class="link_type">
|
|
@@ -27,46 +32,54 @@
|
|
|
</div>
|
|
|
<div class="spellNumber">
|
|
|
<span class="text">拼数:</span>
|
|
|
- <el-input placeholder="请输入内容" v-model="spellNumber" clearable>
|
|
|
+ <el-input placeholder="请输入内容" class="input" v-model="spellNumber" clearable>
|
|
|
</el-input>
|
|
|
</div>
|
|
|
<div class="link_zi_list">
|
|
|
<span>环节:</span>
|
|
|
- <el-button
|
|
|
- type="primary"
|
|
|
- :key="index"
|
|
|
- v-for="(item,index) in btnList"
|
|
|
- :disable-transitions="false"
|
|
|
- @click="addClick(item)"
|
|
|
- class="link_zi_list_btn"
|
|
|
- >
|
|
|
- {{item.linkName}}
|
|
|
- </el-button>
|
|
|
- <el-input
|
|
|
- class="input-new-tag"
|
|
|
- v-if="inputVisible"
|
|
|
- v-model="inputValue"
|
|
|
- ref="saveTagInput"
|
|
|
- size="small"
|
|
|
- @blur="onBlur"
|
|
|
- >
|
|
|
- </el-input>
|
|
|
- <el-button v-else class="button-new-tag" size="small" @click="showInput"> + 新增</el-button>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ :key="index"
|
|
|
+ v-for="(item, index) in btnList"
|
|
|
+ :disable-transitions="false"
|
|
|
+ @click="addClick(item)"
|
|
|
+ class="link_zi_list_btn"
|
|
|
+ >
|
|
|
+ {{ item.linkName }}
|
|
|
+ </el-button>
|
|
|
+ <el-input
|
|
|
+ class="input-new-tag"
|
|
|
+ v-if="inputVisible"
|
|
|
+ v-model="inputValue"
|
|
|
+ ref="saveTagInput"
|
|
|
+ size="small"
|
|
|
+ @blur="onBlur"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ <!-- <el-button
|
|
|
+ v-else
|
|
|
+ class="button-new-tag"
|
|
|
+ size="small"
|
|
|
+ @click="showInput"
|
|
|
+ >
|
|
|
+ + 新增</el-button
|
|
|
+ > -->
|
|
|
</div>
|
|
|
-
|
|
|
</div>
|
|
|
<div class="linkList">
|
|
|
- <div class="link_list" id="tag">
|
|
|
- <el-tag
|
|
|
- class="tag"
|
|
|
- size="small"
|
|
|
- v-for="(item, i) in linkList"
|
|
|
- :key="i"
|
|
|
- @close="deleteClick(i)"
|
|
|
- closable
|
|
|
- >
|
|
|
- {{ item.linkName }}
|
|
|
- </el-tag>
|
|
|
+ <div class="link_list">
|
|
|
+ <div class="link_list_zi" v-for="(item,i) in linkList" :key="i">
|
|
|
+ <div class="xhNumber">
|
|
|
+ <span>{{i + 1}}</span>
|
|
|
+ </div>
|
|
|
+ <div class="link_list_name">
|
|
|
+ {{item.linkName}}
|
|
|
+ </div>
|
|
|
+ <div class="link_meng_qicheheng" v-if="item.gjName">
|
|
|
+ {{item.gjName}}
|
|
|
+ </div>
|
|
|
+ <i class="el-icon-delete" @click="deleteClick(i)"></i>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="btn">
|
|
@@ -75,18 +88,42 @@
|
|
|
>确认</el-button
|
|
|
>
|
|
|
</div>
|
|
|
+
|
|
|
+ <el-dialog
|
|
|
+ :title="title"
|
|
|
+ :visible.sync="dialogVisible"
|
|
|
+ width="30%"
|
|
|
+ >
|
|
|
+ <el-select v-model="gateGuard" multiple placeholder="请选择">
|
|
|
+ <el-option
|
|
|
+ v-for="(item,i) in gateGuardList"
|
|
|
+ :key="i"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="dialogVisible = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="determine">确 定</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import PageTitle from "@/components/Page/Title";
|
|
|
-import Sortable from "sortablejs";
|
|
|
export default {
|
|
|
components: { PageTitle },
|
|
|
data() {
|
|
|
return {
|
|
|
- inputVisible:false,
|
|
|
- inputValue: '',
|
|
|
+ gateGuardList:[],
|
|
|
+ gateGuard:null,
|
|
|
+ title:"请选择门岗",
|
|
|
+ dialogVisible:false,
|
|
|
+ form:{},
|
|
|
+ inputVisible: false,
|
|
|
+ inputValue: "",
|
|
|
lineNo: "",
|
|
|
line_name: "",
|
|
|
spellNumber: 1,
|
|
@@ -116,43 +153,40 @@ export default {
|
|
|
btnList: [],
|
|
|
linkList: [],
|
|
|
state: 0,
|
|
|
+ linkItem:{},
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
|
this.initialization();
|
|
|
},
|
|
|
- mounted() {
|
|
|
- this.drag();
|
|
|
- },
|
|
|
methods: {
|
|
|
- A(){
|
|
|
- // 获取所有的作业环节
|
|
|
- this.axios.post("/api/v1/rms/getLink").then((res) => {
|
|
|
- if (res.data.code == "200") {
|
|
|
- this.btnList = res.data.data;
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- //将新增变为输入框
|
|
|
- showInput() {
|
|
|
- this.inputVisible = true;
|
|
|
- },
|
|
|
- //当输入框失去焦点之后触发,新增作业环节
|
|
|
- onBlur() {
|
|
|
- console.log(this.inputValue);
|
|
|
- if (this.inputValue) {
|
|
|
- this.axios.post('/api/v1/rms/LinkInsertSelective',
|
|
|
- {
|
|
|
- linkName:this.inputValue,
|
|
|
- userName:""
|
|
|
- }).then((res)=>{
|
|
|
- if(res.data.code == "200"){
|
|
|
- this.A();
|
|
|
+ determine(){
|
|
|
+ let text = "";
|
|
|
+ this.gateGuardList.forEach((e)=>{
|
|
|
+ for(var i = 0;i < this.gateGuard.length;i++){
|
|
|
+ if(this.gateGuard[i] == e.value){
|
|
|
+ text += e.label + "/"
|
|
|
}
|
|
|
- })
|
|
|
- }
|
|
|
- this.inputVisible = false;
|
|
|
- this.inputValue = '';
|
|
|
+ }
|
|
|
+ })
|
|
|
+ let index = text.lastIndexOf("/")
|
|
|
+ text =text.substring(0,index);
|
|
|
+ console.log(this.linkItem);
|
|
|
+ this.linkList.push({
|
|
|
+ linkId:this.linkItem.linkId,
|
|
|
+ linkName:this.linkItem.linkName,
|
|
|
+ gjName:text,
|
|
|
+ gateGuard:this.gateGuard
|
|
|
+ })
|
|
|
+ this.dialogVisible = false;
|
|
|
+ },
|
|
|
+ A() {
|
|
|
+ // 获取所有的作业环节
|
|
|
+ this.axios.post("/api/v1/rms/getLink").then((res) => {
|
|
|
+ if (res.data.code == "200") {
|
|
|
+ this.btnList = res.data.data;
|
|
|
+ }
|
|
|
+ });
|
|
|
},
|
|
|
// 初始化页面的数据
|
|
|
initialization() {
|
|
@@ -181,8 +215,29 @@ export default {
|
|
|
},
|
|
|
// 将点击的对象添加到linkList的数组中
|
|
|
addClick(item) {
|
|
|
- console.log(item);
|
|
|
- this.linkList.push(item);
|
|
|
+ if(item.linkId == 4 || item.linkId == 5 || item.linkId == 6){
|
|
|
+ this.linkList.push({
|
|
|
+ linkId:item.linkId,
|
|
|
+ linkName:item.linkName,
|
|
|
+ gjName:"",
|
|
|
+ gateGuard:[]
|
|
|
+ })
|
|
|
+ }else{
|
|
|
+ this.gateGuard = [];
|
|
|
+ this.gateGuardList = [];
|
|
|
+ if(item.linkId == 1 || item.linkId == 7){
|
|
|
+ this.axios.get('/api/v1/tms/getGatepost').then((res)=>{
|
|
|
+ this.gateGuardList = res.data.data
|
|
|
+ })
|
|
|
+ this.dialogVisible = true;
|
|
|
+ }else if(item.linkId == 2 || item.linkId == 3){
|
|
|
+ this.axios.get('/api/v1/uc/getAllCalculateMes').then((res)=>{
|
|
|
+ this.gateGuardList = res.data
|
|
|
+ })
|
|
|
+ this.dialogVisible = true;
|
|
|
+ }
|
|
|
+ this.linkItem = item;
|
|
|
+ }
|
|
|
},
|
|
|
// 删除被点击的对象
|
|
|
deleteClick(index) {
|
|
@@ -207,6 +262,7 @@ export default {
|
|
|
},
|
|
|
// 点击确定按钮
|
|
|
confirmClick() {
|
|
|
+ console.log("sdsd")
|
|
|
// 判断是否存在空值
|
|
|
if (this.line_name && this.value && this.linkList.length > 0) {
|
|
|
var map = {
|
|
@@ -216,6 +272,7 @@ export default {
|
|
|
line_type: parseInt(this.value),
|
|
|
linkList: this.linkList,
|
|
|
};
|
|
|
+ console.log(map)
|
|
|
var URL = "";
|
|
|
var messageText = "";
|
|
|
// 若上一个页面传递的值为0则新增
|
|
@@ -245,32 +302,6 @@ export default {
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
- //拖动事件
|
|
|
- drag() {
|
|
|
- var _this = this;
|
|
|
- var $ul = document.getElementById("tag");
|
|
|
- new Sortable($ul, {
|
|
|
- onUpdate: function (event) {
|
|
|
- //修改items数据顺序
|
|
|
- var newIndex = event.newIndex,
|
|
|
- oldIndex = event.oldIndex,
|
|
|
- $li = $ul.children[newIndex],
|
|
|
- $oldLi = $ul.children[oldIndex];
|
|
|
- // 先删除移动的节点
|
|
|
- $ul.removeChild($li);
|
|
|
- // 再插入移动的节点到原有节点,还原了移动的操作
|
|
|
- if (newIndex > oldIndex) {
|
|
|
- $ul.insertBefore($li, $oldLi);
|
|
|
- } else {
|
|
|
- $ul.insertBefore($li, $oldLi.nextSibling);
|
|
|
- }
|
|
|
- // 更新items数组
|
|
|
- var item = _this.linkList.splice(oldIndex, 1);
|
|
|
- _this.linkList.splice(newIndex, 0, item[0]);
|
|
|
- },
|
|
|
- animation: 150,
|
|
|
- });
|
|
|
- },
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
@@ -279,76 +310,113 @@ export default {
|
|
|
.transitRouteAdd {
|
|
|
.form_top {
|
|
|
width: 100%;
|
|
|
- height: 10.625rem;
|
|
|
+ height: 170px;
|
|
|
.link_name {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
- margin-top: 1.25rem;
|
|
|
- .el_input_suffix{
|
|
|
- widows: 50px;
|
|
|
-
|
|
|
+ margin-top: 20px;
|
|
|
+ .el_input_suffix {
|
|
|
+ width: 220px;
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
.link_type {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
- margin-top: 1.25rem;
|
|
|
+ margin-top: 20px;
|
|
|
}
|
|
|
.spellNumber {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
- margin-top: 1.25rem;
|
|
|
+ margin-top: 20px;
|
|
|
.text {
|
|
|
- width: 80px;
|
|
|
+ width: 60px;
|
|
|
text-align: right;
|
|
|
}
|
|
|
+ .input{
|
|
|
+ width: 220px;
|
|
|
+ }
|
|
|
}
|
|
|
.link_zi_list {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
- margin-top: 1.25rem;
|
|
|
- .link_zi_list_btn{
|
|
|
- width: 3.125rem; height: 2rem;
|
|
|
+ margin-top: 20px;
|
|
|
+ .link_zi_list_btn {
|
|
|
+ width: 50px;
|
|
|
+ height: 32px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
- margin-right: 0.625rem;
|
|
|
+ margin-right: 10px;
|
|
|
}
|
|
|
.input-new-tag {
|
|
|
- width: 4.375rem;
|
|
|
- margin-left: 0.625rem;
|
|
|
+ width: 70px;
|
|
|
+ margin-left: 10px;
|
|
|
vertical-align: bottom;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.linkList {
|
|
|
- margin-top: 5.625rem;
|
|
|
+ margin-top: 120px;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
- .link_list {
|
|
|
- border: #8d8c8c 0.0625rem solid;
|
|
|
+ .link_list{
|
|
|
+ border: #8d8c8c 1px solid;
|
|
|
width: 80%;
|
|
|
- height: 12.5rem;
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- justify-content: flex-start;
|
|
|
- overflow: hidden;
|
|
|
- padding: 0.625rem;
|
|
|
- .tag {
|
|
|
- margin: 0.3125rem;
|
|
|
+ min-height: 200px;
|
|
|
+ .link_list_zi{
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ border-bottom: 1px #9b9898cc solid ;
|
|
|
+ height: 40px;
|
|
|
+ .xhNumber{
|
|
|
+ background-color: #006eff;
|
|
|
+ color: #fff;
|
|
|
+ width: 20px;height: 20px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ .link_list_name{
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 700;
|
|
|
+ margin-right: 30px;
|
|
|
+ }
|
|
|
+ .link_meng_qicheheng{
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 600;
|
|
|
+ margin-right: 50px;
|
|
|
+ }
|
|
|
+ i{
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
+ // .link_list {
|
|
|
+ // border: #8d8c8c 1px solid;
|
|
|
+ // width: 80%;
|
|
|
+ // height: 200px;
|
|
|
+ // display: flex;
|
|
|
+ // flex-wrap: wrap;
|
|
|
+ // justify-content: flex-start;
|
|
|
+ // overflow: hidden;
|
|
|
+ // padding: 10px;
|
|
|
+ // .tag {
|
|
|
+ // margin: 5px;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
}
|
|
|
.btn {
|
|
|
display: flex;
|
|
|
width: 100%;
|
|
|
justify-content: center;
|
|
|
- margin-top: 20px;
|
|
|
+ margin-top: 1.25rem;
|
|
|
}
|
|
|
}
|
|
|
</style>
|