| | |
| | | <template> |
| | | <div class="system-edit-user-container"> |
| | | <el-dialog :title="titles" v-model="isShowDialog" width="50%" draggable :fullscreen="full"> |
| | | <el-dialog :title="titles" v-model="isShowDialog" @close="resetForm(ruleFormRef)" width="50%" draggable :fullscreen="full"> |
| | | <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button> |
| | | <el-form ref="ruleFormRef" :rules="rules" :model="ruleForm" size="default" label-width="120px" :disabled="disabled"> |
| | | <el-row :gutter="35"> |
| | |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> |
| | | <el-form-item label="所属区域"> |
| | | <el-input v-model="ruleForm.areaId" placeholder="请选择" class="input-with-select"> |
| | | <template #append> |
| | | <el-button :icon="Search" @click="regionsDialog" /> |
| | | </template> |
| | | </el-input> |
| | | <el-form-item label="投用日期" prop="useDate"> |
| | | <el-date-picker v-model="ruleForm.useDate" type="datetime" class="w100" placeholder="选择日期时间" value-format="YYYY-MM-DD HH:mm:ss" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> |
| | |
| | | </el-col> |
| | | <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> |
| | | <el-form-item label="负责部门" prop="departmentId"> |
| | | <el-tree-select v-model="ruleForm.departmentId" :data="data" class="w100" placeholder="请选择" /> |
| | | <el-tree-select v-model="ruleForm.departmentId" :data="data" class="w100" :props="propse" placeholder="请选择" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> |
| | | <el-form-item label="物资分类" prop="classification"> |
| | | <el-select v-model="ruleForm.classification" class="w100" placeholder="请选择"> |
| | | <el-option label="事故气体吸收装置" value="事故气体吸收装置"></el-option> |
| | | <el-option label="通讯设施" value="通讯设施"></el-option> |
| | | <el-option label="交通运输工具" value="交通运输工具"></el-option> |
| | | <el-option label="照明装置" value="照明装置"></el-option> |
| | | <el-option label="防护器材" value="防护器材"></el-option> |
| | | <el-option label="其它" value="其它"></el-option> |
| | | <el-option label="事故气体吸收装置" value="1"></el-option> |
| | | <el-option label="通讯设施" value="2"></el-option> |
| | | <el-option label="交通运输工具" value="3"></el-option> |
| | | <el-option label="照明装置" value="4"></el-option> |
| | | <el-option label="防护器材" value="5"></el-option> |
| | | <el-option label="其它" value="6"></el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | |
| | | <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> |
| | | <el-form-item label="物资状态" prop="status"> |
| | | <el-select v-model="ruleForm.status" class="w100" placeholder="请选择"> |
| | | <el-option label="完好" value="完好"></el-option> |
| | | <el-option label="维修" value="维修"></el-option> |
| | | <el-option label="完好" value="1"></el-option> |
| | | <el-option label="维修" value="2"></el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> |
| | | <el-form-item label="检查周期月" prop="inspectPeiod"> |
| | | <el-input v-model.number="ruleForm.inspectPeiod" type="" maxlength="4" placeholder="请填写使用期限"></el-input> |
| | | <el-form-item label="检查周期月" prop="inspectPeriod"> |
| | | <el-input v-model.number="ruleForm.inspectPeriod" type="" maxlength="4" placeholder="请填写使用期限"></el-input> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> |
| | | <el-form-item label="投用日期" prop="useDate"> |
| | | <el-date-picker v-model="ruleForm.useDate" type="datetime" class="w100" placeholder="选择日期时间" value-format="YYYY-MM-DD HH:mm:ss" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> </el-col> |
| | | <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"> |
| | | <el-form-item label="使用说明"> |
| | | <el-input v-model="ruleForm.useExplain" type="textarea" placeholder="请填写使用说明"></el-input> |
| | |
| | | <!-- </el-form-item>--> |
| | | <!-- </el-col>--> |
| | | <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> |
| | | <el-form-item label="负责人"> |
| | | <el-input v-model="ruleForm.principalUserUid" placeholder="请选择" class="input-with-select"> |
| | | <el-form-item label="负责人" prop="principalUserName"> |
| | | <el-input v-model="ruleForm.principalUserName" placeholder="请选择" class="input-with-select"> |
| | | <template #append> |
| | | <el-button :icon="Search" @click="daiInpt" /> |
| | | </template> |
| | | </el-input> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"> |
| | | <el-form-item label="保养记录"> |
| | | <el-table :data="dataList" style="width: 100%" highlight-current-row> |
| | | <el-table-column label="保养结果" prop="maintainResult" width="170"> |
| | | <template slot-scope="scope"> |
| | | <el-select size="mini" v-model="dataList.maintainResult"> |
| | | <el-option value="正常" label="正常"></el-option> |
| | | <el-option value="异常" label="异常"></el-option> |
| | | </el-row> |
| | | <el-row> |
| | | <el-col :span="24"> |
| | | <el-form-item label="保养记录"> |
| | | <el-table :data="ruleForm.maintainList" highlight-current-row> |
| | | <el-table-column align="center" label="保养结果" prop="maintainResult"> |
| | | <template #default="scope"> |
| | | <el-select size="mini" disabled v-model="scope.row.maintainResult"> |
| | | <el-option label="正常" value="1"></el-option> |
| | | <el-option label="异常" value="2"></el-option> |
| | | </el-select> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="创建人" prop="userUid" width="170"></el-table-column> |
| | | <el-table-column label="创建时间" prop="maintainTime" width="170"></el-table-column> |
| | | <el-table-column align="center" label="创建人" prop="userName"></el-table-column> |
| | | <el-table-column align="center" label="创建时间" prop="maintainTime"></el-table-column> |
| | | </el-table> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row> |
| | | <el-col :span="24"> |
| | | <el-form-item label="检查记录"> |
| | | <el-table :data="ruleForm.inspectList" highlight-current-row> |
| | | <el-table-column align="center" label="检查结果" prop="maintainResult"> |
| | | <template #default="scope"> |
| | | <el-select size="mini" disabled v-model="scope.row.inspectResult"> |
| | | <el-option label="正常" value="1"></el-option> |
| | | <el-option label="异常" value="2"></el-option> |
| | | </el-select> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column align="center" label="创建人" prop="userName"></el-table-column> |
| | | <el-table-column align="center" label="创建时间" prop="inspectTime"></el-table-column> |
| | | </el-table> |
| | | </el-form-item> |
| | | </el-col> |
| | |
| | | </span> |
| | | </template> |
| | | </el-dialog> |
| | | <PersonInCharge ref="Shows" /> |
| | | <DailogSearchUser ref="Shows" @SearchUser="onUser"></DailogSearchUser> |
| | | <userSelections ref="userRef" /> |
| | | <RegionsCheckbox ref="openRef" /> |
| | | </div> |
| | |
| | | |
| | | <script lang="ts"> |
| | | import { reactive, ref, defineComponent } from 'vue'; |
| | | |
| | | import DailogSearchUser from '/@/components/DailogSearchUser/index.vue'; |
| | | import type { FormInstance, FormRules } from 'element-plus'; |
| | | import { ElMessage } from 'element-plus'; |
| | | |
| | |
| | | import PersonInCharge from '../component/personInCharge.vue'; |
| | | import RegionsCheckbox from '../component/regionsCheckbox.vue'; |
| | | import { emergencySuppliesApi } from '../../../../../api/emergencyResources'; |
| | | |
| | | import { goalManagementApi } from '/@/api/goalManagement'; |
| | | import { AnyAaaaRecord } from 'dns'; |
| | | export default defineComponent({ |
| | | name: 'openAdd', |
| | | components: { |
| | | PersonInCharge, |
| | | DailogSearchUser, |
| | | UserSelections, |
| | | RegionsCheckbox, |
| | | }, |
| | |
| | | useDate: '', |
| | | inspectDate: '', |
| | | nextInspectDate: '', |
| | | inspectPeiod: '', |
| | | inspectPeriod: '', |
| | | count: '', |
| | | usePeriod: '', |
| | | departmentId: '', |
| | | principalUserUid: '', |
| | | principalUserName:"", |
| | | status: '', |
| | | classification: '', |
| | | name: '', |
| | |
| | | const disabled = ref(); |
| | | // 打开弹窗 |
| | | const openDialog = (title: string, id: number, type: boolean) => { |
| | | department() |
| | | isShowDialog.value = true; |
| | | titles.value = title; |
| | | disabled.value = type; |
| | |
| | | .then((res) => { |
| | | if (res.data.code == 200) { |
| | | ruleForm.value = res.data.data; |
| | | userNames(res.data.data.maintainList) |
| | | userNames(res.data.data.inspectList) |
| | | } |
| | | }); |
| | | } |
| | | }; |
| | | const userNames=(data:AnyAaaaRecord)=>{ |
| | | for(let i=0;i<data.length;i++){ |
| | | let arr=[] |
| | | for(let s=0;s<data[i].userList.length;s++){ |
| | | arr.push(data[i].userList[s].userName) |
| | | } |
| | | |
| | | data[i].userName=arr.toString() |
| | | } |
| | | } |
| | | //日期选择器 |
| | | const value1 = ref(''); |
| | | // 可选择树 |
| | | const treeSelect = ref(); |
| | | const tree = [ |
| | | { |
| | | value: '1', |
| | | label: 'Level one 1', |
| | | children: [ |
| | | { |
| | | value: '11', |
| | | label: 'Level two 1-1', |
| | | children: [ |
| | | { |
| | | value: '111', |
| | | label: 'Level three 1-1-1', |
| | | }, |
| | | ], |
| | | }, |
| | | ], |
| | | }, |
| | | { |
| | | value: '2', |
| | | label: 'Level one 2', |
| | | children: [ |
| | | { |
| | | value: '21', |
| | | label: 'Level two 2-1', |
| | | children: [ |
| | | { |
| | | value: '211', |
| | | label: 'Level three 2-1-1', |
| | | }, |
| | | ], |
| | | }, |
| | | { |
| | | value: '22', |
| | | label: 'Level two 2-2', |
| | | children: [ |
| | | { |
| | | value: '221', |
| | | label: 'Level three 2-2-1', |
| | | }, |
| | | ], |
| | | }, |
| | | ], |
| | | }, |
| | | { |
| | | value: '3', |
| | | label: 'Level one 3', |
| | | children: [ |
| | | { |
| | | value: '31', |
| | | label: 'Level two 3-1', |
| | | children: [ |
| | | { |
| | | value: '311', |
| | | label: 'Level three 3-1-1', |
| | | }, |
| | | ], |
| | | }, |
| | | { |
| | | value: '32', |
| | | label: 'Level two 3-2', |
| | | children: [ |
| | | { |
| | | value: '321', |
| | | label: 'Level three 3-2-1', |
| | | }, |
| | | ], |
| | | }, |
| | | ], |
| | | }, |
| | | ]; |
| | | //部门树 |
| | | const department = () => { |
| | | goalManagementApi() |
| | | .getTreedepartment() |
| | | .then((res) => { |
| | | if (res.data.code == 200) { |
| | | data.value = res.data.data; |
| | | } else { |
| | | ElMessage.error(res.data.msg); |
| | | } |
| | | }); |
| | | }; |
| | | //定义树形下拉框 |
| | | const responsibleDepartment = ref(); |
| | | const data = [ |
| | | { |
| | | value: '1', |
| | | label: '广汇能源综合物流发展有限责任公司', |
| | | children: [ |
| | | { |
| | | value: 11, |
| | | label: '经营班子', |
| | | children: [], |
| | | }, |
| | | ], |
| | | }, |
| | | { |
| | | value: '2', |
| | | label: '生产运行部', |
| | | children: [ |
| | | { |
| | | value: '21', |
| | | label: '灌装一班', |
| | | children: [], |
| | | }, |
| | | { |
| | | value: '22', |
| | | label: '工艺四班', |
| | | children: [], |
| | | }, |
| | | ], |
| | | }, |
| | | { |
| | | value: '3', |
| | | label: '设备部', |
| | | children: [ |
| | | { |
| | | value: '31', |
| | | label: '仪表班', |
| | | children: [], |
| | | }, |
| | | { |
| | | value: '32', |
| | | label: '机修班', |
| | | children: [], |
| | | }, |
| | | ], |
| | | }, |
| | | ]; |
| | | const data = ref(); |
| | | const propse = { |
| | | label: 'depName', |
| | | children: 'children', |
| | | value: 'depId', |
| | | }; |
| | | // 必填项提示 |
| | | const rules = reactive<FormRules>({ |
| | | name: [ |
| | |
| | | { |
| | | required: true, |
| | | message: '生产日期不能为空', |
| | | trigger: 'change', |
| | | trigger: 'blur', |
| | | }, |
| | | ], |
| | | usePeriod: [ |
| | | { |
| | | required: true, |
| | | message: '使用期限不能为空', |
| | | trigger: 'change', |
| | | trigger: 'blur', |
| | | }, |
| | | { type: 'number', message: '请输入数字类型', trigger: 'change' }, |
| | | ], |
| | |
| | | trigger: 'change', |
| | | }, |
| | | ], |
| | | inspectPeiod: [ |
| | | inspectPeriod: [ |
| | | { |
| | | required: true, |
| | | message: '检查周期月不能为空', |
| | |
| | | { |
| | | required: true, |
| | | message: '投用日期不能为空', |
| | | trigger: 'change', |
| | | trigger: 'blur', |
| | | }, |
| | | ], |
| | | inspectDate: [ |
| | | { |
| | | required: true, |
| | | message: '检查日期不能为空', |
| | | trigger: 'change', |
| | | trigger: 'blur', |
| | | }, |
| | | ], |
| | | nextInspectDate: [ |
| | | { |
| | | required: true, |
| | | message: '下次检查日期不能为空', |
| | | trigger: 'change', |
| | | trigger: 'blur', |
| | | }, |
| | | ], |
| | | principalUserName:[], |
| | | }); |
| | | // 表单提交验证必填项 |
| | | const submitForm = async (title: string, formEl: FormInstance | undefined) => { |
| | |
| | | } |
| | | }); |
| | | formEl.resetFields(); |
| | | ruleForm.value = { |
| | | productionDate: '', |
| | | useDate: '', |
| | | inspectDate: '', |
| | | nextInspectDate: '', |
| | | inspectPeiod: '', |
| | | count: '', |
| | | usePeriod: '', |
| | | departmentId: '', |
| | | principalUserUid: '', |
| | | status: '', |
| | | classification: '', |
| | | name: '', |
| | | number: '', |
| | | model: '', |
| | | longitude: '', |
| | | latitude: '', |
| | | use: '', |
| | | areaId: null, |
| | | place: '', |
| | | useExplain: '', |
| | | }; |
| | | } |
| | | }; |
| | | const resetForm = (formEl: FormInstance | undefined) => { |
| | |
| | | if (!formEl) return; |
| | | formEl.resetFields(); |
| | | }; |
| | | // 应急队伍弹窗 |
| | | // 人名 |
| | | const Shows = ref(); |
| | | const daiInpt = () => { |
| | | Shows.value.openDailog(); |
| | |
| | | const openUser = () => { |
| | | userRef.value.openDialog(); |
| | | }; |
| | | const dataList = ref() |
| | | // const dataList = [ |
| | | // { |
| | | // maintainResult: '1', |
| | | // suppliesId: 'Tom', |
| | | // maintainTime: '2016-05-02', |
| | | // }, |
| | | // { |
| | | // maintainResult: '1', |
| | | // suppliesId: 'Tom', |
| | | // maintainTime: '2016-05-02', |
| | | // }, |
| | | // { |
| | | // maintainResult: '', |
| | | // suppliesId: 'Tom', |
| | | // maintainTime: '2016-05-02', |
| | | // }, |
| | | // { |
| | | // maintainResult: '', |
| | | // suppliesId: 'Tom', |
| | | // maintainTime: '2016-05-02', |
| | | // }, |
| | | // ]; |
| | | const dataList = ref(); |
| | | //全屏 |
| | | const full = ref(false); |
| | | const toggleFullscreen = () => { |
| | |
| | | full.value = false; |
| | | } |
| | | }; |
| | | const onUser = (e: any) => { |
| | | ruleForm.value.principalUserUid = e.uid; |
| | | ruleForm.value.principalUserName = e.realName; |
| | | }; |
| | | return { |
| | | onUser, |
| | | userNames, |
| | | openDialog, |
| | | isShowDialog, |
| | | responsibleDepartment, |
| | |
| | | ruleForm, |
| | | value1, |
| | | treeSelect, |
| | | tree, |
| | | daiInpt, |
| | | Shows, |
| | | ruleFormRef, |
| | |
| | | disabled, |
| | | emit, |
| | | dataList, |
| | | propse, |
| | | department |
| | | }; |
| | | }, |
| | | }); |