<template>
|
<div class="page-list-container">
|
<!-- 数据Table -->
|
<yrt-data-list :ref="dataListRef" :editor-ref="editorRef" :data-options="dataOptions" :fields.sync="dataListOptions.fields" :buttons="dataListOptions.buttons" :button-click="buttonClick" :data-list-selections.sync="dataListSelections" :auth-nodes="authNodes">
|
<template slot="common-column-slot" slot-scope="{ row, col }">
|
<template v-if="col.prop=='auditing'">
|
<template>
|
<el-tag v-if="row[col.prop]==0" color="#ffff33" style="color:black;border:0">
|
{{ $refs[dataListRef].translateText(col.prop, row[col.prop], col.dropdown_Id) }}
|
</el-tag>
|
<el-tag v-else-if="row[col.prop]==1" color="#ff0033" style="color:white;border:0">
|
{{ $refs[dataListRef].translateText(col.prop, row[col.prop], col.dropdown_Id) }}
|
</el-tag>
|
<el-tag v-else-if="row[col.prop]==2" color="#33cc33" style="color:black;border:0;color:#fff;">
|
{{ $refs[dataListRef].translateText(col.prop, row[col.prop], col.dropdown_Id) }}
|
</el-tag>
|
<span v-else>
|
{{ row[col.prop] }}
|
</span>
|
</template>
|
</template>
|
<template v-else-if="col.prop=='statusText'">
|
<template>
|
<el-tag v-if="row[col.prop]=='新建'" color="#ffff33" style="color:black;border:0">
|
{{ row[col.prop] }}
|
</el-tag>
|
<el-tag v-else-if="row[col.prop]=='审核成功'" color="#00cc00" style="color:white;border:0">
|
{{ row[col.prop] }}
|
</el-tag>
|
<el-tag v-else-if="row[col.prop]=='终止'" color="#CE0F35" style="color:white;border:0">
|
{{ row[col.prop] }}
|
</el-tag>
|
<span v-else>
|
{{ row[col.prop] }}
|
</span>
|
</template>
|
</template>
|
|
</template>
|
</yrt-data-list>
|
<!--数据编辑器Editor-->
|
<yrt-editor :ref="editorRef" :on-save-before="onSaveBefore" :edit-button-click="editButtonClick" :data-list-ref="dataListRef" v-bind="editorOptions" :data-options="dataOptions" :action.sync="editorOptions.action" :top.sync="editorOptions.top" :visible.sync="editorOptions.config.visible" :detail-button-click="detailButtonClick" :auth-nodes="authNodes" :btn-read-only="btnReadOnly" @on-add-load-after="onEditLoadAfter" @on-edit-load-after="onEditLoadAfter">
|
<div slot="blank-passing" class="tag-container">
|
<el-tag v-for="(passing, index) in passing" :key="index" :disable-transitions="false" closable @close="handleClose()">
|
{{ passing }}
|
</el-tag>
|
<el-input v-if="inputVisible" ref="saveTagInput" v-model="inputValue" class="input-new-tag" size="small" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
|
</el-input>
|
<el-button v-else class="button-new-tag" size="small" @click="showInput">+ 添加途经点</el-button>
|
</div>
|
</yrt-editor>
|
</div>
|
</template>
|
<script>
|
import baseLayout from "@/components/common/base-layout.vue";
|
|
export default {
|
name: "tms-site-tms-line",
|
components: {},
|
mixins: [baseLayout],
|
data() {
|
return {
|
inputVisible: false,
|
passing: [],
|
inputValue: ""
|
};
|
},
|
methods: {
|
editButtonClick() {},
|
// 改变后事件
|
// onChange(ref, val, field, formData) {},
|
onSaveBefore(formData) {
|
var editorRef = this.editor;
|
editorRef.changeValue("passing", this.passing.join(","));
|
|
const siteName = formData.siteName;
|
const passing = formData.passing;
|
const siteName_Name_In = formData.siteName_Name_In;
|
// lineRoute "线路路由" = siteName "出发网点" > passing "途径点" > siteName_Name_In "目的地网点"
|
formData.lineRoute = `${siteName}>${passing}>${siteName_Name_In}`;
|
},
|
onEditLoadAfter(formData) {
|
if (formData.statusText === "新建") {
|
this.btnReadOnly.auditing = false;
|
this.btnReadOnly.save = false;
|
this.btnReadOnly.stop = false;
|
this.editorOptions.config.disabled = false; // 整个对话框可编辑
|
} else if (formData.statusText === "审核成功") {
|
this.btnReadOnly.auditing = true;
|
this.btnReadOnly.stop = true;
|
this.btnReadOnly.open = false;
|
this.btnReadOnly.save = true;
|
this.btnReadOnly.toPurchaseOrder = true;
|
this.editorOptions.config.disabled = true; // 整个对话框可编辑
|
this.btnReadOnly.copy = false;
|
} else if (formData.statusText === "终止") {
|
this.btnReadOnly.auditing = true;
|
this.btnReadOnly.stop = true;
|
this.btnReadOnly.open = false;
|
this.btnReadOnly.save = true;
|
this.btnReadOnly.toPurchaseOrder = true;
|
this.editorOptions.config.disabled = true; // 整个对话框可编辑
|
this.btnReadOnly.copy = false;
|
}
|
|
if (formData.passing) {
|
this.passing = formData.passing.split(",");
|
} else {
|
this.passing = [];
|
}
|
},
|
handleClose(tag) {
|
this.passing.splice(this.passing.indexOf(tag), 1);
|
},
|
handleInputConfirm() {
|
const inputValue = this.inputValue;
|
var url = "/api/tms/line/checkPlateCode";
|
var params = {
|
voyageCode: inputValue
|
};
|
this.common.ajax(url, params, res => {
|
if (res.result) {
|
if (inputValue) {
|
this.passing.push(inputValue);
|
}
|
} else {
|
this.$message.error(res.msg);
|
}
|
this.inputVisible = false;
|
this.inputValue = "";
|
var editorRef = this.editor;
|
editorRef.changeValue("passing", this.passing.join(","));
|
});
|
},
|
showInput() {
|
this.inputVisible = true;
|
this.$nextTick(_ => {
|
this.$refs.saveTagInput.$refs.input.focus();
|
});
|
}
|
}
|
};
|
</script>
|
<style lang="scss" scoped>
|
.tag-container {
|
.el-tag + .el-tag {
|
margin-left: 10px;
|
}
|
.button-new-tag {
|
margin-left: 10px;
|
width: 130px;
|
height: 32px;
|
line-height: 30px;
|
padding-top: 0;
|
padding-bottom: 0;
|
}
|
.input-new-tag {
|
width: 130px;
|
margin-left: 10px;
|
vertical-align: bottom;
|
}
|
}
|
</style>
|