|
|
@@ -0,0 +1,360 @@
|
|
|
+<template>
|
|
|
+ <ele-modal
|
|
|
+ :title="'运输工单'"
|
|
|
+ custom-class="ele-dialog-form long-dialog-form"
|
|
|
+ :visible.sync="visible"
|
|
|
+ :before-close="handleClose"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ :close-on-press-escape="false"
|
|
|
+ append-to-body
|
|
|
+ width="70%"
|
|
|
+ :maxable="true"
|
|
|
+ :resizable="true"
|
|
|
+ >
|
|
|
+ <el-card shadow="never" v-loading="loading">
|
|
|
+ <work-search
|
|
|
+ class="seep-search"
|
|
|
+ ref="workSearch"
|
|
|
+ :levelList="levelList"
|
|
|
+ @search="reload"
|
|
|
+ label-width="130px"
|
|
|
+ ></work-search>
|
|
|
+
|
|
|
+ <ele-pro-table
|
|
|
+ ref="table"
|
|
|
+ :columns="columns"
|
|
|
+ :datasource="datasource"
|
|
|
+ row-key="id"
|
|
|
+ height="calc(100vh - 430px)"
|
|
|
+ full-height="calc(100vh - 116px)"
|
|
|
+ tool-class="ele-toolbar-form"
|
|
|
+ :page-size="20"
|
|
|
+ @columns-change="handleColumnChange"
|
|
|
+ :cache-key="cacheKeyUrl"
|
|
|
+ class="dict-table"
|
|
|
+ >
|
|
|
+ <template v-slot:toolbar>
|
|
|
+ <el-button
|
|
|
+ size="small"
|
|
|
+ type="primary"
|
|
|
+ icon="el-icon-plus"
|
|
|
+ class="ele-btn-icon"
|
|
|
+ @click="handleAddOrEdit('', 'add')"
|
|
|
+ >
|
|
|
+ 新建
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 自定义单选列 -->
|
|
|
+ <template v-slot:selection="{ row }">
|
|
|
+ <div class="radio-container">
|
|
|
+ <el-radio
|
|
|
+ v-model="selectedRowId"
|
|
|
+ :label="row.id"
|
|
|
+ @change="() => selectedRow = row"
|
|
|
+ ><span></span></el-radio>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </ele-pro-table>
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ <div class="btns" slot="footer">
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ size="small"
|
|
|
+ :disabled="!selectedRow"
|
|
|
+ @click="handleConfirm"
|
|
|
+ >
|
|
|
+ 确认
|
|
|
+ </el-button>
|
|
|
+ <el-button size="small" @click="handleClose">关闭</el-button>
|
|
|
+ </div>
|
|
|
+ </ele-modal>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import workSearch from '@/views/transportManager/shipManage/taskWorkManage/pageSearchTable.vue';
|
|
|
+import { getByCode } from '@/api/system/dictionary-data';
|
|
|
+import dictMixins from '@/mixins/dictMixins';
|
|
|
+import tabMixins from '@/mixins/tableColumnsMixin';
|
|
|
+import { logistictraklistnotePageListAPI } from '@/api/transportManager/shipManage/taskWork';
|
|
|
+import addOrEditDialog from '@/views/transportManager/shipManage/taskWorkManage/components/addOrEditDialog.vue';
|
|
|
+
|
|
|
+export default {
|
|
|
+ mixins: [dictMixins, tabMixins],
|
|
|
+ components: {
|
|
|
+ workSearch,
|
|
|
+ addOrEditDialog
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ visible: false,
|
|
|
+ loading: false,
|
|
|
+ levelData: {},
|
|
|
+ levelList: [],
|
|
|
+ workOrderType: 'afterSales',
|
|
|
+ // 单选相关变量（替换原selection多选数组）
|
|
|
+ selectedRowId: null, // 存储选中行的唯一标识（与row-key="id"对应）
|
|
|
+ selectedRow: null, // 存储选中行的完整数据
|
|
|
+ statusList: [
|
|
|
+ { value: 0, label: '待接收' },
|
|
|
+ { value: 1, label: '执行中' },
|
|
|
+ { value: 2, label: '已完成' }
|
|
|
+ ],
|
|
|
+ cacheKeyUrl: 'eos-02b17ed5-shipManage-taskWorkManage',
|
|
|
+ columnsVersion: 1,
|
|
|
+ addOrEditDialogFlag: false
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getLevelCode('fault_level');
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ columns() {
|
|
|
+ const version = this.columnsVersion;
|
|
|
+ return [
|
|
|
+ // 单选列（替换原type: 'selection'多选列）
|
|
|
+ {
|
|
|
+ columnKey: 'selection',
|
|
|
+ label: '选择',
|
|
|
+ slot: 'selection',
|
|
|
+ align: 'center',
|
|
|
+ showOverflowTooltip: true,
|
|
|
+ fixed: 'left',
|
|
|
+ width: 60
|
|
|
+ },
|
|
|
+ // 序号列
|
|
|
+ {
|
|
|
+ columnKey: 'index',
|
|
|
+ label: '序号',
|
|
|
+ type: 'index',
|
|
|
+ width: 55,
|
|
|
+ align: 'center',
|
|
|
+ showOverflowTooltip: true,
|
|
|
+ fixed: 'left'
|
|
|
+ },
|
|
|
+ // 工单单号列
|
|
|
+ {
|
|
|
+ prop: 'code',
|
|
|
+ label: '工单单号',
|
|
|
+ align: 'center',
|
|
|
+ showOverflowTooltip: true,
|
|
|
+ minWidth: 150
|
|
|
+ },
|
|
|
+ // 状态列
|
|
|
+ {
|
|
|
+ prop: 'status',
|
|
|
+ label: '状态',
|
|
|
+ align: 'center',
|
|
|
+ showOverflowTooltip: true,
|
|
|
+ minWidth: 120,
|
|
|
+ formatter: (row) => this.statusList.find(item => item.value === row.status)?.label || ''
|
|
|
+ },
|
|
|
+ // 计划编号列
|
|
|
+ {
|
|
|
+ prop: 'planCode',
|
|
|
+ label: '计划编号',
|
|
|
+ align: 'center',
|
|
|
+ showOverflowTooltip: true,
|
|
|
+ minWidth: 150
|
|
|
+ },
|
|
|
+ // 计划名称列
|
|
|
+ {
|
|
|
+ prop: 'planName',
|
|
|
+ label: '计划名称',
|
|
|
+ align: 'center',
|
|
|
+ showOverflowTooltip: true,
|
|
|
+ minWidth: 120
|
|
|
+ },
|
|
|
+ // 预计开始时间列
|
|
|
+ {
|
|
|
+ prop: 'planTimeStart',
|
|
|
+ label: '预计开始时间',
|
|
|
+ align: 'center',
|
|
|
+ showOverflowTooltip: true,
|
|
|
+ minWidth: 160
|
|
|
+ },
|
|
|
+ // 预计结束时间列
|
|
|
+ {
|
|
|
+ prop: 'planTimeEnd',
|
|
|
+ label: '预计结束时间',
|
|
|
+ align: 'center',
|
|
|
+ showOverflowTooltip: true,
|
|
|
+ minWidth: 160
|
|
|
+ },
|
|
|
+ // 开始时间列
|
|
|
+ {
|
|
|
+ prop: 'realStartTime',
|
|
|
+ label: '开始时间',
|
|
|
+ align: 'center',
|
|
|
+ showOverflowTooltip: true,
|
|
|
+ minWidth: 160
|
|
|
+ },
|
|
|
+ // 完成时间列
|
|
|
+ {
|
|
|
+ prop: 'realEndTime',
|
|
|
+ label: '完成时间',
|
|
|
+ align: 'center',
|
|
|
+ showOverflowTooltip: true,
|
|
|
+ minWidth: 160
|
|
|
+ },
|
|
|
+ // 负责部门列
|
|
|
+ {
|
|
|
+ prop: 'responsibleDeptName',
|
|
|
+ label: '负责部门',
|
|
|
+ align: 'center',
|
|
|
+ showOverflowTooltip: true,
|
|
|
+ minWidth: 120
|
|
|
+ },
|
|
|
+ // 负责人列
|
|
|
+ {
|
|
|
+ prop: 'responsiblePersonName',
|
|
|
+ label: '负责人',
|
|
|
+ align: 'center',
|
|
|
+ showOverflowTooltip: true,
|
|
|
+ minWidth: 120
|
|
|
+ },
|
|
|
+ // 车牌号列
|
|
|
+ {
|
|
|
+ prop: 'trakNumber',
|
|
|
+ label: '车牌号',
|
|
|
+ align: 'center',
|
|
|
+ showOverflowTooltip: true,
|
|
|
+ minWidth: 120
|
|
|
+ },
|
|
|
+ // 司机列
|
|
|
+ {
|
|
|
+ prop: 'driverName',
|
|
|
+ label: '司机',
|
|
|
+ align: 'center',
|
|
|
+ showOverflowTooltip: true,
|
|
|
+ minWidth: 120
|
|
|
+ },
|
|
|
+ // 司机电话列
|
|
|
+ {
|
|
|
+ prop: 'phone',
|
|
|
+ label: '司机电话',
|
|
|
+ align: 'center',
|
|
|
+ showOverflowTooltip: true,
|
|
|
+ minWidth: 120
|
|
|
+ },
|
|
|
+ // 创建时间列
|
|
|
+ {
|
|
|
+ prop: 'createTime',
|
|
|
+ label: '创建时间',
|
|
|
+ align: 'center',
|
|
|
+ showOverflowTooltip: true,
|
|
|
+ minWidth: 120
|
|
|
+ }
|
|
|
+ ];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 打开弹窗方法
|
|
|
+ open(type = 'afterSales') {
|
|
|
+ this.workOrderType = type;
|
|
|
+ this.visible = true;
|
|
|
+ this.reload();
|
|
|
+ },
|
|
|
+ // 获取故障等级字典方法
|
|
|
+ async getLevelCode(code) {
|
|
|
+ const res = await getByCode(code);
|
|
|
+ if (res?.code === '0') {
|
|
|
+ this.levelData = res.data.reduce((obj, el) => {
|
|
|
+ const key = Object.keys(el)[0];
|
|
|
+ obj[key] = Object.values(el)[0];
|
|
|
+ return obj;
|
|
|
+ }, {});
|
|
|
+ this.levelList = res.data.map((el) => ({
|
|
|
+ label: Object.values(el)[0],
|
|
|
+ value: Object.keys(el)[0]
|
|
|
+ }));
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 确认选中方法（传递单选数据）
|
|
|
+ handleConfirm() {
|
|
|
+ if (this.selectedRow) {
|
|
|
+ console.log('选中的运输工单数据：', this.selectedRow);
|
|
|
+ this.$emit('changeParent', this.selectedRow);
|
|
|
+ this.handleClose();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 关闭弹窗方法（重置单选状态）
|
|
|
+ handleClose() {
|
|
|
+ this.visible = false;
|
|
|
+ // 重置单选状态，避免下次打开残留选中
|
|
|
+ this.selectedRowId = null;
|
|
|
+ this.selectedRow = null;
|
|
|
+ this.$refs.table?.reload({ pageNum: 1 });
|
|
|
+ this.addOrEditDialogFlag = false;
|
|
|
+ },
|
|
|
+ // 表格数据源方法
|
|
|
+ datasource({ page, limit, where }) {
|
|
|
+ this.loading = true;
|
|
|
+ return logistictraklistnotePageListAPI({
|
|
|
+ pageNum: page,
|
|
|
+ size: limit,
|
|
|
+ ...where
|
|
|
+ }).finally(() => {
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 表格刷新方法
|
|
|
+ reload(where = {}) {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.table?.reload({ pageNum: 1, where });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 新增/编辑弹窗方法
|
|
|
+ handleAddOrEdit(row = {}, type) {
|
|
|
+ this.addOrEditDialogFlag = true;
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.addOrEditDialogRef.init(row, type);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 表格列变更方法
|
|
|
+ handleColumnChange() {
|
|
|
+ this.columnsVersion += 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+// 搜索框样式
|
|
|
+.seep-search {
|
|
|
+ margin-bottom: 16px;
|
|
|
+ ::v-deep .el-input__inner {
|
|
|
+ padding: 0 5px 0 10px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 底部按钮样式
|
|
|
+.btns {
|
|
|
+ text-align: center;
|
|
|
+ padding: 10px 0;
|
|
|
+ button:first-child {
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 表格样式
|
|
|
+::v-deep .ele-pro-table {
|
|
|
+ margin-top: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+// 表格工具栏样式
|
|
|
+::v-deep .ele-toolbar-form {
|
|
|
+ margin-bottom: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+// 单选框居中样式
|
|
|
+.radio-container {
|
|
|
+ text-align: center;
|
|
|
+ line-height: 1;
|
|
|
+}
|
|
|
+::v-deep .radio-container .el-radio {
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: middle;
|
|
|
+}
|
|
|
+</style>
|
hezhanp