Fedex / imac-vue

Go to a project
Toggle navigation Toggle navigation pinning
Elements-SY
cfbf301f 1 parent 7745adf8

【IMAC-ET86】配舱设置-新增ET86配舱

Inline Side-by-side
Showing 19 changed files with 2506 additions and 103 deletions
...@@ -39,8 +39,10 @@ ...@@ -39,8 +39,10 @@
39 "axios": "0.21.1", 39 "axios": "0.21.1",
40 "core-js": "3.8.3", 40 "core-js": "3.8.3",
41 "element-ui": "2.15.3", 41 "element-ui": "2.15.3",
42 + "sortablejs": "^1.15.0",
42 "vue": "2.6.14", 43 "vue": "2.6.14",
43 "vue-router": "3.5.2", 44 "vue-router": "3.5.2",
45 + "vuedraggable": "^2.24.3",
44 "vuex": "3.6.2" 46 "vuex": "3.6.2"
45 }, 47 },
46 "devDependencies": { 48 "devDependencies": {
......
1 +<template>
2 + <div
3 + class="ylform"
4 + :class="inline == true ? 'the-form' : ''"
5 + :style="{ marginBottom: `${marginBottom}px` }"
6 + >
7 + <el-form
8 + :model="tempQueryForm"
9 + :inline="inline"
10 + :loading="loading"
11 + ref="ruleForm"
12 + :size="size"
13 + >
14 + <el-form-item
15 + v-for="item in tempFormConfig"
16 + :label="item.label"
17 + :key="item.prop"
18 + :prop="item.prop"
19 + :rules="item.rules"
20 + >
21 + <!-- 输入框 -->
22 + <el-input
23 + v-if="item.type === 'Input'"
24 + v-model.trim="tempQueryForm[item.prop]"
25 + :style="{ width: item.width }"
26 + :disabled="item.disable"
27 + :placeholder="
28 + item.placeholder ? item.placeholder : '请输入' + item.label
29 + "
30 + v-on:[item.trigger]="
31 + (e) => {
32 + inputEvent(e, item);
33 + }
34 + "
35 + @keyup.enter.native="toEnterSearch"
36 + clearable
37 + >
38 + </el-input>
39 + <template v-if="view">
40 + <span v-text="tempQueryForm[item.prop]"></span>
41 + </template>
42 + <!-- 数字输入框 -->
43 + <el-input
44 + v-if="item.type === 'inputNumber'"
45 + type="number"
46 + :min="item.min"
47 + :max="item.max"
48 + v-model.trim="tempQueryForm[item.prop]"
49 + :style="{ width: item.width }"
50 + :disabled="item.disable"
51 + :placeholder="
52 + item.placeholder ? item.placeholder : '请输入' + item.label
53 + "
54 + v-on:keyup.enter="value = value.replace(/^-?[0-9]\d*$/, '')"
55 + clearable
56 + >
57 + </el-input>
58 + <!-- InputNumber 计数器 -->
59 + <el-input-number
60 + v-if="item.type === 'Number'"
61 + v-model.trim="tempQueryForm[item.prop]"
62 + :min="0"
63 + :max="10"
64 + :size="item.size"
65 + :style="{ width: item.width }"
66 + label="描述文字"
67 + ></el-input-number>
68 +
69 + <template v-if="view">
70 + <span v-text="tempQueryForm[item.prop]"></span>
71 + </template>
72 + <!-- 下拉选择 -->
73 + <el-select
74 + v-if="item.type === 'Select'"
75 + :multiple="item.multiple"
76 + :filterable="item.filterable"
77 + v-model.trim="tempQueryForm[item.prop]"
78 + :style="{ width: item.width }"
79 + :disabled="item.disable"
80 + :loading="searchLoading"
81 + :placeholder="
82 + item.placeholder ? item.placeholder : '请选择' + item.label
83 + "
84 + clearable
85 + >
86 + <el-option
87 + v-for="op in item.options.data"
88 + :label="op[item.options.label] || op.label"
89 + :value="op[item.options.value] || op.value"
90 + :key="op[item.options.value] || op.value"
91 + >
92 + </el-option>
93 + </el-select>
94 + <!-- 远程搜索 -->
95 + <template v-if="item.type === 'Search'">
96 + <el-autocomplete
97 + v-model.trim="tempQueryForm[item.prop]"
98 + :style="{ width: item.width }"
99 + :debounce="1500"
100 + :fetch-suggestions="querySearchAsync"
101 + :placeholder="
102 + item.placeholder ? item.placeholder : '请选择' + item.label
103 + "
104 + @focus="focusKey(item)"
105 + @select="selectSearch"
106 + clearable
107 + ></el-autocomplete>
108 + </template>
109 +
110 + <!-- 日期 -->
111 + <el-date-picker
112 + v-if="item.type === 'Date'"
113 + v-model.trim="tempQueryForm[item.prop]"
114 + :disabled="item.disable"
115 + :placeholder="item.placeholder ? item.placeholder : '请选择日期'"
116 + clearable
117 + >
118 + </el-date-picker>
119 +
120 + <!-- 时间 -->
121 + <el-time-select
122 + v-if="item.type === 'Time'"
123 + v-model.trim="tempQueryForm[item.prop]"
124 + :disabled="item.disable"
125 + :placeholder="item.placeholder ? item.placeholder : '请选择时间'"
126 + clearable
127 + >
128 + </el-time-select>
129 +
130 + <!-- 日期时间 -->
131 + <el-date-picker
132 + v-if="item.type === 'DateTime'"
133 + type="datetime"
134 + v-model.trim="tempQueryForm[item.prop]"
135 + :disabled="item.disable"
136 + :placeholder="item.placeholder ? item.placeholder : '请选择日期'"
137 + clearable
138 + >
139 + </el-date-picker>
140 +
141 + <!-- 日期范围 -->
142 + <el-date-picker
143 + v-if="item.type === 'datetimerange'"
144 + type="datetimerange"
145 + v-model.trim="tempQueryForm[item.prop]"
146 + :disabled="item.disable"
147 + range-separator="至"
148 + start-placeholder="开始日期"
149 + end-placeholder="结束日期"
150 + clearable
151 + >
152 + </el-date-picker>
153 +
154 + <!-- 单选框 普通的样式 Radio 的尺寸，仅在 border 为真时有效-->
155 + <template v-if="item.type === 'radio'">
156 + <el-radio
157 + v-model.trim="tempQueryForm[item.prop]"
158 + v-for="op in item.options.data"
159 + :disabled="item.disable"
160 + :border="tempQueryForm[item.border]"
161 + :size="tempQueryForm[item.size]"
162 + :label="op[item.options.label] || op.label"
163 + :value="op[item.options.value] || op.value"
164 + :key="op[item.options.value] || op.value"
165 + ></el-radio>
166 + </template>
167 +
168 + <!-- 单选框 按钮样式 -->
169 + <el-radio-group
170 + v-if="item.type === 'radioButtom'"
171 + v-model.trim="tempQueryForm[item.prop]"
172 + :size="tempQueryForm[item.size]"
173 + :disabled="item.disable"
174 + >
175 + <el-radio-button
176 + v-for="op in item.options.data"
177 + :label="op[item.options.label] || op.label"
178 + :value="op[item.options.value] || op.value"
179 + :key="op[item.options.value] || op.value"
180 + ></el-radio-button>
181 + </el-radio-group>
182 +
183 + <!-- 文本框 -->
184 + <el-input
185 + v-if="item.type === 'textarea'"
186 + v-model.trim="tempQueryForm[item.prop]"
187 + type="textarea"
188 + :style="{ width: item.width }"
189 + :disabled="item.disable"
190 + :rows="item.row"
191 + :autosize="item.autosize"
192 + :placeholder="
193 + item.placeholder ? item.placeholder : '请输入' + item.label
194 + "
195 + clearable
196 + >
197 + </el-input>
198 + <!-- 多选框 -->
199 + <template v-if="item.type === 'Checkbox'">
200 + <el-checkbox
201 + v-model="tempQueryForm[item.prop]"
202 + :disabled="item.disabled"
203 + ></el-checkbox>
204 + </template>
205 + </el-form-item>
206 + <!-- 查询按钮 de-->
207 + <span v-show="inline & hiddenFormBtn">
208 + <el-form-item v-show="show">
209 + <el-button
210 + type="primary"
211 + @click="handleSearch('ruleForm')"
212 + :btnLoading="btnLoading"
213 + >
214 + {{ formBtn }}
215 + </el-button>
216 + </el-form-item>
217 + </span>
218 + <span v-show="inline & hiddenFormBtn">
219 + <el-form-item v-show="show">
220 + <el-button @click="resetFields('ruleForm')">重置</el-button>
221 + </el-form-item>
222 + </span>
223 + </el-form>
224 + </div>
225 +</template>
226 +
227 +<script>
228 +import request from "@/utils/request";
229 +import { deepClone } from "@/utils";
230 +export default {
231 + props: {
232 + marginBottom: {
233 + type: Number,
234 + default: 30,
235 + },
236 + view: {
237 + type: Boolean,
238 + default: false,
239 + },
240 + formBtn: {
241 + type: String,
242 + default: "查询",
243 + },
244 + btnLoading: {
245 + type: Boolean,
246 + default: false,
247 + },
248 + loading: {
249 + //加载
250 + type: Boolean,
251 + default: false,
252 + },
253 + isBtnSave: {
254 + type: Boolean,
255 + default: false,
256 + },
257 + // 由inline属性决定form表单是普通表单，还是行内表单
258 + inline: {
259 + //排列方式
260 + type: Boolean,
261 + default: true,
262 + },
263 + searchLoading: {
264 + type: Boolean,
265 + default: false,
266 + },
267 + hiddenFormBtn: {
268 + //是否展示搜索按钮
269 + type: Boolean,
270 + default: false,
271 + },
272 + labelWidth: {
273 + type: String,
274 + default: "120px",
275 + },
276 + formWidth: {
277 + //form表单宽度
278 + type: String,
279 + default: "200px",
280 + },
281 + formConfig: {
282 + type: Array,
283 + default: [],
284 + },
285 + queryForm: {
286 + type: Object,
287 + default: () => {},
288 + },
289 + // 用于控制该表单内组件的尺寸 medium / small / mini
290 + size: {
291 + type: String,
292 + default: "medium",
293 + },
294 + },
295 + data() {
296 + return {
297 + show: true,
298 + tempQueryForm: {},
299 + tempFormConfig: [],
300 + fetchResult: [],
301 + timeout: null,
302 + searchMark: {}, // 搜索
303 + };
304 + },
305 + mounted() {},
306 + computed: {},
307 + methods: {
308 + // input事件绑定和注册
309 + inputEvent(e, item) {
310 + this.$emit("input", this.tempQueryForm);
311 + },
312 + // 回车事件
313 + toEnterSearch() {
314 + this.$emit("keyup", this.tempQueryForm);
315 + },
316 + // selectSearch 聚焦获取当前input绑定的数据
317 + focusKey(item) {
318 + this.searchMark = item;
319 + },
320 + // selectSearch 下拉选中获取当前input绑定的数据
321 + selectSearch(item) {
322 + console.log(item);
323 + },
324 + // 远程搜索查询
325 + querySearchAsync(queryString, cb) {
326 + let result = this.formConfig.filter((item) => {
327 + if (item.hasOwnProperty("http")) {
328 + if (item.prop === this.searchMark.prop) {
329 + return item;
330 + }
331 + }
332 + });
333 + // 在搜索关键词不为空时发送http请求
334 + if (queryString) {
335 + if (queryString.split(" ").length > 0) {
336 + if (result[0].http.method == "post") {
337 + result[0].http.data[result[0].prop] = queryString.split(" ")[0];
338 + } else {
339 + result[0].http.params[result[0].prop] = queryString.split(" ")[0];
340 + }
341 + }
342 + request(result[0].http).then((res) => {
343 + if (res.code == 200) {
344 + if (res.data.list.length) {
345 + res.data.list.map((item) => {
346 + item.value = `${item[result[0].prop]} ${item[result[0].name]}`;
347 + });
348 + this.fetchResult = res.data.list;
349 + var results = queryString.split(" ")[0]
350 + ? this.fetchResult.filter(
351 + this.createStateFilter(queryString.split(" ")[0])
352 + )
353 + : this.fetchResult;
354 + clearTimeout(this.timeout);
355 + this.timeout = setTimeout(() => {
356 + cb(results);
357 + }, 1500 * Math.random());
358 + }
359 + }
360 + });
361 + }
362 + },
363 + // 远程搜索匹配查询
364 + createStateFilter(queryString) {
365 + return (state) => {
366 + return (
367 + state[this.searchMark.prop]
368 + .toLowerCase()
369 + .indexOf(queryString.toLowerCase()) === 0
370 + );
371 + };
372 + },
373 + // 行内表单搜索事件
374 + handleSearch(formName, cb) {
375 + this.$refs[formName].validate((valid) => {
376 + if (valid) {
377 + cb(valid);
378 + } else {
379 + console.log("error submit!!");
380 + return false;
381 + }
382 + });
383 + this.$emit("handleSearch");
384 + },
385 + // 清空ruleForm表单事件
386 + resetFields(formName = "ruleForm") {
387 + this.$refs[formName].resetFields();
388 + },
389 + },
390 + watch: {
391 + queryForm: {
392 + handler(val) {
393 + this.tempQueryForm = val;
394 + },
395 + deep: true,
396 + immediate: true,
397 + },
398 + formConfig: {
399 + handler(val) {
400 + this.tempFormConfig = deepClone(val);
401 + },
402 + deep: true,
403 + immediate: true,
404 + },
405 + },
406 +};
407 +</script>
408 +<style lang="scss" scoped>
409 +
410 +</style>
1 +<template>
2 + <el-input
3 + v-bind="$attrs"
4 + clearable
5 + @input="handleInput"
6 + @focus="handleFocus"
7 + @blur="handleBlur"
8 + @change="handleChange"
9 + class="yl-input"
10 + ></el-input>
11 +</template>
12 +
13 +<script>
14 +export default {
15 + props: {
16 + rules: {
17 + type: Array,
18 + default: () => [],
19 + },
20 + },
21 + data() {
22 + return {};
23 + },
24 + computed: {},
25 + created() {},
26 + mounted() {},
27 + methods: {
28 + handleInput(event) {
29 + // v-bind="$attrs" v-on="$listeners"
30 + this.$emit("input", event);
31 + },
32 + handleFocus(event) {
33 + this.$emit("focus", event);
34 + },
35 + handleBlur(event) {
36 + this.$emit("blur", event);
37 + },
38 + handleChange(event) {
39 + this.$emit("change", event);
40 + },
41 + },
42 +};
43 +</script>
44 +<style lang='scss'>
45 +
46 +</style>
1 +<script>
2 +/**
3 + * 动态渲染 el-table-column
4 + */
5 +export default {
6 + name: 'column',
7 + props: {
8 + attrs: {
9 + type: Object,
10 + default: () => ({}),
11 + required: true
12 + }
13 + },
14 + render: function(h) {
15 + let attrs = this.attrs;
16 + let scopedSlots = {};
17 + if (attrs.render) {
18 + scopedSlots.default = scope => attrs.render(h, scope);
19 + }
20 + return h('el-table-column', {
21 + attrs,
22 + scopedSlots
23 + });
24 + }
25 +};
26 +</script>
1 + <template>
2 + <div class="table-container">
3 + <el-row v-if="attrs.btnCofig.isBtn" style="margin-bottom: 15px">
4 + <el-col>
5 + <el-button
6 + v-for="item in attrs.btnCofig.btnGroup"
7 + :key="item.icon"
8 + :type="item.type"
9 + :icon="item.icon"
10 + :round="item.round"
11 + :size="item.size"
12 + :loading="item.loading"
13 + @click="handleClick(item)"
14 + >{{ item.btnName }}</el-button
15 + >
16 + </el-col>
17 + </el-row>
18 + <el-table
19 + :max-height="attrs.maxHeight"
20 + empty-text
21 + v-bind="attrs"
22 + v-loading="loadingTable"
23 + :data="tableData"
24 + @selection-change="selectionChange"
25 + ref="tableRef"
26 + row-key="id"
27 + :header-cell-class-name="headerCellClassName"
28 + >
29 + <template v-if="columns.length">
30 + <template v-for="(item, index) in columns">
31 + <column v-if="!item.hidden" :key="index" :attrs="item"></column>
32 + </template>
33 + </template>
34 + <slot name="column" v-else></slot>
35 + </el-table>
36 + <!-- 分页 -->
37 + <div
38 + v-if="pageConfig.isPagination"
39 + class="pagination-container"
40 + :style="{ textAlign: pageConfig.position || 'right' }"
41 + >
42 + <el-pagination
43 + background
44 + :hide-on-single-page="false"
45 + :current-page="pageConfig.pageData.page"
46 + :page-sizes="[10, 15, 20, 25, 30, 35, 40]"
47 + :page-size="pageConfig.pageData.size"
48 + layout="total,prev, pager, next, jumper, ->, sizes"
49 + :total="pageConfig.total"
50 + @size-change="handleSizeChange"
51 + @current-change="handleCurrentChange"
52 + >
53 + </el-pagination>
54 + </div>
55 + </div>
56 +</template>
57 +
58 +<script>
59 +import Sortable from "sortablejs";
60 +import { objectMerge, debounce } from "@/utils";
61 +import column from "./column";
62 +export default {
63 + props: {
64 + attrs: {
65 + type: Object,
66 + default: {
67 + border: true,
68 + isDragSort: false,
69 + btnCofig: {
70 + isBtn: true,
71 + btnGroup: [
72 + {
73 + type: "primary", // text、primary、danger
74 + icon: "el-icon-search", // el-icon-edit 、el-icon-delete、el-icon-plus、el-icon-download、el-icon-upload el-icon--right
75 + btnName: "搜索",
76 + size: "mini", // medium / small / mini
77 + round: false,
78 + loading: false,
79 + event: "searchBtn",
80 + },
81 + ],
82 + },
83 + },
84 + },
85 + loadingTable: {
86 + type: Boolean,
87 + default: false,
88 + },
89 + columns: {
90 + type: Array,
91 + default: () => [],
92 + },
93 + tableData: {
94 + type: Array,
95 + default: () => [],
96 + required: true,
97 + },
98 + pageConfig: {
99 + type: Object,
100 + default: {
101 + isPagination: true,
102 + },
103 + required: true,
104 + },
105 + },
106 + components: {
107 + column,
108 + },
109 + data() {
110 + return {
111 + dropCol: objectMerge({}, this.columns),
112 + trHeight: 4,
113 + };
114 + },
115 + computed: {
116 + _attrs() {
117 + //默认table 参数
118 + const defaultParams = {};
119 + return Object.assign(defaultParams, this.attrs);
120 + },
121 + isHasAttr() {},
122 + },
123 + created() {
124 + if (this.attrs.isDragSort) {
125 + // 有没有复选框、有没有render
126 + // this.columns
127 + }
128 + },
129 + mounted() {
130 + this.getTrCurrentHeight();
131 + window.addEventListener("resize", this.getTrCurrentHeight);
132 + //阻止火狐拖拽新建新页面
133 + document.body.addEventListener(
134 + "drop",
135 + (event) => {
136 + event.preventDefault();
137 + event.stopPropagation();
138 + },
139 + false
140 + );
141 + // 拖拽行更新排序
142 + // this.rowDrop();
143 + // 拖拽列更新排序
144 + this.columnDrop();
145 + },
146 + destroyed() {
147 + window.removeEventListener("resize", this.getTrCurrentHeight);
148 + },
149 +
150 + methods: {
151 + getTrCurrentHeight: debounce(function () {
152 + this.$nextTick(() => {
153 + const trEl =
154 + this.$refs.tableRef.$refs.bodyWrapper.children[0].children[1]
155 + .children[0].clientHeight;
156 + this.trHeight = trEl;
157 + // console.log(this);
158 + });
159 + }, 800),
160 +
161 + // 给表头列添加className
162 + headerCellClassName({ row, column, rowIndex, columnIndex }) {
163 + if (columnIndex !== 0) {
164 + return "el-table_1_column";
165 + }
166 + },
167 + useTableFunc(FuncName, ...params) {
168 + if (!this.$refs["el-table"]) {
169 + return console.warn("访问不到el-table");
170 + }
171 + if (!FuncName) {
172 + return console.error("请传入tabel方法名字");
173 + }
174 + this.$refs["el-table"][FuncName](params[0]);
175 + },
176 + // table复选框事件
177 + selectionChange(e) {
178 + console.log(e);
179 + this.$emit("selectionEvent", e);
180 + },
181 + // 条数变化
182 + handleSizeChange(e) {
183 + this.$emit("sizeChange", e);
184 + },
185 + // 页码变化
186 + handleCurrentChange(e) {
187 + this.$emit("currentChange", e);
188 + },
189 + // btn点击事件注册
190 + handleClick(item) {
191 + this.$emit(item.event, item);
192 + },
193 + // 拖拽行更新排序
194 + rowDrop() {
195 + const wrapperTr = document.querySelector(".el-table__header-wrapper tr");
196 + console.log("wrapperTr:", wrapperTr);
197 + this.sortable = Sortable.create(wrapperTr, {
198 + sort: this.attrs.isDragSort,
199 + animation: 100,
200 + delay: 0,
201 + handle: ".move", // 只有带move类名的元素才能拖动,多选框禁止拖动
202 + onEnd: (evt) => {
203 + // 因为手动加了一个多选框, 不在表头循环数组内, 所以这里减1
204 + let oldIndx = evt.oldIndex - 1;
205 + let newIndx = evt.newIndex - 1;
206 + const oldItem = this.dropCol[oldIndx];
207 + // 真正改变列数据--变化列头，就能实现列拖动 列数据按列头索引取值 {{ scope.row[dropCol[index].prop] }}
208 + this.dropCol.splice(oldIndx, 1); // 删除旧一行 删除为1
209 + this.dropCol.splice(newIndx, 0, oldItem); // 插入新一行 插入为0
210 + },
211 + });
212 + },
213 + // 拖拽列更新排序
214 + columnDrop() {
215 + const tbody = document.querySelector(".el-table__body-wrapper tbody");
216 + const _this = this;
217 + Sortable.create(tbody, {
218 + sort: this.attrs.isDragSort,
219 + animation: 100,
220 + delay: 0,
221 + onEnd({ newIndex, oldIndex }) {
222 + console.log("onEnd:", newIndex, oldIndex);
223 + const currRow = _this.tableData.splice(oldIndex, 1)[0];
224 + _this.tableData.splice(newIndex, 0, currRow);
225 + },
226 + });
227 + },
228 + },
229 + watch: {
230 + data() {
231 + this.$nextTick(() => {
232 + this.useTableFunc("doLayout");
233 + });
234 + },
235 + },
236 +};
237 +</script>
238 +<style lang="scss">
239 +
240 +</style>
...@@ -26,7 +26,7 @@ import Drag from "@/components/Drag" ...@@ -26,7 +26,7 @@ import Drag from "@/components/Drag"
26 import tableHeaders from '@/assets/languages/tableHeaders' 26 import tableHeaders from '@/assets/languages/tableHeaders'
27 import dictLabels from "@/assets/languages/dictLabels.js" 27 import dictLabels from "@/assets/languages/dictLabels.js"
28 import settings from './settings.js' 28 import settings from './settings.js'
29 - 29 +import * as filters from "./utils/filters.js";
30 // 全局方法挂载 30 // 全局方法挂载
31 Vue.prototype.parseTime = parseTime 31 Vue.prototype.parseTime = parseTime
32 Vue.prototype.resetForm = resetForm 32 Vue.prototype.resetForm = resetForm
...@@ -76,6 +76,10 @@ Vue.directive('focus', { ...@@ -76,6 +76,10 @@ Vue.directive('focus', {
76 } 76 }
77 }); 77 });
78 78
79 +// 全局注册过滤器
80 +Object.keys(filters).forEach((key) => {
81 + Vue.filter(key, filters[key]);
82 +});
79 83
80 /** 84 /**
81 * If you don't want to use mock-server 85 * If you don't want to use mock-server
......
...@@ -29,76 +29,97 @@ import ParentView from '@/components/ParentView'; ...@@ -29,76 +29,97 @@ import ParentView from '@/components/ParentView';
29 // 公共路由 29 // 公共路由
30 export const constantRoutes = [ 30 export const constantRoutes = [
31 { 31 {
32 - path: '/redirect', 32 + path: "/redirect",
33 component: Layout, 33 component: Layout,
34 hidden: true, 34 hidden: true,
35 children: [ 35 children: [
36 { 36 {
37 - path: '/redirect/:path(.*)', 37 + path: "/redirect/:path(.*)",
38 - component: (resolve) => require(['@/views/redirect'], resolve) 38 + component: (resolve) => require(["@/views/redirect"], resolve),
39 - } 39 + },
40 - ] 40 + ],
41 }, 41 },
42 { 42 {
43 - path: '/login', 43 + path: "/login",
44 - component: (resolve) => require(['@/views/login'], resolve), 44 + component: (resolve) => require(["@/views/login"], resolve),
45 - hidden: true 45 + hidden: true,
46 }, 46 },
47 { 47 {
48 - path: '/404', 48 + path: "/404",
49 - component: (resolve) => require(['@/views/error/404'], resolve), 49 + component: (resolve) => require(["@/views/error/404"], resolve),
50 - hidden: true 50 + hidden: true,
51 }, 51 },
52 { 52 {
53 - path: '/401', 53 + path: "/401",
54 - component: (resolve) => require(['@/views/error/401'], resolve), 54 + component: (resolve) => require(["@/views/error/401"], resolve),
55 - hidden: true 55 + hidden: true,
56 }, 56 },
57 { 57 {
58 - path: '', 58 + path: "",
59 component: Layout, 59 component: Layout,
60 - redirect: 'index', 60 + redirect: "index",
61 children: [ 61 children: [
62 { 62 {
63 - path: 'index', 63 + path: "index",
64 - component: (resolve) => require(['@/views/index'], resolve), 64 + component: (resolve) => require(["@/views/index"], resolve),
65 - name: 'Index', 65 + name: "Index",
66 - meta: { title: '首页', icon: 'home', noCache: true, affix: true } 66 + meta: { title: "首页", icon: "home", noCache: true, affix: true },
67 }, 67 },
68 - ] 68 + ],
69 }, 69 },
70 { 70 {
71 - path: '', 71 + path: "",
72 component: Layout, 72 component: Layout,
73 hidden: true, 73 hidden: true,
74 children: [ 74 children: [
75 { 75 {
76 - path: '/info/:handle/id=:id;routeStatus=:routeStatus;fltNo=:fltNo;route=:route;fltDate=:fltDate;status=:status', 76 + path: "/et86",
77 - component: (resolve) => require(['@/views/allocationConfig/flightAllocConfig/info'], resolve), 77 + component: (resolve) =>
78 - name: 'FlightAllocConfigInfo', 78 + require(["@/views/allocationConfig/et86"], resolve),
79 - meta: { title: '航班配舱', icon: 'user' } 79 + name: "et86",
80 + meta: { title: "ET86", icon: "user" },
81 + children: [],
82 + },
83 + {
84 + path: "/et86/:edit",
85 + component: (resolve) =>
86 + require(["@/views/allocationConfig/et86/edit"], resolve),
87 + name: "edit",
88 + meta: { title: "编辑", icon: "user" },
89 + },
90 + {
91 + path: "/info/:handle/id=:id;routeStatus=:routeStatus;fltNo=:fltNo;route=:route;fltDate=:fltDate;status=:status",
92 + component: (resolve) =>
93 + require(["@/views/allocationConfig/flightAllocConfig/info"], resolve),
94 + name: "FlightAllocConfigInfo",
95 + meta: { title: "航班配舱", icon: "user" },
80 }, 96 },
81 { 97 {
82 - path: '/weatherTable/:awbNbr', 98 + path: "/weatherTable/:awbNbr",
83 - component: (resolve) => require(['@/views/systemLog/dmLog/weatherTable'], resolve), 99 + component: (resolve) =>
84 - name: 'weatherTable', 100 + require(["@/views/systemLog/dmLog/weatherTable"], resolve),
85 - meta: { title: '流水表', icon: 'user' } 101 + name: "weatherTable",
102 + meta: { title: "流水表", icon: "user" },
86 }, 103 },
87 { 104 {
88 - path: '/upDateResult', 105 + path: "/upDateResult",
89 - component: (resolve) => require(['@/views/preMdeConfig/upDateResult'], resolve), 106 + component: (resolve) =>
90 - name: 'UpDateResult', 107 + require(["@/views/preMdeConfig/upDateResult"], resolve),
91 - meta: { title: '错误信息提示', icon: 'user' } 108 + name: "UpDateResult",
109 + meta: { title: "错误信息提示", icon: "user" },
92 }, 110 },
93 { 111 {
94 - path: '/goodsLog/type=:type', 112 + path: "/goodsLog/type=:type",
95 - component: (resolve) => require(['@/views/basicInformation/goodsStation/goodsUploadLog'], resolve), 113 + component: (resolve) =>
96 - name: 'GoodsUploadLog', 114 + require([
97 - meta: { title: '导入日志', icon: 'user' } 115 + "@/views/basicInformation/goodsStation/goodsUploadLog",
116 + ], resolve),
117 + name: "GoodsUploadLog",
118 + meta: { title: "导入日志", icon: "user" },
98 }, 119 },
99 - ] 120 + ],
100 }, 121 },
101 -] 122 +];
102 123
103 export default new Router({ 124 export default new Router({
104 mode: 'history', // 去掉url中的# 125 mode: 'history', // 去掉url中的#
......
1 -import { constantRoutes } from '@/router' 1 +import { constantRoutes } from "@/router";
2 -import { getRouters } from '@/api/menu' 2 +import { getRouters } from "@/api/menu";
3 -import Layout from '@/layout/index' 3 +import Layout from "@/layout/index";
4 -import ParentView from '@/components/ParentView'; 4 +import ParentView from "@/components/ParentView";
5 -import hasPermi from '../../directive/permission/hasPermi'; 5 +import hasPermi from "../../directive/permission/hasPermi";
6 const permission = { 6 const permission = {
7 state: { 7 state: {
8 routes: [], 8 routes: [],
...@@ -10,110 +10,133 @@ const permission = { ...@@ -10,110 +10,133 @@ const permission = {
10 defaultRoutes: [], 10 defaultRoutes: [],
11 topbarRouters: [], 11 topbarRouters: [],
12 sidebarRouters: [], 12 sidebarRouters: [],
13 - filghtAllData: {} 13 + filghtAllData: {},
14 }, 14 },
15 mutations: { 15 mutations: {
16 SET_ROUTES: (state, routes) => { 16 SET_ROUTES: (state, routes) => {
17 - state.addRoutes = routes 17 + state.addRoutes = routes;
18 - state.routes = constantRoutes.concat(routes) 18 + state.routes = constantRoutes.concat(routes);
19 }, 19 },
20 SET_DEFAULT_ROUTES: (state, routes) => { 20 SET_DEFAULT_ROUTES: (state, routes) => {
21 - state.defaultRoutes = constantRoutes.concat(routes) 21 + state.defaultRoutes = constantRoutes.concat(routes);
22 }, 22 },
23 SET_TOPBAR_ROUTES: (state, routes) => { 23 SET_TOPBAR_ROUTES: (state, routes) => {
24 // 顶部导航菜单默认添加统计报表栏指向首页 24 // 顶部导航菜单默认添加统计报表栏指向首页
25 - const index = [{ 25 + const index = [
26 - path: 'index', 26 + {
27 - meta: { title: '首页', icon: 'home' } 27 + path: "index",
28 - }] 28 + meta: { title: "首页", icon: "home" },
29 + },
30 + ];
29 state.topbarRouters = routes.concat(index); 31 state.topbarRouters = routes.concat(index);
30 }, 32 },
31 SET_SIDEBAR_ROUTERS: (state, routes) => { 33 SET_SIDEBAR_ROUTERS: (state, routes) => {
32 - state.sidebarRouters = routes 34 + state.sidebarRouters = routes;
33 }, 35 },
34 SET_FILGHTALL: (state, data) => { 36 SET_FILGHTALL: (state, data) => {
35 let name = data.name; 37 let name = data.name;
36 state.filghtAllData[name] = data.data; 38 state.filghtAllData[name] = data.data;
37 }, 39 },
38 REMOVE_FILGHTALL: (state, name) => { 40 REMOVE_FILGHTALL: (state, name) => {
39 - delete state.filghtAllData[name] 41 + delete state.filghtAllData[name];
40 - } 42 + },
41 }, 43 },
42 actions: { 44 actions: {
43 // 生成路由 45 // 生成路由
44 GenerateRoutes({ commit }) { 46 GenerateRoutes({ commit }) {
45 - return new Promise(resolve => { 47 + return new Promise((resolve) => {
46 // 向后端请求路由数据 48 // 向后端请求路由数据
47 - getRouters().then(res => { 49 + getRouters().then((res) => {
50 + const newUrl = {
51 + id: 24,
52 + name: "et86",
53 + path: "/et86",
54 + hidden: false,
55 + component: "allocationConfig/et86",
56 + meta: {
57 + title: "ET86",
58 + icon: "edit",
59 + permissions: "allocation:rand:list",
60 + noCache: false,
61 + },
62 + alwaysShow: false,
63 + children: null,
64 + };
65 + res.data.map((item) => {
66 + if (item.name == "AllocationConfig") {
67 + item.children.push(newUrl);
68 + }
69 + });
48 res.data = hasPermi.routerPer(res.data); 70 res.data = hasPermi.routerPer(res.data);
49 - const sdata = JSON.parse(JSON.stringify(res.data)) 71 + const sdata = JSON.parse(JSON.stringify(res.data));
50 - const rdata = JSON.parse(JSON.stringify(res.data)) 72 + const rdata = JSON.parse(JSON.stringify(res.data));
51 - const sidebarRoutes = filterAsyncRouter(sdata) 73 + const sidebarRoutes = filterAsyncRouter(sdata);
52 - const rewriteRoutes = filterAsyncRouter(rdata, false, true) 74 + const rewriteRoutes = filterAsyncRouter(rdata, false, true);
53 - rewriteRoutes.push({ path: '*', redirect: '/404', hidden: true }) 75 + rewriteRoutes.push({ path: "*", redirect: "/404", hidden: true });
54 - commit('SET_ROUTES', rewriteRoutes) 76 + commit("SET_ROUTES", rewriteRoutes);
55 - commit('SET_SIDEBAR_ROUTERS', constantRoutes.concat(sidebarRoutes)) 77 + commit("SET_SIDEBAR_ROUTERS", constantRoutes.concat(sidebarRoutes));
56 - commit('SET_DEFAULT_ROUTES', sidebarRoutes) 78 + commit("SET_DEFAULT_ROUTES", sidebarRoutes);
57 - commit('SET_TOPBAR_ROUTES', sidebarRoutes) 79 + commit("SET_TOPBAR_ROUTES", sidebarRoutes);
58 - resolve(rewriteRoutes) 80 + resolve(rewriteRoutes);
59 - }) 81 + });
60 - }) 82 + });
61 - } 83 + },
62 - } 84 + },
63 -} 85 +};
64 86
65 // 遍历后台传来的路由字符串，转换为组件对象 87 // 遍历后台传来的路由字符串，转换为组件对象
66 function filterAsyncRouter(asyncRouterMap, lastRouter = false, type = false) { 88 function filterAsyncRouter(asyncRouterMap, lastRouter = false, type = false) {
67 - return asyncRouterMap.filter(route => { 89 + return asyncRouterMap.filter((route) => {
68 if (type && route.children) { 90 if (type && route.children) {
69 - route.children = filterChildren(route.children) 91 + route.children = filterChildren(route.children);
70 } 92 }
71 if (route.component) { 93 if (route.component) {
72 // Layout ParentView 组件特殊处理 94 // Layout ParentView 组件特殊处理
73 - if (route.component === 'Layout') { 95 + if (route.component === "Layout") {
74 - route.component = Layout 96 + route.component = Layout;
75 - } else if (route.component === 'ParentView') { 97 + } else if (route.component === "ParentView") {
76 - route.component = ParentView 98 + route.component = ParentView;
77 } else { 99 } else {
78 - route.component = loadView(route.component) 100 + route.component = loadView(route.component);
79 } 101 }
80 } 102 }
81 if (route.children != null && route.children && route.children.length) { 103 if (route.children != null && route.children && route.children.length) {
82 - route.children = filterAsyncRouter(route.children, route, type) 104 + route.children = filterAsyncRouter(route.children, route, type);
83 } else { 105 } else {
84 - delete route['children'] 106 + delete route["children"];
85 - delete route['redirect'] 107 + delete route["redirect"];
86 } 108 }
87 - return true 109 + return true;
88 - }) 110 + });
89 } 111 }
90 112
91 function filterChildren(childrenMap, lastRouter = false) { 113 function filterChildren(childrenMap, lastRouter = false) {
92 - var children = [] 114 + var children = [];
93 childrenMap.forEach((el, index) => { 115 childrenMap.forEach((el, index) => {
94 if (el.children && el.children.length) { 116 if (el.children && el.children.length) {
95 - if (el.component === 'ParentView') { 117 + if (el.component === "ParentView") {
96 - el.children.forEach(c => { 118 + el.children.forEach((c) => {
97 - c.path = el.path + '/' + c.path 119 + c.path = el.path + "/" + c.path;
98 if (c.children && c.children.length) { 120 if (c.children && c.children.length) {
99 - children = children.concat(filterChildren(c.children, c)) 121 + children = children.concat(filterChildren(c.children, c));
100 - return 122 + return;
101 } 123 }
102 - children.push(c) 124 + children.push(c);
103 - }) 125 + });
104 - return 126 + return;
105 } 127 }
106 } 128 }
107 if (lastRouter) { 129 if (lastRouter) {
108 - el.path = lastRouter.path + '/' + el.path 130 + el.path = lastRouter.path + "/" + el.path;
109 } 131 }
110 - children = children.concat(el) 132 + children = children.concat(el);
111 - }) 133 + });
112 - return children 134 + return children;
113 } 135 }
114 136
115 -export const loadView = (view) => { // 路由懒加载 137 +export const loadView = (view) => {
116 - return (resolve) => require([`@/views/${view}`], resolve) 138 + // 路由懒加载
117 -} 139 + return (resolve) => require([`@/views/${view}`], resolve);
140 +};
118 141
119 -export default permission 142 +export default permission;
......
1 +// 是否
2 +export function isSure(type) {
3 + if (type === 0 || type === "0" || type === false) {
4 + return "否";
5 + } else if (type === 1 || type === "1" || type === true) {
6 + return "是";
7 + }
8 +}
9 +
10 +// 布尔值转换
11 +export function returnBoolean(type) {
12 + if (type === 0 || type === "0") {
13 + return false;
14 + } else if (type === 1 || type === "1") {
15 + return true;
16 + }
17 +}
18 +
19 +export default {
20 + isSure,
21 + returnBoolean,
22 +};
23 +
1 +<template>
2 + <div class=''></div>
3 + </template>
4 +
5 + <script>
6 +
7 + export default {
8 + name: '',
9 + components: {},
10 + data() {
11 +
12 + return {
13 +
14 + }
15 + },
16 +
17 + computed: {},
18 + created () {},
19 + mounted () {},
20 + methods: {}
21 + }
22 + </script>
23 + <style lang='scss' scoped>
24 +
25 + </style>
1 +<template>
2 + <div class=''></div>
3 + </template>
4 +
5 + <script>
6 +
7 + export default {
8 + name: '',
9 + components: {},
10 + data() {
11 +
12 + return {
13 +
14 + }
15 + },
16 +
17 + computed: {},
18 + created () {},
19 + mounted () {},
20 + methods: {}
21 + }
22 + </script>
23 + <style lang='scss' scoped>
24 +
25 + </style>
1 +export const formConfig = [
2 + {
3 + label: "重量(KG)",
4 + type: "Input",
5 + name: "minWeight",
6 + prop: "minWeight",
7 + placeholder: "0",
8 + rules: {
9 + required: true,
10 + message: "最大重量不得小于0KG",
11 + trigger: ["change", "blur"],
12 + },
13 + trigger: "blur", // 事件名
14 + },
15 + {
16 + label: "",
17 + type: "Input",
18 + name: "maxWeight",
19 + prop: "maxWeight",
20 + placeholder: "34",
21 + rules: {
22 + required: true,
23 + message: "最大重量不得大于34KG",
24 + trigger: ["change", "blur"],
25 + },
26 + trigger: "blur", // 事件名
27 + },
28 + {
29 + label: "件数",
30 + type: "Input",
31 + name: "minNumOfPieces",
32 + prop: "minNumOfPieces",
33 + placeholder: "0",
34 + rules: {
35 + required: true,
36 + message: "最大重量不得小于0KG",
37 + trigger: ["change", "blur"],
38 + },
39 + trigger: "blur", // 事件名
40 + },
41 + {
42 + label: "",
43 + type: "Input",
44 + name: "maxNumOfPieces",
45 + prop: "maxNumOfPieces",
46 + placeholder: "34",
47 + rules: {
48 + required: true,
49 + message: "最大重量不得大于34KG",
50 + trigger: ["change", "blur"],
51 + },
52 + trigger: "blur", // 事件名
53 + },
54 +];
1 +<template>
2 + <div class="form-header demo-edit">
3 + <el-row :gutter="24" justify="center">
4 + <el-col :span="18">
5 + <yl-table
6 + :attrs="tableAttr"
7 + :loadingTable="tableAttr.loadingTable"
8 + :tableData="tableData"
9 + :pageConfig="pageConfig"
10 + @search="searchBtn"
11 + @add="addBtn"
12 + @delete="deleBtn"
13 + >
14 + <template #column>
15 + <el-table-column
16 + label="航班号"
17 + prop="fltNo"
18 + min-width="100"
19 + align="center"
20 + >
21 + <template slot-scope="scope">
22 + <el-input
23 + v-model="scope.row.fltNo"
24 + clearable
25 + :readonly="scope.row.edit | isEdit"
26 + @focus="inputFocus(scope)"
27 + @input="inputEvent"
28 + placeholder="请输入航班号"
29 + />
30 + </template>
31 + </el-table-column>
32 + <el-table-column
33 + label="航班日期"
34 + prop="fltNoDate"
35 + width="100"
36 + align="center"
37 + >
38 + <template slot-scope="scope">
39 + <el-input
40 + type="number"
41 + v-model="scope.row.fltNoDate"
42 + :readonly="scope.row.edit | isEdit"
43 + :disabled="scope.row.edit | isEdit"
44 + min="-7"
45 + max="7"
46 + v-on:keyup.enter="value = value.replace(/^-?[0-9]\d*$/, '')"
47 + clearable
48 + placeholder=""
49 + />
50 + </template>
51 + </el-table-column>
52 + <el-table-column
53 + label="航线优先级"
54 + prop="fltRoute"
55 + min-width="100"
56 + align="center"
57 + >
58 + <template slot-scope="scope">
59 + <el-popover
60 + placement="top-start"
61 + :title="`${scope.row.fltNo} 航线`"
62 + width="200"
63 + trigger="hover"
64 + :content="scope.row.fltRoute"
65 + :disabled="scope.row.fltRoute | fltRoute"
66 + >
67 + <el-input
68 + slot="reference"
69 + v-model="scope.row.fltRoute"
70 + :readonly="scope.row.edit | isEdit"
71 + placeholder="请选择航线优先级"
72 + />
73 + </el-popover>
74 + </template>
75 + </el-table-column>
76 + <el-table-column
77 + label="爆仓是否继续配舱"
78 + prop="isOn"
79 + min-width="100"
80 + align="center"
81 + >
82 + <template slot-scope="scope">
83 + <el-checkbox
84 + v-model="scope.row.isOn"
85 + :disabled="scope.row.edit | isEdit"
86 + ></el-checkbox>
87 + </template>
88 + </el-table-column>
89 + <el-table-column label="操作" min-width="100" align="center">
90 + <template slot-scope="scope">
91 + <el-button
92 + size="mini"
93 + type="danger"
94 + :disabled="scope.row.edit"
95 + @click="deleBtn(scope.row, scope.$index)"
96 + >删除</el-button
97 + >
98 + </template>
99 + </el-table-column>
100 + </template>
101 + </yl-table>
102 + </el-col>
103 + </el-row>
104 + <el-row style="padding: 20px 0">
105 + <el-col>
106 + <el-divider content-position="left">航线维度设置</el-divider>
107 + </el-col>
108 + </el-row>
109 + <el-card shadow="always" class="box-card">
110 + <el-form
111 + :model="queryForm"
112 + label-position="right"
113 + label-width="120px"
114 + ref="ruleForm"
115 + class="config-form"
116 + >
117 + <el-row class="rowPadding">
118 + <el-col :span="24">
119 + <el-form-item label="服务类型">
120 + <!-- <div class="label-title label-service-type">服务类型</div> -->
121 + <el-col :span="4">
122 + <el-radio-group
123 + v-model="queryForm.isServiceCode"
124 + @change="isServiceCode"
125 + >
126 + <el-radio label="1">包含ServiceCode</el-radio>
127 + <el-radio label="2">不包含ServiceCode</el-radio>
128 + </el-radio-group>
129 + </el-col>
130 + <el-col :span="10" :offset="1">
131 + <el-input
132 + type="textarea"
133 + v-model="queryForm.serviceCode"
134 + size="medium"
135 + maxlength="1000"
136 + show-word-limit
137 + :rows="4"
138 + placeholder="请输入ServiceCode"
139 + @blur="serviceCodeBlur"
140 + ></el-input>
141 + </el-col>
142 + </el-form-item>
143 + </el-col>
144 +
145 + <el-col :span="24">
146 + <el-col :span="9">
147 + <el-form-item label="重量(KG)">
148 + <el-col :span="10">
149 + <el-input
150 + v-model.trim="queryForm.minWeight"
151 + clearable
152 + placeholder="请输入最小重量"
153 + @blur="inputBlur('minWeight')"
154 + ></el-input>
155 + <span ref="minWeight" class="el-form-item__error"></span>
156 + </el-col>
157 + <el-col style="text-align: center" :span="1">-</el-col>
158 + <el-col :span="10">
159 + <el-input
160 + v-model.trim="queryForm.maxWeight"
161 + clearable
162 + placeholder="请输入最大重量"
163 + @blur="inputBlur('maxWeight')"
164 + ></el-input>
165 + <span ref="maxWeight" class="el-form-item__error"></span>
166 + </el-col>
167 + </el-form-item>
168 + </el-col>
169 +
170 + <el-col :span="9">
171 + <el-form-item label="件数">
172 + <el-col :span="10">
173 + <el-input
174 + v-model.trim="queryForm.minNumOfPieces"
175 + clearable
176 + placeholder="请输入最少件数"
177 + @blur="inputBlur('minNumOfPieces')"
178 + ></el-input>
179 + <span ref="minNumOfPieces" class="el-form-item__error"></span>
180 + </el-col>
181 + <el-col style="text-align: center" :span="1">-</el-col>
182 + <el-col :span="10">
183 + <el-input
184 + v-model.trim="queryForm.maxNumOfPieces"
185 + clearable
186 + placeholder="请输入最多件数"
187 + @blur="inputBlur('maxNumOfPieces')"
188 + ></el-input>
189 + <span ref="maxNumOfPieces" class="el-form-item__error"></span>
190 + </el-col>
191 + </el-form-item>
192 + </el-col>
193 + </el-col>
194 + <el-col :span="24">
195 + <el-form-item label="单品名">
196 + <el-checkbox v-model="queryForm.singleName"></el-checkbox>
197 + </el-form-item>
198 + </el-col>
199 +
200 + <el-col :span="24">
201 + <el-col :span="12">
202 + <el-form-item label="包含URSA">
203 + <el-input
204 + type="textarea"
205 + v-model="queryForm.includeUrsa"
206 + size="medium"
207 + maxlength="1000"
208 + show-word-limit
209 + :rows="4"
210 + placeholder="URSA之间用分号分隔，例：F2;F3;P_"
211 + ></el-input>
212 + </el-form-item>
213 + </el-col>
214 + <el-col :span="12">
215 + <el-form-item label="包含URSA">
216 + <el-input
217 + type="textarea"
218 + v-model="queryForm.notIncludeUrsa"
219 + size="medium"
220 + maxlength="1000"
221 + show-word-limit
222 + :rows="4"
223 + placeholder="URSA之间用分号分隔，例：F2;F3;P_"
224 + ></el-input>
225 + </el-form-item>
226 + </el-col>
227 + </el-col>
228 +
229 + <el-col :span="24">
230 + <el-form-item label="原航班号">
231 + <el-input
232 + type="textarea"
233 + v-model="queryForm.fltNo"
234 + size="medium"
235 + maxlength="1000"
236 + show-word-limit
237 + :rows="4"
238 + placeholder="请输入原航班号"
239 + ></el-input>
240 + </el-form-item>
241 + </el-col>
242 +
243 + <el-col :span="24">
244 + <el-form-item label="类别Class">
245 + <el-card shadow="never" style="width: 95%">
246 + <el-checkbox-group
247 + v-model="queryForm.checkboxClsssType"
248 + @change="checkboxSingleName"
249 + style="display: flex"
250 + v-if="queryForm.cargoType.length"
251 + >
252 + <el-checkbox
253 + v-for="item in queryForm.cargoType"
254 + :label="item.chineseName"
255 + :name="item.chineseName"
256 + :key="item.code"
257 + >
258 + <Tooltips :content="item.chineseName" :refName="item.code">
259 + </Tooltips>
260 + </el-checkbox>
261 + </el-checkbox-group>
262 + </el-card>
263 + </el-form-item>
264 + </el-col>
265 + <el-col :span="24">
266 + <el-form-item label="申报价值">
267 + <el-col :span="4">
268 + <el-select
269 + v-model="queryForm.customVal"
270 + @change="selectChange"
271 + placeholder="请选择"
272 + >
273 + <el-option
274 + v-for="item in queryForm.customValOptions"
275 + :key="item.value"
276 + :label="item.label"
277 + :value="item.value"
278 + >
279 + </el-option>
280 + </el-select>
281 + </el-col>
282 + <el-col :span="4" :offset="1">
283 + <el-input
284 + v-model.trim="queryForm.minCustomVal"
285 + clearable
286 + placeholder="请输入最小申报价值"
287 + @blur="inputBlur('minCustomVal')"
288 + ></el-input>
289 + <span ref="minCustomVal" class="el-form-item__error"></span>
290 + </el-col>
291 + <el-col style="text-align: center" :span="1">-</el-col>
292 + <el-col :span="4">
293 + <el-input
294 + v-model.trim="queryForm.maxCustomVal"
295 + clearable
296 + placeholder="请输入最大申报价值"
297 + @blur="inputBlur('maxCustomVal')"
298 + ></el-input>
299 + <span ref="maxCustomVal" class="el-form-item__error"></span>
300 + </el-col>
301 + </el-form-item>
302 + </el-col>
303 + <el-col :span="24">
304 + <el-form-item label="">
305 + <el-button type="primary" @click="submitForm('ruleForm')"
306 + >保存</el-button
307 + >
308 + </el-form-item>
309 + </el-col>
310 + </el-row>
311 + </el-form>
312 + </el-card>
313 + </div>
314 +</template>
315 +
316 +<script>
317 +import YlForm from "@/components/YlForm";
318 +// import YlInput from "@/components/YlInput";
319 +import YlTable from "@/components/YlTable";
320 +import { formConfig } from "./formConfig";
321 +import { debounce } from "@/utils";
322 +import { tableAttr, columnHeader, tableData } from "./tableConfig";
323 +import {
324 + allDictData, // 获取全部字典
325 + queryRouteByFltNo, // 航线查询
326 + findDestinationFltRuleByFlightNo, // 获取航班下航线维度
327 +} from "@/api/destinationFlight";
328 +import { validateRules } from "./mixins";
329 +export default {
330 + name: "edit",
331 + components: {
332 + YlForm,
333 + YlTable,
334 + // YlInput,
335 + },
336 + mixins: [validateRules],
337 + data() {
338 + return {
339 + test: "测试",
340 + formConfig: formConfig, // 表单配置项
341 + queryForm: {
342 + // 表单参数
343 + minWeight: null,
344 + maxWeight: null,
345 + minNumOfPieces: null,
346 + maxNumOfPieces: null,
347 + isServiceCode: "1",
348 + serviceCode: "",
349 + serviceCodeData: [],
350 + singleName: false,
351 + includeUrsa: "",
352 + notIncludeUrsa: "",
353 + fltNo: "",
354 + checkboxClsssType: [],
355 + cargoType: [],
356 + cargoStatus: [],
357 + puporpux: [],
358 + handlingCode: [],
359 + subCategory: [],
360 + customVal: "人民币",
361 + minCustomVal: "",
362 + maxCustomVal: "",
363 + customValOptions: [
364 + {
365 + value: "USD",
366 + label: "美元",
367 + },
368 + {
369 + value: "CNY",
370 + label: "人民币",
371 + },
372 + ],
373 + },
374 + pageConfig: {
375 + // 分页配置项
376 + isPagination: false,
377 + },
378 + tableAttr: tableAttr, // table配置项
379 + tableData: [],
380 + currentIndex: 0, // 记录当前table 列的索引位置
381 + };
382 + },
383 +
384 + computed: {},
385 + created() {
386 + this.getAllDictData();
387 + this.getEdit();
388 + this.PostFindDestinationFltRuleByFlightNo();
389 + /*
390 + 件数：正整数大于0 且小于1000
391 + 重量：正数保留3位小数
392 + 申报价值: 正数保留2位小数
393 + 航班号: 不能输入纯数字或者纯字母，以字母或者数字开头，不能有空格符或者特殊符号
394 + URSA: 不能输入纯数字或者纯字母，以字母或开头，不能有空格符指定特殊符号
395 + ^(([1-9]\d+)|([2-9]))$
396 + */
397 + },
398 + mounted() {
399 + console.log(this.$refs.ruleForm);
400 + },
401 + filters: {
402 + isEdit: function (value) {
403 + switch (value) {
404 + case "新增":
405 + false;
406 + break;
407 + case "编辑":
408 + true;
409 + break;
410 + default:
411 + "新增";
412 + }
413 + },
414 + // 航线个数
415 + fltRoute(val) {
416 + if (val.length && val.split(",").length > 2) {
417 + return false;
418 + } else {
419 + return true;
420 + }
421 + },
422 + },
423 + directives: {
424 + focus: {
425 + // 绑定判断
426 + inserted: function (el, binding, vnode) {
427 + console.log(el.children[0].value);
428 + console.log(binding);
429 + console.log(vnode);
430 + },
431 + },
432 + },
433 + methods: {
434 + // input失焦事件
435 + inputBlur(name) {
436 + if (name == "minWeight") {
437 + this.validateMaxWeight("maxWeight");
438 + this.validateMinWeight(name);
439 + }
440 + if (name == "maxWeight") {
441 + this.validateMinWeight("minWeight");
442 + this.validateMaxWeight(name);
443 + }
444 + if (name == "minNumOfPieces") {
445 + this.validateMaxPieces("maxNumOfPieces");
446 + this.validateMinPieces(name);
447 + }
448 + if (name == "maxNumOfPieces") {
449 + this.validateMinPieces("minNumOfPieces");
450 + this.validateMaxPieces(name);
451 + }
452 + if (name == "minCustomVal") {
453 + this.validateMaxCustomVal("maxCustomVal");
454 + this.validateMinCustomVal(name);
455 + }
456 + if (name == "maxCustomVal") {
457 + this.validateMinCustomVal("minCustomVal");
458 + this.validateMaxCustomVal(name);
459 + }
460 + },
461 + // 获取编辑详情数据
462 + getEdit() {
463 + tableData.map((item) => {
464 + if (item.isOn == "0") {
465 + item.isOn = false;
466 + } else {
467 + item.isOn = true;
468 + }
469 + });
470 + this.tableData = tableData;
471 + },
472 + // 获取字典
473 + getObj({ serviceCode }) {
474 + let service_Code = [];
475 + serviceCode.map((item) => {
476 + service_Code.push(item.chineseName);
477 + });
478 + this.serviceCodeData = service_Code;
479 + },
480 + // 处理serviceCode包不包含
481 + serviceCodeCofig() {
482 + let str = this.queryForm.serviceCode.replace(/;|；/g, ",");
483 + let arr = str.split(",");
484 + if (arr[arr.length - 1] == "") {
485 + arr.splice(arr.length - 1, 1);
486 + }
487 + let noHasCode = this.serviceCodeData.filter(
488 + (v) => !arr.some((val) => val == v)
489 + );
490 + let hasCode = this.serviceCodeData.filter((v) =>
491 + arr.some((val) => val == v)
492 + );
493 + let includeCode = arr.filter((v) => !hasCode.some((val) => val == v));
494 + return {
495 + include: hasCode,
496 + noInclude: includeCode,
497 + };
498 + },
499 + // radio包含不包含serviceCode
500 + isServiceCode(val) {
501 + // 包含
502 + // 勾选的时候去校验 || 输入的时候去校验
503 + if (val == 1) {
504 + if (this.serviceCodeCofig().noInclude.length) {
505 + let tip = this.serviceCodeCofig().noInclude.toString();
506 + this.msgError(`${tip} 不包含`);
507 + }
508 + } else {
509 + if (this.serviceCodeCofig().include.length) {
510 + let tip = this.serviceCodeCofig().include.toString();
511 + this.msgError(`${tip} 已包含`);
512 + }
513 + }
514 + },
515 + // serviceCode失焦事件
516 + serviceCodeBlur() {
517 + if (this.queryForm.isServiceCode == "1") {
518 + if (this.serviceCodeCofig().noInclude.length) {
519 + let tip = this.serviceCodeCofig().noInclude.toString();
520 + this.msgError(`${tip} 不包含`);
521 + }
522 + } else {
523 + if (this.serviceCodeCofig().include.length) {
524 + let tip = this.serviceCodeCofig().include.toString();
525 + this.msgError(`${tip} 已包含`);
526 + }
527 + }
528 + },
529 + // 表单提交
530 + submitForm(formName) {
531 + this.$refs[formName].validate((valid) => {
532 + if (valid) {
533 + alert("submit!");
534 + } else {
535 + console.log("error submit!!");
536 + return false;
537 + }
538 + });
539 + },
540 + resetForm(formName) {
541 + this.$refs[formName].resetFields();
542 + },
543 + // 获取所有数据字典
544 + getAllDictData() {
545 + allDictData().then((res) => {
546 + if (res.code != 200) {
547 + this.msgError(res.msg);
548 + return;
549 + }
550 + this.queryForm.cargoType = res.data.cargoType; //
551 + this.queryForm.cargoStatus = res.data.cargoStatus; //
552 + if (res.data.serviceCode.length) {
553 + this.getObj(res.data);
554 + }
555 + });
556 + },
557 + // 航线查询
558 + getQueryRouteByFltNo(item) {
559 + queryRouteByFltNo(item).then((res) => {
560 + if (res.code == 200) {
561 + const list = res.data.list;
562 + let routeList = "";
563 + if (list.length) {
564 + list.map((item) => {
565 + routeList += item.route + ",";
566 + });
567 + this.tableData[this.currentIndex].fltRoute = routeList.substring(
568 + 0,
569 + routeList.length - 1
570 + );
571 + this.queryForm.fltRoute = routeList.substring(
572 + 0,
573 + routeList.length - 1
574 + );
575 + } else {
576 + this.queryForm = {
577 + fltNo: item.fltNo, // 航班号
578 + fltRoute: "", // 航线
579 + };
580 + }
581 + }
582 + });
583 + },
584 + // 获取航班下航线维度
585 + PostFindDestinationFltRuleByFlightNo() {
586 + let params = {};
587 + findDestinationFltRuleByFlightNo(params).then((res) => {
588 + console.log(res);
589 + });
590 + },
591 + // input 聚焦事件
592 + inputFocus(scope) {
593 + this.currentIndex = scope.$index;
594 + },
595 + // input事件
596 + inputEvent: debounce(function () {
597 + let params = {
598 + fltNo: this.tableData[this.currentIndex].fltNo,
599 + };
600 + if (params.fltNo) {
601 + this.getQueryRouteByFltNo(params);
602 + } else {
603 + this.msgError("请输入航班号");
604 + }
605 + console.log(this.tableData[this.currentIndex]);
606 + }, 800),
607 + // 申报价值selectChange
608 + selectChange(val) {
609 + if (this.queryForm.minCustomVal && this.queryForm.maxCustomVal) {
610 + this.validateMaxCustomVal("maxCustomVal");
611 + }
612 + },
613 + // 搜索
614 + searchBtn(row) {
615 + // this.$refs.ruleForm.handleSearch("ruleForm", (val) => {
616 + // console.log(val);
617 + // });
618 + console.log(this.tableData);
619 + },
620 + // 添加
621 + addBtn(item) {
622 + console.log("add：", item);
623 + this.tableData.unshift({
624 + fltNo: "",
625 + fltNoDate: "",
626 + fltRoute: "",
627 + isOn: "0",
628 + sort: "0", // 排序字段
629 + });
630 + },
631 + // 删除
632 + deleBtn(item, $index) {
633 + this.tableData.splice($index, 1);
634 + },
635 + // 类别
636 + checkboxSingleName(val) {
637 + console.log(val);
638 + },
639 + // 表单提交
640 + submitForm(formName) {
641 + this.$refs[formName].validate((valid) => {
642 + if (valid) {
643 + } else {
644 + console.log("error submit!!");
645 + return false;
646 + }
647 + });
648 + this.$emit("handleSearch");
649 + },
650 + },
651 +};
652 +</script>
653 +<style lang='scss' scoped>
654 +.rowPadding {
655 + padding: 10px 50px;
656 + font-size: 12px;
657 +}
658 +.label-title{
659 + font-size: 14px;
660 + color: #606266;
661 + font-weight: 700;
662 +}
663 +</style>
1 +export const validateRules = {
2 + methods: {
3 + // 最小重量
4 + validateMinWeight(name) {
5 + if (/^(0|[1-9]\d*)(.\d{1,3})?$/.test(Number(this.queryForm[name]))) {
6 + // 最小重量大于0小于100，并且最小重量小于最大重量
7 + if (
8 + Number(this.queryForm[name]) >= 0 &&
9 + Number(this.queryForm[name]) < 100 &&
10 + Number(this.queryForm[name]) < Number(this.queryForm.maxWeight)
11 + ) {
12 + this.$refs.minWeight.innerHTML = "";
13 + return true;
14 + } else {
15 + this.$refs.maxWeight.innerHTML = "";
16 + this.$refs.minWeight.innerHTML =
17 + "最小重量大于0小于100，并且最小重量小于最大重量";
18 + return false;
19 + }
20 + } else {
21 + this.$refs.maxWeight.innerHTML = "";
22 + this.$refs.minWeight.innerHTML = "请输入正整数，小数保留3位";
23 + return false;
24 + }
25 + },
26 + // 最大重量
27 + validateMaxWeight(name) {
28 + // 最大重量
29 + if (/^(0|[1-9]\d*)(.\d{1,2})?$/.test(Number(this.queryForm[name]))) {
30 + // 最大重量大于0小于100，并且最大重量大于最小重量
31 + if (
32 + Number(this.queryForm[name]) >= 0 &&
33 + Number(this.queryForm[name]) < 100 &&
34 + Number(this.queryForm[name]) > Number(this.queryForm.minWeight)
35 + ) {
36 + this.$refs.maxWeight.innerHTML = "";
37 + return true;
38 + } else {
39 + this.$refs.minWeight.innerHTML = "";
40 + this.$refs.maxWeight.innerHTML =
41 + "最大重量大于0小于100，并且最大重量大于最小重量";
42 + return false;
43 + }
44 + } else {
45 + this.$refs.minWeight.innerHTML = "";
46 + this.$refs.maxWeight.innerHTML = "请输入正整数，小数保留3位";
47 + return false;
48 + }
49 + },
50 + // 最少件数
51 + validateMinPieces(name) {
52 + if (/^\d+$/.test(Number(this.queryForm[name]))) {
53 + if (
54 + Number(this.queryForm[name]) >= 0 &&
55 + Number(this.queryForm[name]) < 100 &&
56 + Number(this.queryForm[name]) < Number(this.queryForm.maxNumOfPieces)
57 + ) {
58 + // 最少件数 大于0小于100并且最少件数小于最多件数
59 + this.$refs.minNumOfPieces.innerHTML = "";
60 + return true;
61 + } else {
62 + this.$refs.maxNumOfPieces.innerHTML = "";
63 + this.$refs.minNumOfPieces.innerHTML =
64 + "最少件数 大于0小于100并且最少件数小于最多件数";
65 + }
66 + } else {
67 + this.$refs.maxNumOfPieces.innerHTML = "";
68 + this.$refs.minNumOfPieces.innerHTML = "请输入有效件数";
69 + return false;
70 + }
71 + },
72 + // 最多件数
73 + validateMaxPieces(name) {
74 + if (/^\d+$/.test(Number(this.queryForm[name]))) {
75 + if (
76 + Number(this.queryForm[name]) >= 0 &&
77 + Number(this.queryForm[name]) < 100 &&
78 + Number(this.queryForm[name]) > Number(this.queryForm.minNumOfPieces)
79 + ) {
80 + // 最少件数 大于0小于100并且最少件数小于最多件数
81 + this.$refs.maxNumOfPieces.innerHTML = "";
82 + return true;
83 + } else {
84 + this.$refs.minNumOfPieces.innerHTML = "";
85 + this.$refs.maxNumOfPieces.innerHTML =
86 + "最多件数 大于0小于100并且最少件数小于最多件数";
87 + }
88 + } else {
89 + this.$refs.minNumOfPieces.innerHTML = "";
90 + this.$refs.maxNumOfPieces.innerHTML = "请输入有效件数";
91 + return false;
92 + }
93 + },
94 +
95 + // 最小申报价值
96 + validateMinCustomVal(name) {
97 + // 申报价值
98 + if (/^(0|[1-9]\d*)(.\d{1,2})?$/.test(Number(this.queryForm[name]))) {
99 + if (
100 + this.queryForm.customVal == "USD" ||
101 + this.queryForm.customVal == "美元"
102 + ) {
103 + // 申报价值（美元）0~600
104 + if (
105 + Number(this.queryForm[name]) >= 0 &&
106 + Number(this.queryForm[name]) < 600 &&
107 + Number(this.queryForm[name]) < Number(this.queryForm.maxCustomVal)
108 + ) {
109 + // 最小申报价值大于0小于600，并且最小申报价值小于最大申报价值
110 + this.$refs.minCustomVal.innerHTML = "";
111 + return true;
112 + } else {
113 + this.$refs.maxCustomVal.innerHTML = "";
114 + this.$refs.minCustomVal.innerHTML = `申报价值（美元）0~600`;
115 + return false;
116 + }
117 + } else {
118 + // 申报价值（人民币）0~2000
119 + if (
120 + Number(this.queryForm[name]) >= 0 &&
121 + Number(this.queryForm[name]) < 2000 &&
122 + Number(this.queryForm[name]) < Number(this.queryForm.maxCustomVal)
123 + ) {
124 + // 最大申报价值大于0小于2000，并且最大申报价值大于最小申报价值
125 + this.$refs.minCustomVal.innerHTML = "";
126 + return true;
127 + } else {
128 + this.$refs.maxCustomVal.innerHTML = "";
129 + this.$refs.minCustomVal.innerHTML = `申报价值（人民币）0~2000`;
130 + return false;
131 + }
132 + }
133 + } else {
134 + this.$refs.maxCustomVal.innerHTML = "";
135 + this.$refs.minCustomVal.innerHTML = "请输入正确申报价值";
136 + return false;
137 + }
138 + },
139 + // 最大申报价值
140 + validateMaxCustomVal(name) {
141 + // 申报价值
142 + if (/^(0|[1-9]\d*)(.\d{1,2})?$/.test(Number(this.queryForm[name]))) {
143 + if (
144 + this.queryForm.customVal == "USD" ||
145 + this.queryForm.customVal == "美元"
146 + ) {
147 + // 申报价值（美元）0~600
148 + if (
149 + Number(this.queryForm[name]) >= 0 &&
150 + Number(this.queryForm[name]) < 600 &&
151 + Number(this.queryForm[name]) > Number(this.queryForm.minCustomVal)
152 + ) {
153 + // 最小申报价值大于0小于600，并且最小申报价值小于最大申报价值
154 + this.$refs.maxCustomVal.innerHTML = "";
155 + return true;
156 + } else {
157 + this.$refs.minCustomVal.innerHTML = "";
158 + this.$refs.maxCustomVal.innerHTML = `申报价值（美元）0~600`;
159 + return false;
160 + }
161 + } else {
162 + // 申报价值（人民币）0~2000
163 + if (
164 + Number(this.queryForm[name]) >= 0 &&
165 + Number(this.queryForm[name]) < 2000 &&
166 + Number(this.queryForm[name]) > Number(this.queryForm.minCustomVal)
167 + ) {
168 + // 最大申报价值大于0小于2000，并且最大申报价值大于最小申报价值
169 + this.$refs.maxCustomVal.innerHTML = "";
170 + return true;
171 + } else {
172 + this.$refs.minCustomVal.innerHTML = "";
173 + this.$refs.maxCustomVal.innerHTML = `申报价值（人民币）0~2000`;
174 + return false;
175 + }
176 + }
177 + } else {
178 + this.$refs.minCustomVal.innerHTML = "";
179 + this.$refs.maxCustomVal.innerHTML = "请输入正确申报价值";
180 + return false;
181 + }
182 + },
183 + },
184 +};
1 +export const tableAttr = {
2 + border: true,
3 + loadingTable: false,
4 + isDragSort: true, // 拖拽tableData数据一定要加id字段
5 + maxHeight: 300,
6 + btnCofig: {
7 + isBtn: true,
8 + btnGroup: [
9 + // {
10 + // type: "primary", // text、primary、danger
11 + // icon: "el-icon-search", // el-icon-edit 、el-icon-delete、el-icon-plus、el-icon-download、el-icon-upload el-icon--right
12 + // btnName: "搜索",
13 + // size: "mini", // medium / small / mini
14 + // round: false,
15 + // loading: false,
16 + // event: "search",
17 + // },
18 + {
19 + type: "primary",
20 + icon: "el-icon-plus",
21 + btnName: "添加",
22 + size: "mini",
23 + round: false,
24 + loading: false,
25 + event: "add",
26 + },
27 + // {
28 + // type: "danger",
29 + // icon: "el-icon-delete",
30 + // btnName: "删除",
31 + // size: "mini",
32 + // round: false,
33 + // loading: false,
34 + // event: "delete",
35 + // },
36 + ],
37 + },
38 +};
39 +
40 +export const columnHeader = (deleteRow) => [
41 + {
42 + label: "航班号",
43 + prop: "fltNo",
44 + align: "center",
45 + minWidth: 100,
46 + },
47 + {
48 + label: "航班日期",
49 + prop: "fltNoDate",
50 + align: "center",
51 + minWidth: 100,
52 + // sortable: true,
53 + // "sort-method": (a, b) => b.updateTime - a.updateTime,
54 + },
55 + {
56 + label: "航线优先级",
57 + prop: "fltRoute",
58 + align: "center",
59 + minWidth: 100,
60 + },
61 + {
62 + label: "爆仓是否继续配舱",
63 + prop: "isOn",
64 + align: "center",
65 + minWidth: 100,
66 + render: (h, params) => {
67 + const { row } = params;
68 + console.log(345678,row);
69 + // return h("div", `状态-${row.id}`);
70 + },
71 + },
72 + {
73 + label: "操作",
74 + align: "center",
75 + minWidth: 120,
76 + render: (h, params) => {
77 + return h("div", [
78 + h(
79 + "el-button",
80 + {
81 + style: {
82 + color: "#ff4949",
83 + },
84 + props: {
85 + type: "text",
86 + size: "mini",
87 + icon: "el-icon-delete",
88 + },
89 + on: {
90 + click() {
91 + deleteRow(params);
92 + },
93 + },
94 + },
95 + "删除"
96 + ),
97 + ]);
98 + },
99 + },
100 +];
101 +
102 +export const tableData = [
103 + {
104 + id: "1",
105 + fltNo: "A380",
106 + fltNoDate: "3",
107 + fltRoute: "CAN",
108 + isOn: "1",
109 + sort: "1", // 排序字段
110 + },
111 +];
1 +export const formConfig = [
2 + {
3 + label: "创建时间(从)",
4 + type: "Date",
5 + name: "startTime",
6 + prop: "startTime",
7 + placeholder: "请选择开始时间",
8 + rules: { required: true, message: "请选择开始时间", trigger: "blur" },
9 + },
10 + {
11 + label: "创建时间(到)",
12 + type: "Date",
13 + name: "endTime",
14 + prop: "endTime",
15 + placeholder: "请选择结束时间",
16 + rules: { required: true, message: "请选择结束时间", trigger: "blur" },
17 + },
18 + {
19 + label: "规则状态",
20 + type: "Select",
21 + name: "status",
22 + prop: "status",
23 + width: "140px",
24 + placeholder: "请选择状态",
25 + rules: { required: true, message: "请选择状态", trigger: "blur" },
26 + options: {
27 + data: [
28 + {
29 + value: "1",
30 + label: "新增",
31 + },
32 + {
33 + value: "2",
34 + label: "修改",
35 + },
36 + {
37 + value: "3",
38 + label: "删除",
39 + },
40 + ],
41 + label: "",
42 + value: "",
43 + },
44 + },
45 +];
46 +
47 +export const editFormConfig = [
48 + {
49 + label: "航班号",
50 + type: "Search",
51 + name: "route",
52 + prop: "fltNo",
53 + placeholder: "请输入航班号",
54 + rules: {
55 + required: true,
56 + message: "请输入航班号",
57 + trigger: ["change", "blur"],
58 + },
59 + http: {
60 + url: "/dictionary/queryRouteByFltNo",
61 + method: "post",
62 + data: {
63 + fltNo: "",
64 + },
65 + },
66 + },
67 + {
68 + label: "",
69 + type: "inputNumber",
70 + name: "count",
71 + prop: "count",
72 + placeholder: "+",
73 + min: 0,
74 + max: 7,
75 + with: "50px",
76 + },
77 + {
78 + label: "航线优先级",
79 + type: "Input",
80 + name: "route",
81 + prop: "fltNum",
82 + placeholder: "请选择航线优先级",
83 + trigger: "focus",
84 + },
85 + {
86 + label: "爆仓是否继续配舱",
87 + type: "Checkbox",
88 + name: "checked",
89 + prop: "checked",
90 + disabled: false,
91 + },
92 +];
1 +<template>
2 + <div class="form-header container">
3 + <el-row>
4 + <el-col>
5 + <yl-form
6 + ref="ruleForm"
7 + :formConfig="formConfig"
8 + :queryForm="queryForm"
9 + @input="inputEvent"
10 + @keyup="keyUpEvent"
11 + />
12 + </el-col>
13 + </el-row>
14 + <yl-table
15 + :attrs="tableAttr"
16 + :loadingTable="tableAttr.loadingTable"
17 + :columns="columns"
18 + :tableData="tableData"
19 + :pageConfig="pageConfig"
20 + @sizeChange="handleSizeChange"
21 + @currentChange="handleCurrentChange"
22 + @search="searchBtn"
23 + @restForm="restForm"
24 + @add="addBtn"
25 + @upload="uploadBtn"
26 + @download="downloadBtn"
27 + >
28 + </yl-table>
29 + </div>
30 +</template>
31 +<script>
32 +import YlForm from "@/components/YlForm";
33 +import YlTable from "@/components/YlTable";
34 +import { formConfig } from "./formConfig";
35 +import { debounce } from "@/utils";
36 +import { tableAttr, columnHeader, tableData } from "./tableConfig";
37 +import {
38 + allDictData, // 获取全部字典
39 + queryRouteByFltNo, // 航线查询
40 +} from "@/api/destinationFlight";
41 +export default {
42 + components: {
43 + YlForm,
44 + YlTable,
45 + },
46 + data() {
47 + return {
48 + formConfig: formConfig, // 表单配置项
49 + queryForm: {}, // 表单参数
50 + pageConfig: {
51 + // 分页配置项
52 + isPagination: true,
53 + total: 13,
54 + pageData: {
55 + page: 1,
56 + size: 10,
57 + },
58 + },
59 + tableAttr: tableAttr, // table配置项
60 + columns: columnHeader(this.editRow, this.deleteRow, this.viewRow), // 表头
61 + tableData: tableData, // 表格数据
62 + selectionList: [], // table复选框筛选集合
63 + };
64 + },
65 + created() {},
66 + mounted() {},
67 + methods: {
68 + // 航线查询
69 + queryRoute(item) {
70 + queryRouteByFltNo(item).then((res) => {
71 + if (res.code == 200) {
72 + const list = res.data.list;
73 + let routeList = "";
74 + if (list.length) {
75 + list.map((item) => {
76 + routeList += item.route + ",";
77 + });
78 + this.queryForm.fltRoute = routeList.substring(
79 + 0,
80 + routeList.length - 1
81 + );
82 + } else {
83 + this.queryForm = {
84 + fltNo: item.fltNo, // 航班号
85 + };
86 + }
87 + }
88 + });
89 + },
90 + // input事件
91 + inputEvent: debounce(function () {
92 + this.queryRoute({
93 + fltNo: this.queryForm.fltNo, // 航班号
94 + });
95 + }, 800),
96 + // 回车事件
97 + keyUpEvent(item) {
98 + this.queryRoute(item);
99 + },
100 + // table复选框事件
101 + selectionTable(e) {
102 + console.log("selectionTable：", e);
103 + this.selectionList = e;
104 + },
105 + //条数变化
106 + handleSizeChange(e) {
107 + this.pageConfig.pageData.size = e;
108 + this.pageConfig.pageData.page = 1;
109 + console.log("sizeChange：", e);
110 + },
111 + //页码变化
112 + handleCurrentChange(e) {
113 + this.pageConfig.pageData.page = e;
114 + console.log("currentChange：", e);
115 + },
116 + // 搜索
117 + searchBtn(row) {
118 + this.$refs.ruleForm.handleSearch("ruleForm", (val) => {
119 + console.log(val);
120 + });
121 + console.log(this.queryForm);
122 + },
123 + // 重置表单
124 + restForm() {
125 + this.$refs.ruleForm.resetFields("ruleForm");
126 + },
127 + // 添加
128 + addBtn(item) {
129 + console.log("add：", item);
130 + this.$router.push({
131 + name: "edit",
132 + params: {
133 + edit: 12,
134 + },
135 + });
136 + },
137 + // 上传
138 + uploadBtn(item) {
139 + console.log("upload：", item);
140 + },
141 + // 导出
142 + downloadBtn(item) {
143 + console.log("download：", item);
144 + },
145 + // 编辑
146 + editRow(item) {
147 + this.$router.push({
148 + name: "edit",
149 + params: {
150 + edit: 12,
151 + },
152 + });
153 + console.log("修改：", item);
154 + },
155 + // 删除
156 + deleteRow(item) {
157 + this.$confirm("是否允许删除?", "提示", {
158 + confirmButtonText: "确定",
159 + cancelButtonText: "取消",
160 + type: "warning",
161 + center: true,
162 + })
163 + .then(() => {
164 + console.log("删除：", item);
165 + this.$message({
166 + type: "success",
167 + message: "删除成功!",
168 + });
169 + })
170 + .catch(() => {
171 + this.$message({
172 + type: "info",
173 + message: "已取消删除",
174 + });
175 + });
176 + },
177 + // 查看
178 + viewRow({ row }) {
179 + this.$router.push({
180 + name: "edit",
181 + params: {
182 + edit: 12,
183 + },
184 + });
185 + console.log("查看：", row);
186 + },
187 + },
188 +};
189 +</script>
190 +<style lang="scss" scoped></style>
1 +const state = {
2 + 1: "新增",
3 + 2: "修改",
4 + 3: "删除",
5 +};
6 +export const tableAttr = {
7 + border: true,
8 + loadingTable: false,
9 + isDragSort: false, // 拖拽tableData数据一定要加id字段
10 + maxHeight: 300,
11 + btnCofig: {
12 + isBtn: true,
13 + btnGroup: [
14 + {
15 + type: "primary", // text、primary、danger
16 + icon: "el-icon-search", // el-icon-edit 、el-icon-delete、el-icon-plus、el-icon-download、el-icon-upload el-icon--right
17 + btnName: "搜索",
18 + size: "mini", // medium / small / mini
19 + round: false,
20 + loading: false,
21 + event: "search",
22 + },
23 + {
24 + type: "info",
25 + icon: "",
26 + btnName: "重置",
27 + size: "mini",
28 + round: false,
29 + loading: false,
30 + event: "restForm",
31 + },
32 + {
33 + type: "primary",
34 + icon: "el-icon-plus",
35 + btnName: "添加",
36 + size: "mini",
37 + round: false,
38 + loading: false,
39 + event: "add",
40 + },
41 + {
42 + type: "primary",
43 + icon: "el-icon-upload",
44 + btnName: "上传",
45 + size: "mini",
46 + round: false,
47 + loading: false,
48 + event: "upload",
49 + },
50 + {
51 + type: "primary",
52 + icon: "el-icon-download",
53 + btnName: "导出",
54 + size: "mini",
55 + round: false,
56 + loading: false,
57 + event: "download",
58 + },
59 + ],
60 + },
61 +};
62 +export const columnHeader = (editRow, deleteRow, viewRow) => [
63 + {
64 + type: "selection",
65 + align: "center",
66 + prop: "selection",
67 + width: "50",
68 + },
69 + {
70 + type: "index",
71 + label: "序号",
72 + prop: "id",
73 + align: "center",
74 + width: "50",
75 + },
76 + {
77 + label: "顺位航班",
78 + prop: "flightRand",
79 + align: "center",
80 + minWidth: 100,
81 + },
82 + {
83 + label: "状态",
84 + prop: "status",
85 + align: "center",
86 + minWidth: 100,
87 + render: (h, params) => {
88 + const { row } = params;
89 + return h("div", `${state[row.status]}`);
90 + },
91 + },
92 + {
93 + label: "创建时间",
94 + prop: "createTime",
95 + align: "center",
96 + minWidth: 100,
97 + sortable: true,
98 + "sort-method": (a, b) => b.createTime - a.createTime,
99 + },
100 + {
101 + label: "修改时间",
102 + prop: "updateTime",
103 + align: "center",
104 + minWidth: 100,
105 + },
106 + {
107 + label: "创建人",
108 + prop: "createUserName",
109 + align: "center",
110 + minWidth: 100,
111 + },
112 + {
113 + label: "修改人",
114 + prop: "updateUserName",
115 + align: "center",
116 + minWidth: 100,
117 + },
118 + {
119 + label: "操作",
120 + prop: "operate",
121 + align: "center",
122 + minWidth: 120,
123 + fixed: "right",
124 + render: (h, params) => {
125 + return h("div", [
126 + h(
127 + "el-button",
128 + {
129 + props: {
130 + type: "text",
131 + size: "mini",
132 + icon: "el-icon-edit",
133 + },
134 + on: {
135 + click() {
136 + editRow(params);
137 + },
138 + },
139 + },
140 + "修改"
141 + ),
142 + h(
143 + "el-button",
144 + {
145 + style: {
146 + color: "#ff4949",
147 + },
148 + props: {
149 + type: "text",
150 + size: "mini",
151 + icon: "el-icon-delete",
152 + },
153 + on: {
154 + click() {
155 + deleteRow(params);
156 + },
157 + },
158 + },
159 + "删除"
160 + ),
161 + h(
162 + "el-button",
163 + {
164 + props: {
165 + type: "text",
166 + size: "mini",
167 + icon: "el-icon-view",
168 + },
169 + on: {
170 + click() {
171 + viewRow(params);
172 + },
173 + },
174 + },
175 + "查看"
176 + ),
177 + ]);
178 + },
179 + },
180 +];
181 +
182 +export const tableData = [
183 + {
184 + id: "1",
185 + flightRand: "LZ003;LZ00",
186 + status: "1",
187 + createTime: "2023-08-11",
188 + updateTime: "2023-08-11",
189 + createUserName: "wjh",
190 + updateUserName: "wjh",
191 + },
192 + {
193 + id: "2",
194 + flightRand: "LP001;LP004+1",
195 + status: "3",
196 + createTime: "2023-08-11",
197 + updateTime: "2023-08-11",
198 + createUserName: "wjh",
199 + updateUserName: "wjh",
200 + },
201 + {
202 + id: "3",
203 + flightRand: "LZ002;LZ003;LZ001",
204 + status: "1",
205 + createTime: "2023-08-10",
206 + updateTime: "2023-08-10",
207 + createUserName: "wjh",
208 + updateUserName: "wjh",
209 + },
210 + {
211 + id: "4",
212 + flightRand: "LZ001;LZ002;LZ004",
213 + status: "2",
214 + createTime: "2023-08-11",
215 + updateTime: "2023-08-11",
216 + createUserName: "wjh",
217 + updateUserName: "wjh",
218 + },
219 + {
220 + id: "5",
221 + flightRand: "PS001;PS003",
222 + status: "1",
223 + createTime: "2023-08-11",
224 + updateTime: "2023-08-11",
225 + createUserName: "wjh",
226 + updateUserName: "wjh",
227 + },
228 + {
229 + id: "6",
230 + flightRand: "PS002;PS003",
231 + status: "3",
232 + createTime: "2023-08-11",
233 + updateTime: "2023-08-11",
234 + createUserName: "wjh",
235 + updateUserName: "wjh",
236 + },
237 + {
238 + id: "7",
239 + flightRand: "FX0092;FX0095;FX0094;FX0090",
240 + status: "1",
241 + createTime: "2023-08-10",
242 + updateTime: "2023-08-10",
243 + createUserName: "wjh",
244 + updateUserName: "wjh",
245 + },
246 + {
247 + id: "8",
248 + flightRand: "AB060;AC005;AC204",
249 + status: "2",
250 + createTime: "2023-08-10",
251 + updateTime: "2023-08-10",
252 + createUserName: "wjh",
253 + updateUserName: "wjh",
254 + },
255 + {
256 + id: "9",
257 + flightRand: "FX0090;FX0092",
258 + status: "1",
259 + createTime: "2023-08-10",
260 + updateTime: "2023-08-10",
261 + createUserName: "wjh",
262 + updateUserName: "wjh",
263 + },
264 +];