factory_web/src/views/mtm/routepack.vue

<template>
	<el-container>
		<el-header>
			<div class="left-panel">
				<el-button type="primary" icon="el-icon-plus" @click="add"
					>新建工艺</el-button
				>
				<el-select
					v-model="query.state"
					placeholder="审批状态"
					@change="handleQuery"
					style="margin-left: 2px; width: 150px"
					clearable
				>
					<el-option
						v-for="item in stateOptions"
						:key="item.value"
						:label="item.label"
						:value="item.value"
					></el-option>
				</el-select>
			</div>
			<div class="right-panel">
				<div class="right-panel-search">
					<el-input
						v-model="query.search"
						placeholder="名称"
						clearable
						@keyup.enter="handleQuery"
					></el-input>
					<el-button
						type="primary"
						icon="el-icon-search"
						@click="handleQuery"
					></el-button>
				</div>
			</div>
		</el-header>
		<el-main class="nopadding">
			<scTable
				ref="table"
				:apiObj="apiObj"
				:params="params"
				row-key="id"
				stripe
				@resetQuery="resetQuery"
			>
				<el-table-column
					label="#"
					type="index"
					fixed="left"
					width="50"
				></el-table-column>
				<el-table-column
					label="名称"
					prop="name"
					fixed="left"
					:show-overflow-tooltip="true"
				></el-table-column>
				<el-table-column label="产品" prop="material_name">
				</el-table-column>
				<el-table-column label="状态" prop="state"> </el-table-column>
				<el-table-column label="审批状态">
					<template #default="scope">
						<span
							v-if="scope.row.ticket_ && scope.row.ticket_.state_"
							style="margin-right: 5px"
							>{{ scope.row.ticket_.state_.name }}</span
						>
						<!-- <el-tag
							v-if="
								scope.row.ticket_ && scope.row.ticket_.act_state
							"
						>
							{{ act_states[scope.row.ticket_.act_state] }}
						</el-tag> -->
					</template>
				</el-table-column>
				<el-table-column
					label="创建人"
					prop="create_by_name"
				></el-table-column>
				<el-table-column
					label="创建时间"
					prop="create_time"
				></el-table-column>
				<el-table-column
					label="操作"
					fixed="right"
					align="center"
					width="180"
				>
					<template #default="scope">
						<el-button
							link
							type="primary"
							size="small"
							v-if="scope.row.ticket == null"
							@click="table_edit(scope.row, scope.$index)"
							>继续编辑
						</el-button>

						<el-button
							link
							type="primary"
							size="small"
							@click="table_show(scope.row, scope.$index)"
							>查看
						</el-button>
						<el-popconfirm
							v-if="scope.row.state != 30"
							title="确定删除吗？"
							@confirm="table_del(scope.row, scope.$index)"
						>
							<template #reference>
								<el-button link type="danger" size="small"
									>删除</el-button
								>
							</template>
						</el-popconfirm>
					</template>
				</el-table-column>
			</scTable>
		</el-main>
	</el-container>

	<save-dialog
		v-if="dialog.save"
		ref="saveDialog"
		@success="handleSaveSuccess"
		@closed="saveClose"
	>
	</save-dialog>
	<show-dialog
		v-if="dialog.show"
		ref="showDialog"
		@closed="dialog.show = false"
	></show-dialog>
</template>
<script>
import saveDialog from "./routepack_form.vue";
import showDialog from "./route_show.vue";

export default {
	name: "route",
	components: {
		saveDialog,
		showDialog,
	},
	data() {
		return {
			dialog: {
				save: false,
				edit: false,
				show: false,
			},
			adminform: {
				username: "",
			},
			routepack: "",
			apiObj: this.$API.mtm.routepack.list,
			params: {
				need_route: true,
			},
			query: {},
			userId: "",
			selection: [],
			search: {
				search: "",
				keyword: null,
			},
			timeRange: [],
			filteType: "all",
			stateOptions: [
				{
					label: "创建中",
					value: 10,
				},
				{
					label: "审批中",
					value: 20,
				},
				{
					label: "已完成",
					value: 30,
				},
			],
			state_: {
				10: "创建中",
				20: "审批中",
				30: "已关闭",
			},
			filterType: "all",
		};
	},
	mounted() {
		let userInfo = this.$TOOL.data.get("USER_INFO");
		this.userId = userInfo.id;
	},
	methods: {
		//添加
		add() {
			this.dialog.save = true;
			this.$nextTick(() => {
				this.$refs.saveDialog.open("add");
			});
		},
		//编辑
		table_edit(row) {
			this.dialog.save = true;
			this.$nextTick(() => {
				this.$refs.saveDialog.open("edit").setData(row);
			});
		},
		//查看
		table_show(row) {
			this.dialog.show = true;
			this.$nextTick(() => {
				this.$refs.showDialog.open().setData(row);
			});
		},
		saveClose() {
			this.$refs.table.refresh();
			this.dialog.save = false;
		},
		//权限设置
		permission() {
			this.dialog.permission = true;
			this.$nextTick(() => {
				this.$refs.permissionDialog.open();
			});
		},
		//删除
		async table_del(row) {
			this.$API.mtm.routepack.delete
				.req(row.id)
				.then((res) => {
					this.$message.success("删除成功");
					this.$refs.table.refresh();
					return res;
				})
				.catch((err) => {
					return err;
				});
		},
		next_add(row) {
			this.$router.push({
				name: "",
				query: {
					rpjid: row.id,
				},
			});
		},

		//本地更新数据
		handleSaveSuccess(data, mode) {
			if (mode == "add") {
				this.$refs.table.refresh();
			} else if (mode == "edit") {
				this.$refs.table.refresh();
			}
		},
		resetQuery() {
			this.query = {};
		},
		//搜索
		handleQuery() {
			if (this.timeRange) {
				this.query.start_come = this.timeRange[0];
				this.query.end_come = this.timeRange[1];
			} else {
				this.query.end_come = null;
				this.query.start_come = null;
			}
			this.$refs.table.queryData(this.query);
		},
		handleFilterTypeChange(val) {
			if (val == "all") {
				this.query.create_by = null;
			} else if (val == "my") {
				this.query.create_by = this.userId;
			}
			this.$refs.table.queryData(this.query);
		},
	},
};
</script>