From 1dabf22fd60419fa88a26d2e66b4965405e9ec78 Mon Sep 17 00:00:00 2001
From: ival <610568032@qq.com>
Date: Fri, 30 Aug 2019 16:35:13 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=95=B0=E6=8D=AE=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/components/editTable/index.vue | 173 +++++++++++++++++++++++
 src/views/display/demon/scheduling.vue   |  99 ++++++-------
 2 files changed, 216 insertions(+), 56 deletions(-)
 create mode 100644 src/views/components/editTable/index.vue

diff --git a/src/views/components/editTable/index.vue b/src/views/components/editTable/index.vue
new file mode 100644
index 000000000..42b591914
--- /dev/null
+++ b/src/views/components/editTable/index.vue
@@ -0,0 +1,173 @@
+<template>
+  <div>
+    <el-table
+      :size="size"
+      :stripe="stripe"
+      :border="border"
+      :data="tableData"
+      :max-height="maxHeight"
+      :height="height"
+    >
+      <el-table-column v-if="tableForm.index" fixed type="index" />
+      <template v-for="(column, index) in tableForm.columns">
+        <el-table-column
+          v-if="checkFieldType(column.type, 'text')"
+          :key="index"
+          :prop="column.prop"
+          :label="column.title"
+          :width="column.width || labelWidth"
+          :sortable="column.sortable"
+        >
+          <template slot-scope="scopeT" @focus="handleFocus" @blur="handleBlur">
+            <template v-if="column.editable && (scopeT.row.editing || column.editing)">
+              <el-input v-model="scopeT.row[column.prop]" :size="size" />
+            </template>
+            <template v-else>
+              {{ formatText(column, scopeT.row) }}
+            </template>
+          </template>
+        </el-table-column>
+        <el-table-column
+          v-if="checkFieldType(column.type, 'select')"
+          :key="index"
+          :prop="column.prop"
+          :label="column.title"
+          :width="column.width || labelWidth"
+          :sortable="column.sortable"
+        >
+          <template slot-scope="scopeS">
+            <template v-if="column.editable && (scopeS.row.editing || column.editing)">
+              <el-select v-model="scopeS.row[column.prop]" :size="size">
+                <el-option
+                  v-for="item in obtainOptions(column)"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </template>
+            <template v-else>
+              {{ formatText(column, scopeS.row) }}
+            </template>
+          </template>
+        </el-table-column>
+        <el-table-column
+          v-if="checkFieldType(column.type, 'tag')"
+          :key="index"
+          :prop="column.prop"
+          :label="column.title"
+          :width="column.width || labelWidth"
+          :sortable="column.sortable"
+        >
+          <template slot-scope="scopeG">
+            <template v-for="tag in column.columnValue(scopeG.row)">
+              <el-tag
+                :key="tag"
+                :type="column.tagType(scopeG.row, scopeG.$index)"
+                style="margin-right: 10px; margin-bottom: 5px;"
+              >{{ tag }}</el-tag>
+            </template>
+          </template>
+        </el-table-column>
+        <el-table-column
+          v-if="checkFieldType(column.type, 'button')"
+          :key="index"
+          fixed="right"
+          :prop="column.prop"
+          :label="column.title"
+          :width="column.width || labelWidth"
+          :sortable="column.sortable"
+        >
+          <template slot-scope="scopeB">
+            <el-button :size="size" type="warning" @click.native.prevent="handleFocus(scopeB)">编辑</el-button>
+            <template v-for="(action,idx) in column.buttons">
+              <el-button :key="idx" :size="size" :type="action.type" @click.native.prevent="handleClick(action, scopeB)">{{ action.name }}</el-button>
+            </template>
+          </template>
+        </el-table-column>
+      </template>
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+	props: {
+		maxHeight: {
+			type: Number,
+			default() {
+				return 400;
+			}
+		},
+		height: {
+			type: Number,
+			default() {
+				return 400;
+			}
+		},
+		size: {
+			type: String,
+			default() {
+				return 'mini';
+			}
+		},
+		border: {
+			type: Boolean
+		},
+		stripe: {
+			type: Boolean
+		},
+		tableData: {
+			type: Array,
+			default() {
+				return [];
+			}
+		},
+		tableForm: {
+			type: Object,
+			required: true
+		}
+	},
+	data() {
+		return {
+			scope: null,
+			labelWidth: '120'
+		};
+	},
+	methods: {
+		obtainOptions(column) {
+			return column.options();
+		},
+		checkFieldType(field, type) {
+			return field == type;
+		},
+		formatText(column, row) {
+			return column.format ? column.format(row) : row[column.prop];
+		},
+		handleClick(action, scope) {
+			this.handleBlur(this.scope);
+			action.handleClick(scope.$index, scope.row);
+		},
+		handleFocus(scope) {
+			this.handleBlur(this.scope);
+			this.$set(this.tableData[scope.$index], 'editing', true);
+			this.scope = scope;
+		},
+		handleBlur(scope) {
+			if (scope) {
+				this.$set(this.tableData[scope.$index], 'editing', false);
+			}
+		}
+	}
+};
+</script>
+<style lang="scss" scoped>
+	/deep/  .el-table {
+		td,th {
+			padding:  0px;
+		}
+		td:nth-child(1), th:nth-child(1) {
+			background: #fefefe;
+		}
+	}
+</style>
diff --git a/src/views/display/demon/scheduling.vue b/src/views/display/demon/scheduling.vue
index 52281ebaf..0a9a7f108 100644
--- a/src/views/display/demon/scheduling.vue
+++ b/src/views/display/demon/scheduling.vue
@@ -97,65 +97,13 @@ export default {
 					},
 					{
 						title: '车组号',
-						prop: 'groupNumber',
+						prop: 'trainCode',
 						type: 'select',
 						width: '150',
 						options: () => { return this.groupNumberList; },
 						editable: true,
 						editing: true
 					},
-					{
-						title: '回库段',
-						prop: 'inDepot',
-						type: 'text'
-					},
-					{
-						title: '回库状态',
-						prop: 'inStatus',
-						type: 'tag',
-						columnValue: (row) => { return this.$ConstSelect.translate(row.inStatus, 'Whether'); },
-						tagType: (row) => {
-							switch (row.inStatus) {
-							case true: return 'success';
-							case false: return 'danger';
-							}
-						}
-					},
-					{
-						title: '下线方向码',
-						prop: 'offlineDirectionCode',
-						type: 'text'
-					},
-					{
-						title: '下线轨',
-						prop: 'offlineSection',
-						type: 'text'
-					},
-					{
-						title: '下线服务号',
-						prop: 'offlineServerNumber',
-						type: 'text'
-					},
-					{
-						title: '下线目的地',
-						prop: 'offlineTargetNumber',
-						type: 'text'
-					},
-					{
-						title: '下线时间',
-						prop: 'offlineTime',
-						type: 'text'
-					},
-					{
-						title: '下线车次号',
-						prop: 'offlineTripNumber',
-						type: 'text'
-					},
-					{
-						title: '上线方向码',
-						prop: 'onlineDirectionCode',
-						type: 'text'
-					},
 					{
 						title: '上线轨',
 						prop: 'onlineSection',
@@ -179,7 +127,8 @@ export default {
 					{
 						title: '上线车次号',
 						prop: 'onlineTripNumber',
-						type: 'text'
+						type: 'text',
+						format: (row) => { return `${row.onlineDirectionCode}${row.onlineTripNumber}`; }
 					},
 					{
 						title: '出库段',
@@ -199,9 +148,47 @@ export default {
 						}
 					},
 					{
-						title: '列车编码',
-						prop: 'trainCode',
+						title: '下线轨',
+						prop: 'offlineSection',
 						type: 'text'
+					},
+					{
+						title: '下线服务号',
+						prop: 'offlineServerNumber',
+						type: 'text'
+					},
+					{
+						title: '下线目的地',
+						prop: 'offlineTargetNumber',
+						type: 'text'
+					},
+					{
+						title: '下线时间',
+						prop: 'offlineTime',
+						type: 'text'
+					},
+					{
+						title: '下线车次号',
+						prop: 'offlineTripNumber',
+						type: 'text',
+						format: (row) => { return `${row.offlineDirectionCode}${row.offlineTripNumber}`; }
+					},
+					{
+						title: '回库段',
+						prop: 'inDepot',
+						type: 'text'
+					},
+					{
+						title: '回库状态',
+						prop: 'inStatus',
+						type: 'tag',
+						columnValue: (row) => { return this.$ConstSelect.translate(row.inStatus, 'Whether'); },
+						tagType: (row) => {
+							switch (row.inStatus) {
+							case true: return 'success';
+							case false: return 'danger';
+							}
+						}
 					}
 				]
 			},