| | |
| | | :close-on-click-modal="false" |
| | | :destroy-on-close="true" |
| | | @close="cancel" |
| | | :before-close="handleBeforeClose" |
| | | > |
| | | <div class="add-edit-details"> |
| | | <div class="process"> |
| | | <div>{{ formParams.name }}}</div> |
| | | <div class="process" v-if="txtTitle !=='新建工单'"> |
| | | <div class="order_title">{{ formParams.name }}</div> |
| | | <div class="custom-steps-container"> |
| | | <!-- 标题行 --> |
| | | <div class="steps-titles" v-if="filters.status !== '0'"> |
| | | <div v-for="(record, index) in formParams.record_list" :class="{ active: record.user_id >= 0 }" :key="index" |
| | | class="step-title"> |
| | | <div class="steps-titles"> |
| | | <div class="step-title" v-for="(record, index) in formParams.record_list" :class="{ active: record.user_id >= 0 }" :key="index"> |
| | | {{ record.status_str }} |
| | | </div> |
| | | </div> |
| | | |
| | | <!-- Element Steps 组件 --> |
| | | <el-steps :active="formParams.active" align-center class="custom-steps" v-if="filters.status !== '0'"> |
| | | <el-steps :active="formParams.active" align-center class="custom-steps"> |
| | | <el-step v-for="(record, index) in formParams.record_list" :key="index"> |
| | | <template #description> |
| | | <span class="step-description" style="position: relative; display: inline-block"> |
| | |
| | | <el-row :gutter="20"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="工单名称" prop="name"> |
| | | <el-input v-model="formParams.name" placeholder="请输入工单名称" maxlength="100" show-word-limit></el-input> |
| | | <el-input v-model="formParams.name" placeholder="请输入工单名称" maxlength="100" show-word-limit :disabled="txtTitle === '审核工单' || txtTitle === '工单详情'"></el-input> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="6"> |
| | | <el-form-item label="关联航线" prop="file_id"> |
| | | <el-select v-model="formParams.file_id" placeholder="请选择航线" filterable @change="getFlyingNest"> |
| | | <el-select v-model="formParams.file_id" placeholder="请选择航线" filterable @change="getFlyingNest" :disabled="txtTitle === '审核工单' || txtTitle === '工单详情'"> |
| | | <el-option v-for="item in lineList" :key="item.wayline_id" :label="item.name" |
| | | :value="item.wayline_id" /> |
| | | </el-select> |
| | |
| | | </el-col> |
| | | <el-col :span="6"> |
| | | <el-form-item label="安全返航真高" prop="rth_altitude" class="safe-height"> |
| | | <el-input-number v-model="formParams.rth_altitude" :min="50" :max="500"></el-input-number> |
| | | <el-input-number v-model="formParams.rth_altitude" :min="50" :max="500" :disabled="txtTitle === '审核工单' || txtTitle === '工单详情'"></el-input-number> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="20"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="关联机巢" prop="device_sns"> |
| | | <el-select v-model="formParams.device_sns" placeholder="请选择机巢" multiple :disabled="!drone_sns.length"> |
| | | <el-select v-model="formParams.device_sns" placeholder="请选择机巢" multiple :disabled="(txtTitle === '审核工单' || txtTitle === '工单详情')"> |
| | | <el-option v-for="item in drone_sns" :key="item.device_sn" :label="item.nickname" :value="item.device_sn" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="关联算法" prop="ai_types"> |
| | | <el-select v-model="formParams.ai_types" placeholder="请选择关联算法" multiple> |
| | | <el-select v-model="formParams.ai_types" placeholder="请选择关联算法" multiple :disabled="txtTitle === '审核工单' || txtTitle === '工单详情'"> |
| | | <el-option v-for="item in aiTypeList" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey" /> |
| | | </el-select> |
| | | </el-form-item> |
| | |
| | | </el-row> |
| | | |
| | | <el-row :gutter="20"> |
| | | <el-col :span="12"> |
| | | <el-col :span="12" v-if="txtTitle === '新建工单'"> |
| | | <el-form-item label="工单内容" prop="content"> |
| | | <el-input type="textarea" v-model="formParams.content" rows="4" placeholder="请输入工单内容" maxlength="255" show-word-limit></el-input> |
| | | <el-input type="textarea" v-model="formParams.content" rows="4" placeholder="请输入工单内容" maxlength="255" show-word-limit :disabled="txtTitle === '审核工单' || txtTitle === '工单详情'"></el-input> |
| | | </el-form-item> |
| | | </el-col> |
| | | |
| | | <el-col :span="8"> |
| | | <el-col :span="12" prop="statusStr" v-else> |
| | | <el-form-item label="当前状态"> |
| | | {{ getOrderStatus(formParams.status) }} |
| | | </el-form-item> |
| | | </el-col> |
| | | |
| | | <el-col :span="7"> |
| | | <el-form-item label="周期频次" prop="date_range"> |
| | | <el-date-picker |
| | | <el-date-picker :disabled="txtTitle === '审核工单' || txtTitle === '工单详情'" |
| | | v-model="formParams.date_range" |
| | | type="daterange" |
| | | range-separator="至" |
| | |
| | | :disabled-date="disabledDate" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="4"> |
| | | <div class="week_pc"> |
| | | <div class="week_pc_one week-r"> |
| | | <el-select v-model="formParams.rep_fre_type" placeholder="请选择频次"> |
| | | <el-option v-for="item in weeks" :key="item" :label="item" :value="item" /> |
| | | </el-select> |
| | | </div> |
| | | <div class="week_pc_one"> |
| | | <el-time-picker style="width: 100px" v-model="formParams.deal_time" prop="deal_time" value-format="HH:mm" |
| | | :picker-options="{ |
| | | selectableRange: '00:00 - 23:59', |
| | | }" /> |
| | | </div> |
| | | </div> |
| | | <el-col :span="2"> |
| | | <el-select v-model="formParams.rep_fre_type" placeholder="请选择频次" :disabled="txtTitle === '审核工单' || txtTitle === '工单详情'"> |
| | | <el-option v-for="item in weeks" :key="item" :label="item" :value="item" /> |
| | | </el-select> |
| | | </el-col> |
| | | <el-col :span="3"> |
| | | <el-time-picker :style="{ width: pxToRem(140) }" |
| | | v-model="formParams.deal_time" |
| | | :disabled="txtTitle === '审核工单' || txtTitle === '工单详情'" |
| | | prop="deal_time" |
| | | value-format="HH:mm" |
| | | :picker-options="{ selectableRange: '00:00 - 23:59'}" /> |
| | | </el-col> |
| | | </el-row> |
| | | |
| | | <el-row :gutter="20" v-if="txtTitle === '审核工单' || txtTitle === '工单详情' || txtTitle === '工单编辑'"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="工单内容" prop="content"> |
| | | <el-input type="textarea" v-model="formParams.content" rows="4" placeholder="请输入工单内容" maxlength="255" |
| | | show-word-limit :disabled="txtTitle === '审核工单' || txtTitle === '工单详情'"></el-input> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | |
| | |
| | | <template #footer v-if="txtTitle === '新建工单'"> |
| | | <div class="dialog-footer"> |
| | | <el-button type="danger" @click="submitForm(1)" icon="el-icon-position">发起</el-button> |
| | | <el-button type="primary" @click="submitForm(0)" icon="el-icon-document-add">存草稿</el-button> |
| | | <!-- <el-button type="primary" @click="submitForm(0)" icon="el-icon-document-add">存草稿</el-button>--> |
| | | <el-button @click="cancel" icon="el-icon-circle-close">取消</el-button> |
| | | </div> |
| | | </template> |
| | |
| | | <el-button @click="cancel" icon="el-icon-circle-close">取消</el-button> |
| | | </div> |
| | | </template> |
| | | <template #footer v-if="txtTitle === '工单编辑'"> |
| | | <div class="dialog-footer"> |
| | | <el-button type="danger" |
| | | v-if="formParams.status == 0 || (formParams.status == 2 && userInfo.user_id === formParams.create_user)" |
| | | @click="submitForm(1)" icon="el-icon-position">发布 |
| | | </el-button> |
| | | <el-button @click="cancel" icon="el-icon-circle-close">取消</el-button> |
| | | </div> |
| | | </template> |
| | | </el-dialog> |
| | | </template> |
| | | |
| | | <script setup> |
| | | import { pxToRem, pxToRemNum } from '@/utils/rem' |
| | | import { ref, shallowRef, onMounted, computed } from 'vue'; |
| | | import { newGetWorkspacesPage } from '@/api/resource/wayline' |
| | | import { getDictionaryByCode } from '@/api/system/dictbiz' |
| | |
| | | }) |
| | | } |
| | | |
| | | function getOrderStatus (status) { |
| | | const statusTextMap = { |
| | | 0: '草稿', |
| | | 1: '待审核', |
| | | 2: '已驳回', |
| | | 3: '已通过' |
| | | } |
| | | return statusTextMap[status] || '未知状态' |
| | | } |
| | | |
| | | // 关联机巢 |
| | | const drone_sns = ref([]) |
| | | function getFlyingNest (waylineId) { |
| | |
| | | wayline_id: waylineId, |
| | | polygon |
| | | } |
| | | // 重置 |
| | | formParams.value.device_sns = [] |
| | | drone_sns.value = [] |
| | | getFlyingNestBy(params).then(res => { |
| | | drone_sns.value = res.data.data |
| | | initMapLine() |
| | |
| | | } |
| | | |
| | | // 监听txtTitle |
| | | watch(txtTitle, async (newVal, oldVal) => { |
| | | watch(isShowAddEditDetails, async (newVal, oldVal) => { |
| | | console.log('txtTitle 发生变化:', newVal, oldVal) |
| | | if (newVal === '工单审核') { |
| | | formParams.value = {} |
| | | if (txtTitle.value === '工单审核' || txtTitle.value === '工单详情' || txtTitle.value === '工单编辑') { |
| | | const response = await orderLogDetails(rowObj.value.id) |
| | | const data = response.data.data |
| | | formParams.value = { |
| | | ...data |
| | | } |
| | | console.log(formParams.value, '898789') |
| | | drone_sns.value = data.device_list |
| | | initMapLine(data.device_map_infos) |
| | | } |
| | | }, { |
| | | immediate: true // 立即执行一次 |
| | | }) |
| | | |
| | | function handleBeforeClose() { |
| | | cancel() |
| | | } |
| | | function cancel() { |
| | | formParams.value = {} |
| | | isShowAddEditDetails.value = false |
| | | emit('refresh'); |
| | | } |
| | |
| | | width: 180px !important; |
| | | } |
| | | } |
| | | .week_pc { |
| | | display: flex; |
| | | } |
| | | |
| | | .week_pc_one { |
| | | flex: 1; |
| | |
| | | width: 100% !important; |
| | | } |
| | | } |
| | | .process { |
| | | .order_title { |
| | | height: 30px; |
| | | line-height: 30px; |
| | | text-align: center; |
| | | font-size: 20px; |
| | | font-weight: bold; |
| | | color: #333; |
| | | } |
| | | .custom-steps-container { |
| | | width: 100%; |
| | | margin: 7px 0; |
| | | } |
| | | |
| | | .steps-titles { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | margin-bottom: 16px; |
| | | position: relative; |
| | | } |
| | | |
| | | .step-title { |
| | | text-align: center; |
| | | flex: 1; |
| | | font-size: 16px; |
| | | color: #999; |
| | | position: relative; |
| | | padding-bottom: 10px; |
| | | } |
| | | |
| | | .step-title.active { |
| | | color: #409eff; |
| | | font-weight: bold; |
| | | } |
| | | |
| | | .custom-steps { |
| | | margin-top: -20px; |
| | | /* 向上移动与标题重叠 */ |
| | | } |
| | | |
| | | .el-step__head { |
| | | margin-top: 0; |
| | | } |
| | | |
| | | .el-step__description { |
| | | margin-top: 8px; |
| | | padding: 0 20px; |
| | | } |
| | | |
| | | .step-description { |
| | | font-size: 14px; |
| | | color: #666; |
| | | line-height: 1.5; |
| | | } |
| | | } |
| | | } |
| | | </style> |