对接

shj

2022-08-06 d6b4708cede4ae7a5e06d5fb10271d4ea1132986

对接

 src/components/emergencySupplies/index.vue

@@ -21,15 +21,14 @@
            </el-form-item>
          </el-form>
        </el-row>
        <el-table :data="tableData" style="width: 100%;margin-top:20px" @cell-click="radio">
        <el-table :data="tableData" style="width: 100%;margin-top:20px">
          <el-table-column width="55">
            <template #default="scope">
              <el-radio-group v-model="radio1">
                <el-radio :label="scope.row" size="large">{{ null }}</el-radio>
                <el-radio :label="scope.row" @click="radio(scope.row)" size="large">{{ null }}</el-radio>
              </el-radio-group>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="date" label="id" />
          <el-table-column align="center" prop="name" label="物资名称"/>
        </el-table>
        <div class="pages">
@@ -39,8 +38,8 @@
              :page-sizes="[10, 20, 30]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="onHandleSizeChange"
              @current-change="onHandleCurrentChange"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
          />
        </div>
      </el-col>

 src/views/contingencyManagement/emergencyResources/emergencyMaterialsInspection/component/openAdd.vue

@@ -1,287 +1,280 @@
<template>
  <div class="system-edit-user-container">
    <el-dialog
        :title="titles"
        v-model="isShowDialog"
        width="769px"
        draggable
        :fullscreen="full"
    >
      <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
      <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          size="default"
          label-width="120px"
          :disabled="disabled"
      >
        <el-row :gutter="35">
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="应急物资" prop="suppliesId">
              <el-input
                  v-model="ruleForm.suppliesId"
                  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="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="检查结果" prop="inspectResult">
              <el-select v-model="ruleForm.inspectResult" class="w100" placeholder="请选择">
                <el-option label="正常" value="正常"></el-option>
                <el-option label="异常" value="异常"></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="userUid">
              <el-input
                  v-model="ruleForm.userUid"
                  placeholder="请选择"
                  class="input-with-select"
              >
                <template #append>
                  <el-button :icon="Search" @click="openUser" />
                </template>
              </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="inspectTime">
              <el-date-picker
                  class="w100"
                  v-model="ruleForm.inspectTime"
                  type="datetime"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  placeholder="选择日期时间"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
    <div class="system-edit-user-container">
        <el-dialog :title="titles" @close="resetForm(ruleFormRef)" v-model="isShowDialog" width="50%" draggable :fullscreen="full">
            <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
            <el-form ref="ruleFormRef" :disabled="titles=='查看应急物资检查'?true:false" :rules="rules" :model="ruleForm" size="default" label-width="120px">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="应急物资" prop="suppliesName">
                            <el-input v-model="ruleForm.suppliesName" 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="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="检查结果" prop="inspectResult">
                            <el-select v-model="ruleForm.inspectResult" class="w100" placeholder="请选择">
                                <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="userName">
                            <el-input v-model="ruleForm.userName" placeholder="请选择" class="input-with-select">
                                <template #append>
                                    <el-button :icon="Search" @click="openUser(0)" />
                                </template>
                            </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="inspectTime">
                            <el-date-picker
                                class="w100"
                                v-model="ruleForm.inspectTime"
                                type="datetime"
                                value-format="YYYY-MM-DD HH:mm:ss"
                                placeholder="选择日期时间"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="resetForm(ruleFormRef)" size="default">关闭</el-button>
          <el-button size="default" type="primary" v-if="disabled == true ? false : true" @click="submitForm(titles, ruleFormRef)">确定</el-button>
                    <el-button size="default" type="primary" v-if="titles=='查看应急物资检查'?false:true" @click="submitForm(titles, ruleFormRef)">确定</el-button>
                </span>
      </template>
    </el-dialog>
    <EmergencySupplies ref="showRef" @SearchUser="onUser"/>
    <userSelections ref="userRef"/>
  </div>
            </template>
        </el-dialog>
        <EmergencySupplies ref="showRef" @SearchUser="onUser" />
        <DailogSearchUser ref="userRef" @SearchUser="onUsers" />
    </div>
</template>

<script lang="ts">
import {
  ref,
  defineComponent
} from 'vue';
import { ref, defineComponent, reactive } from 'vue';

import type {
  FormInstance,
  // FormRules,
} from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus';
import { ElMessage } from 'element-plus';
import {
  Search,
  FullScreen,
} from '@element-plus/icons-vue'
import EmergencySupplies from '/@/components/emergencySupplies/index.vue'
import UserSelections from "/@/components/userSelections/index.vue"
import {emergencyMaterialsInspectionApi} from "/@/api/emergencyMaterialsInspection";
import {maintenanceEmergencyMaterialsApi} from "/@/api/maintenanceEmergencyMaterials";
import DailogSearchUser from '/@/components/DailogSearchUser/index.vue';
import { Search, FullScreen } from '@element-plus/icons-vue';
import EmergencySupplies from '/@/components/emergencySupplies/index.vue';
import UserSelections from '/@/components/userSelections/index.vue';
import { emergencyMaterialsInspectionApi } from '/@/api/emergencyMaterialsInspection';
import { maintenanceEmergencyMaterialsApi } from '/@/api/maintenanceEmergencyMaterials';

export default defineComponent({
  name: 'openAdd',
  components: {
    UserSelections,
    EmergencySupplies,
  },
  setup(props, { emit }) {
    const isShowDialog = ref(false)
    name: 'openAdd',
    components: {
        DailogSearchUser,
        EmergencySupplies,
    },
    setup(props, { emit }) {
        const isShowDialog = ref(false);

    const ruleFormRef = ref<FormInstance>()
    //定义表单
    const ruleForm = ref ({
      suppliesId: '', // 物资ID
      inspectResult: '', //检查结果
      inspectTime: '', // 创建时间
      userList:[
        {
          userUid: ''
        },
        {
          userUid: ''
        }
      ]
    });
    const titles = ref();
    const disabled = ref();
    // 打开弹窗
    const openDialog = (title: string, id: number, type: boolean) => {
      isShowDialog.value = true;
      titles.value = title;
      disabled.value = type;
      if (title == '查看应急物资检查' || title == '修改应急物资检查') {
        emergencyMaterialsInspectionApi()
            .seeEmergencyMaterialsInspection(id)
            .then((res) => {
              if (res.data.code == 200) {
                ruleForm.value = res.data.data;
              }
            });
      }
    };
    //日期选择器
    const value1 = ref('')
    // 表单提交验证必填项
    const submitForm = async (title: string, formEl: FormInstance | undefined) => {
      if (title == '新建应急物资检查') {
        if (!formEl) return;
        await formEl.validate((valid, fields) => {
          if (valid) {
            isShowDialog.value = false;
            emergencyMaterialsInspectionApi()
                .addEmergencyMaterialsInspection(ruleForm.value)
                .then((res) => {
                  if (res.data.code == 200) {
                    ElMessage({
                      showClose: true,
                      message: res.data.msg,
                      type: 'success',
                    });
                    emit('myAdd', true);
                  } else {
                    ElMessage({
                      showClose: true,
                      message: res.data.msg,
                      type: 'error',
                    });
                    emit('myAdd', true);
                  }
                  formEl.resetFields();
                });
          } else {
            console.log('error submit!', fields);
          }
        });
      }
      else if (title == '修改应急物资检查') {
        if (!formEl) return;
        await formEl.validate((valid, fields) => {
          if (valid) {
            isShowDialog.value = false;
            emergencyMaterialsInspectionApi()
                .editEmergencyMaterialsInspection(ruleForm.value)
                .then((res) => {
                  if (res.data.code == 200) {
                    ElMessage({
                      showClose: true,
                      message: '修改成功',
                      type: 'success',
                    });
                    emit('myAdd', true);
                  } else {
                    ElMessage({
                      showClose: true,
                      message: res.data.msg,
                      type: 'error',
                    });
                    emit('myAdd', true);
                  }
                  formEl.resetFields();
                });
          } else {
            console.log('error submit!', fields);
          }
        });
        formEl.resetFields();
        ruleForm.value = {
          suppliesId: '', // 物资ID
          inspectResult: '', //检查结果
          inspectTime: '', // 创建时间
          userList:[
            {
              userUid: ''
            },
            {
              userUid: ''
            }
          ]
        }
      }
    }
    const resetForm = (formEl: FormInstance | undefined) => {
      isShowDialog.value = false;
      if (!formEl) return;
      formEl.resetFields();
    };
    // 应急物资弹窗
    const showRef=ref()
    const daiInpt=()=>{
      showRef.value.openDailog()
    }
    const onUser = (e:any) => {
      ruleForm.value.suppliesId=e.id
    };
    // 编写人弹窗
    const userRef = ref();
    const openUser = () => {
      userRef.value.openDialog();
    };
    //全屏
    const full = ref(false);
    const toggleFullscreen = () => {
      if (full.value == false) {
        full.value = true;
      } else {
        full.value = false;
      }
    };
    return {
      openDialog,
      isShowDialog,
      Search,
      ruleForm,
      value1,
      daiInpt,
      showRef,
      ruleFormRef,
      submitForm,
      openUser,
      userRef,
      resetForm,
      toggleFullscreen,
      FullScreen,
      full,
      titles,
      disabled,
      emit,
      onUser,
    };
  },
        const ruleFormRef = ref<FormInstance>();
        //定义表单
        const ruleForm = ref({
            suppliesId: '', // 物资ID
            inspectResult: '', //检查结果
            inspectTime: '', // 创建时间
            userList: [],
        });
        const titles = ref();
        const disableds = ref();
        // 打开弹窗
        const openDialog = (title: string, id: number) => {
            isShowDialog.value = true;
            titles.value = title;
            if (title == '查看应急物资检查' || title == '修改应急物资检查') {
                emergencyMaterialsInspectionApi()
                    .seeEmergencyMaterialsInspection(id)
                    .then((res) => {
                        if (res.data.code == 200) {
                            ruleForm.value = res.data.data;
                            let arr = [];
                            for (let i = 0; i < ruleForm.value.userList.length; i++) {
                                arr.push(ruleForm.value.userList[i].userName);
                            }
                            ruleForm.value.userName = arr.toString();
                        }
                    });
            }
        };
        //日期选择器
        const value1 = ref('');
        const rules = reactive<FormRules>({
            nameTitle: [],
            inspectResult: [
                {
                    required: true,
                    message: '保养结果不能为空',
                    trigger: 'change',
                },
            ],
            userName: [
                {
                    required: true,
                    message: '创建人不能为空',
                    trigger: 'change',
                },
            ],
            inspectTime: [
                {
                    required: true,
                    message: '创建时间不能为空',
                    trigger: 'blur',
                },
            ],
        });
        // 表单提交验证必填项
        const submitForm = async (title: string, formEl: FormInstance | undefined) => {
            if (title == '新建应急物资检查') {
                if (!formEl) return;
                await formEl.validate((valid, fields) => {
                    if (valid) {
                        isShowDialog.value = false;
                        emergencyMaterialsInspectionApi()
                            .addEmergencyMaterialsInspection(ruleForm.value)
                            .then((res) => {
                                if (res.data.code == 200) {
                                    ElMessage({
                                        showClose: true,
                                        message: res.data.msg,
                                        type: 'success',
                                    });
                                    emit('myAdd', true);
                                } else {
                                    ElMessage({
                                        showClose: true,
                                        message: res.data.msg,
                                        type: 'error',
                                    });
                                    emit('myAdd', true);
                                }
                                formEl.resetFields();
                            });
                    } else {
                        console.log('error submit!', fields);
                    }
                });
            } else if (title == '修改应急物资检查') {
                if (!formEl) return;
                await formEl.validate((valid, fields) => {
                    if (valid) {
                        isShowDialog.value = false;
                        emergencyMaterialsInspectionApi()
                            .editEmergencyMaterialsInspection(ruleForm.value)
                            .then((res) => {
                                if (res.data.code == 200) {
                                    ElMessage({
                                        showClose: true,
                                        message: '修改成功',
                                        type: 'success',
                                    });
                                    emit('myAdd', true);
                                } else {
                                    ElMessage({
                                        showClose: true,
                                        message: res.data.msg,
                                        type: 'error',
                                    });
                                    emit('myAdd', true);
                                }
                                formEl.resetFields();
                            });
                    } else {
                        console.log('error submit!', fields);
                    }
                });
                formEl.resetFields();
            }
        };
        const resetForm = (formEl: FormInstance | undefined) => {
            isShowDialog.value = false;
            if (!formEl) return;
            formEl.resetFields();
        };
        // 应急物资弹窗
        const showRef = ref();
        const daiInpt = () => {
            showRef.value.openDailog();
        };
        const onUser = (e: any) => {
            ruleForm.value.suppliesId = e.id;
            ruleForm.value.suppliesName = e.name;
        };
        // 编写人弹窗
        const userRef = ref();
        const openUser = (data: any) => {
            userRef.value.openDailog(data);
        };
        const onUsers = (val: any) => {
            let arr = [];
            for (let i = 0; i < val.length; i++) {
                arr.push(val[i].realName);
                ruleForm.value.userList.push({
                    userUid: val[i].uid,
                    userName: val[i].realName,
                });
            }
            ruleForm.value.userName = arr.toString();
        };
        //全屏
        const full = ref(false);
        const toggleFullscreen = () => {
            if (full.value == false) {
                full.value = true;
            } else {
                full.value = false;
            }
        };
        return {
            openDialog,
            isShowDialog,
            Search,
            ruleForm,
            value1,
            onUsers,
            daiInpt,
            showRef,
            ruleFormRef,
            submitForm,
            openUser,
            rules,
            userRef,
            resetForm,
            toggleFullscreen,
            FullScreen,
            full,
            titles,
            disableds,
            emit,
            onUser,
        };
    },
});
</script>
<style scoped lang="scss">
.textarea{
  height: 168px!important;
.textarea {
    height: 168px !important;
}
.textarea ::v-deep .el-textarea__inner{
  height: 168px!important;
.textarea ::v-deep .el-textarea__inner {
    height: 168px !important;
}
::v-deep .el-table__cell {
  font-weight: 400;
    font-weight: 400;
}
.el-divider--horizontal{
  height: 0;
  margin: 0;
  border-top: transparent;
.el-divider--horizontal {
    height: 0;
    margin: 0;
    border-top: transparent;
}
.el-select{
  width: 100%;
.el-select {
    width: 100%;
}
</style>

 src/views/contingencyManagement/emergencyResources/emergencyMaterialsInspection/index.vue

@@ -1,422 +1,387 @@
<template>
  <div class="system-user-container">
    <el-card shadow="hover">
      <div class="system-user-search mb15">
        <el-form
            size="default"
            label-width="80px"
            :inline="true"
        >
          <el-form-item prop="telephone" >
            <el-input
                v-model="listQuery.searchParams.suppliesId"
                placeholder="请选择应急物资"
                class="input-with-select"
            >
              <template #append>
                <el-button :icon="Search" @click="daiInpt"/>
              </template>
            </el-input>
          </el-form-item>
          <el-button size="default" type="primary" class="ml10" @click="onSubmit">
            查询
          </el-button>
          <el-button size="default" class="ml10" @click="submitReset">
            重置
          </el-button>
        </el-form>
      </div>
      <div class="button_Line">
        <div class="button_Left">
          <el-button size="default" type="primary"  @click="onOpenAdd">
            <el-icon>
              <Plus />
            </el-icon>新建
          </el-button>
          <el-button size="default" type="warning" plain :disabled="warning">
            <el-icon>
              <Edit />
            </el-icon>修改
          </el-button>
          <el-button size="default" type="danger" plain @click="onDeleteAll" :disabled="danger">
            <el-icon>
              <Delete />
            </el-icon>删除
          </el-button>
        </div>
        <div class="button_Right">
          <el-button>
            <el-icon>
              <Download />
            </el-icon>
          </el-button>
          <el-button>
            <el-icon>
              <Refresh />
            </el-icon>
          </el-button>
        </div>
      </div>
      <el-table
          :data="tableData"
          style="width: 100%"
          ref="multipleTableRef"
          @selection-change="handleSelectionChange"
      >
        <el-table-column
            type="selection"
            width="55"
        />
        <el-table-column prop="suppliesId" label="物资名称" min-width="120" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="inspectResult" label="维修结果"  min-width="120" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="inspectTime" label="维修日期"  min-width="120" show-overflow-tooltip sortable></el-table-column>
        <el-table-column label="操作" width="200" align="center" fixed="right">
          <template #default="scope">
            <el-button size="small" text type="primary" @click="onEdit(scope.row.id)">
              <el-icon style="margin-right: 5px;">
                <View />
              </el-icon>查看
            </el-button>
            <el-button size="small" text type="primary" @click="onEdit('修改',scope.row.id)">
              <el-icon style="margin-right: 5px">
                <EditPen /> </el-icon
              >修改
            </el-button>
            <el-button size="small" text type="primary" @click="onRowDel(scope.row.id)">
              <el-icon>
                <Delete />
              </el-icon>删除
            </el-button>
          </template>
    <div class="system-user-container">
        <el-card shadow="hover">
            <div class="system-user-search mb15">
                <el-form size="default" label-width="80px" :inline="true">
                    <el-form-item prop="telephone">
                        <el-input v-model="listQuery.searchParams.suppliesName" placeholder="请选择应急物资" class="input-with-select">
                            <template #append>
                                <el-button :icon="Search" @click="daiInpt" />
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-button size="default" type="primary" class="ml10" @click="onSubmit"> 查询 </el-button>
                    <el-button size="default" class="ml10" @click="submitReset"> 重置 </el-button>
                </el-form>
            </div>
            <div class="button_Line">
                <div class="button_Left">
                    <el-button size="default" type="primary" @click="onOpenAdd">
                        <el-icon> <Plus /> </el-icon>新建
                    </el-button>
                    <el-button size="default" type="warning" plain :disabled="warning">
                        <el-icon> <Edit /> </el-icon>修改
                    </el-button>
                    <el-button size="default" type="danger" plain @click="onDeleteAll" :disabled="danger">
                        <el-icon> <Delete /> </el-icon>删除
                    </el-button>
                </div>
                <div class="button_Right">
                    <el-button>
                        <el-icon>
                            <Download />
                        </el-icon>
                    </el-button>
                    <el-button>
                        <el-icon>
                            <Refresh />
                        </el-icon>
                    </el-button>
                </div>
            </div>
            <el-table :data="tableData" style="width: 100%" ref="multipleTableRef" @selection-change="handleSelectionChange">
                <el-table-column align="center" type="selection" width="55" />
                <el-table-column align="center" prop="suppliesName" label="物资名称" min-width="120" show-overflow-tooltip sortable></el-table-column>
                <el-table-column align="center" label="维修结果" min-width="120" show-overflow-tooltip sortable>
              <template #default="scope">
                        <span v-if="scope.row.inspectResult == 1">正常</span>
                        <span v-if="scope.row.inspectResult == 2">异常</span>
                    </template>
        </el-table-column>
      </el-table>
      <div class="pages">
        <el-pagination
            v-if="tableData.length == 0 ? false : true"
            v-model:currentPage="pageIndex"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 30]"
            :pager-count="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <EmergencySupplies ref="showRef" @SearchUser="onUser"/>
    <upData ref="upShow"></upData>
    <OpenAdd ref="addRef" @myAdd="onMyAdd" />
  </div>
                <el-table-column align="center" prop="inspectTime" label="维修日期" min-width="120" show-overflow-tooltip sortable></el-table-column>
                <el-table-column label="操作" width="200" align="center" fixed="right">
                    <template #default="scope">
                        <el-button size="small" text type="primary" @click="onEdit('查看',scope.row.id)">
                            <el-icon style="margin-right: 5px"> <View /> </el-icon>查看
                        </el-button>
                        <el-button size="small" text type="primary" @click="onEdit('修改', scope.row.id)">
                            <el-icon style="margin-right: 5px"> <EditPen /> </el-icon>修改
                        </el-button>
                        <el-button size="small" text type="primary" @click="onRowDel(scope.row.id)">
                            <el-icon> <Delete /> </el-icon>删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pages">
                <el-pagination
                    v-if="tableData.length == 0 ? false : true"
                    v-model:currentPage="pageIndex"
                    v-model:page-size="pageSize"
                    :page-sizes="[10, 20, 30]"
                    :pager-count="5"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            </div>
        </el-card>
        <EmergencySupplies ref="showRef" @SearchUser="onUser" />
        <upData ref="upShow"></upData>
        <OpenAdd ref="addRef" @myAdd="onMyAdd" />
    </div>
</template>

<script lang="ts">
import {
  // toRefs,
  reactive,
  onMounted,
  ref,
  defineComponent
    // toRefs,
    reactive,
    onMounted,
    ref,
    defineComponent,
} from 'vue';
import {
  ElMessageBox,
  ElMessage,
  // ElTable,
    ElMessageBox,
    ElMessage,
    // ElTable,
} from 'element-plus';
import {
  Plus,
  Search,
  Delete,
  Edit,
  Download,
  Refresh,
  View,
  EditPen,
} from '@element-plus/icons-vue'
import { Plus, Search, Delete, Edit, Download, Refresh, View, EditPen } from '@element-plus/icons-vue';
import UpData from '/@/views/contingencyManagement/panManagement/component/upData.vue';
import EmergencySupplies from '/@/components/emergencySupplies/index.vue'
import EmergencySupplies from '/@/components/emergencySupplies/index.vue';
import OpenAdd from '/@/views/contingencyManagement/emergencyResources/emergencyMaterialsInspection/component/openAdd.vue';
import {emergencyMaterialsInspectionApi} from "/@/api/emergencyMaterialsInspection";
import { emergencyMaterialsInspectionApi } from '/@/api/emergencyMaterialsInspection';

export default defineComponent({
  name: 'index',
  components: {
    View,
    OpenAdd,
    EditPen,
    Plus,
    Edit,
    Delete,
    EmergencySupplies,
    Download,
    Refresh,
    UpData
  },
  setup() {
    //定义表单
    const listQuery = reactive ({
      pageIndex: 1,
      pageSize: 10,
      searchParams: {
        suppliesId: '',
      },
    });
    // 定义表格数据
    const tableData = ref([]);
    // 搜索按钮
    const onSubmit = async () => {
      let res = await emergencyMaterialsInspectionApi().getEmergencyMaterialsInspectionList(listQuery)
      if (res.data.code == 200) {
        tableData.value = res.data.data;
        pageIndex.value = res.data.pageIndex;
        pageSize.value = res.data.pageSize;
        total.value = res.data.total;
      } else {
        ElMessage({
          showClose: true,
          message: res.data.msg,
          type: 'error',
        });
      }
    }
    // 重置
    const submitReset = () => {
      listQuery.searchParams.suppliesId = '';
      onSubmit();
    };
    const warning = ref(true);
    const danger = ref(true);
    const deletAll = ref();
    const handleSelectionChange = (val: any) => {
      let valId = JSON.parse(JSON.stringify(val));
      let arr = [];
      for (let i = 0; i < valId.length; i++) {
        arr.push(valId[i].id);
      }
      deletAll.value = arr;
      if (val.length == 1) {
        warning.value = false;
        danger.value = false;
      } else if (val.length == 0) {
        warning.value = true;
        danger.value = true;
      } else {
        warning.value = true;
        danger.value = false;
      }
    };
    // 打开新建用户弹窗
    const addRef = ref();
    const onOpenAdd = () => {
      addRef.value.openDialog('新建应急物资检查',false);
    };
    // 新增后刷新
    const onMyAdd = (e: boolean) => {
      if (e) {
        onSubmit();
      } else {
        onSubmit();
      }
    };
    // 打开修改用户弹窗
    const onEdit = (val: string, row: object) => {
      if (val == '详情') {
        addRef.value.openDialog('查看应急物资检查',row,true);
      } else {
        addRef.value.openDialog('修改应急物资检查',row,false);
      }
    };
    // 删除
    const onRowDel = (id: number) => {
      let arr = [];
      arr.push(id)
      ElMessageBox.confirm('确定删除所选项吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
          .then(() => {
            emergencyMaterialsInspectionApi()
                .deleteEmergencyMaterialsInspection(arr)
                .then((res) => {
                  if (res.data.code == 200) {
                    ElMessage({
                      showClose: true,
                      message: res.data.msg,
                      type: 'success',
                    });
                    onSubmit();
                  } else {
                    ElMessage({
                      showClose: true,
                      message: res.data.msg,
                      type: 'error',
                    });
                    onSubmit();
                  }
                });
          })
          .catch(() => {});
    };
    // 多选删除
    const onDeleteAll = () => {
      ElMessageBox.confirm('确定删除所选项吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
          .then(() => {
            emergencyMaterialsInspectionApi()
                .deleteEmergencyMaterialsInspection(deletAll.value)
                .then((res) => {
                  if (res.data.code == 200) {
                    ElMessage({
                      showClose: true,
                      message: res.data.msg,
                      type: 'success',
                    });
                    onSubmit();
                  } else {
                    ElMessage({
                      showClose: true,
                      message: res.data.msg,
                      type: 'error',
                    });
                    onSubmit();
                  }
                });
          })
          .catch(() => {});
    };
    // 上传
    const upShow=ref()
    const upButton=()=>{
      upShow.value.openDialog()
    }
    name: 'index',
    components: {
        View,
        OpenAdd,
        EditPen,
        Plus,
        Edit,
        Delete,
        EmergencySupplies,
        Download,
        Refresh,
        UpData,
    },
    setup() {
        //定义表单
        const listQuery = reactive({
            pageIndex: 1,
            pageSize: 10,
            searchParams: {
                suppliesId: '',
            },
        });
        // 定义表格数据
        const tableData = ref([]);
        // 搜索按钮
        const onSubmit = async () => {
            let res = await emergencyMaterialsInspectionApi().getEmergencyMaterialsInspectionList(listQuery);
            if (res.data.code == 200) {
                tableData.value = res.data.data;
                pageIndex.value = res.data.pageIndex;
                pageSize.value = res.data.pageSize;
                total.value = res.data.total;
            } else {
                ElMessage({
                    showClose: true,
                    message: res.data.msg,
                    type: 'error',
                });
            }
        };
        // 重置
        const submitReset = () => {
            listQuery.searchParams.suppliesId = '';
            onSubmit();
        };
        const warning = ref(true);
        const danger = ref(true);
        const deletAll = ref();
        const handleSelectionChange = (val: any) => {
            let valId = JSON.parse(JSON.stringify(val));
            let arr = [];
            for (let i = 0; i < valId.length; i++) {
                arr.push(valId[i].id);
            }
            deletAll.value = arr;
            if (val.length == 1) {
                warning.value = false;
                danger.value = false;
            } else if (val.length == 0) {
                warning.value = true;
                danger.value = true;
            } else {
                warning.value = true;
                danger.value = false;
            }
        };
        // 打开新建用户弹窗
        const addRef = ref();
        const onOpenAdd = () => {
            addRef.value.openDialog('新建应急物资检查');
        };
        // 新增后刷新
        const onMyAdd = (e: boolean) => {
            if (e) {
                onSubmit();
            } else {
                onSubmit();
            }
        };
        // 打开修改用户弹窗
        const onEdit = (val: string, row: object) => {
            if (val == '查看') {
                addRef.value.openDialog('查看应急物资检查', row);
            } else {
                addRef.value.openDialog('修改应急物资检查', row);
            }
        };
        // 删除
        const onRowDel = (id: number) => {
            let arr = [];
            arr.push(id);
            ElMessageBox.confirm('确定删除所选项吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    emergencyMaterialsInspectionApi()
                        .deleteEmergencyMaterialsInspection(arr)
                        .then((res) => {
                            if (res.data.code == 200) {
                                ElMessage({
                                    showClose: true,
                                    message: res.data.msg,
                                    type: 'success',
                                });
                                onSubmit();
                            } else {
                                ElMessage({
                                    showClose: true,
                                    message: res.data.msg,
                                    type: 'error',
                                });
                                onSubmit();
                            }
                        });
                })
                .catch(() => {});
        };
        // 多选删除
        const onDeleteAll = () => {
            ElMessageBox.confirm('确定删除所选项吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    emergencyMaterialsInspectionApi()
                        .deleteEmergencyMaterialsInspection(deletAll.value)
                        .then((res) => {
                            if (res.data.code == 200) {
                                ElMessage({
                                    showClose: true,
                                    message: res.data.msg,
                                    type: 'success',
                                });
                                onSubmit();
                            } else {
                                ElMessage({
                                    showClose: true,
                                    message: res.data.msg,
                                    type: 'error',
                                });
                                onSubmit();
                            }
                        });
                })
                .catch(() => {});
        };
        // 上传
        const upShow = ref();
        const upButton = () => {
            upShow.value.openDialog();
        };

    // 应急物资弹窗
    const showRef=ref()
    const daiInpt=()=>{
      showRef.value.openDailog()
    }
    const onUser = (e:any) => {
      listQuery.searchParams.suppliesId=e.id
    };
    // 分页
    const pageIndex = ref();
    const pageSize = ref();
    const total = ref();
    // 分页改变
    const handleSizeChange = (val: number) => {
      listQuery.pageSize = val;
      onSubmit();
    };
    // 分页未改变
    const handleCurrentChange = (val: number) => {
      listQuery.pageIndex = val;
      onSubmit();
    };
    // 页面加载时
    onMounted(() => {
      onSubmit();
    });
    return {
      upButton,
      upShow,
      Edit,
      onRowDel,
      pageIndex,
      pageSize,
      handleSizeChange,
      handleCurrentChange,
      Search,
      daiInpt,
      showRef,
      onOpenAdd,  //新增
      addRef,
      onSubmit,
      View,
      submitReset,
      tableData,
      onMyAdd,
      onEdit,
      onDeleteAll,
      handleSelectionChange,
      listQuery,
      warning,
      danger,
      total,
      onUser,
    };
  },
        // 应急物资弹窗
        const showRef = ref();
        const daiInpt = () => {
            showRef.value.openDailog();
        };
        const onUser = (e: any) => {
            listQuery.searchParams.suppliesId = e.id;
            listQuery.searchParams.suppliesName=e.name
        };
        // 分页
        const pageIndex = ref();
        const pageSize = ref();
        const total = ref();
        // 分页改变
        const handleSizeChange = (val: number) => {
            listQuery.pageSize = val;
            onSubmit();
        };
        // 分页未改变
        const handleCurrentChange = (val: number) => {
            listQuery.pageIndex = val;
            onSubmit();
        };
        // 页面加载时
        onMounted(() => {
            onSubmit();
        });
        return {
            upButton,
            upShow,
            Edit,
            onRowDel,
            pageIndex,
            pageSize,
            handleSizeChange,
            handleCurrentChange,
            Search,
            daiInpt,
            showRef,
            onOpenAdd, //新增
            addRef,
            onSubmit,
            View,
            submitReset,
            tableData,
            onMyAdd,
            onEdit,
            onDeleteAll,
            handleSelectionChange,
            listQuery,
            warning,
            danger,
            total,
            onUser,
        };
    },
});
</script>
<style scoped lang="scss">
.table_Box{
  padding: 20px;
  background-color: #fff;
.table_Box {
    padding: 20px;
    background-color: #fff;
}
.tableForm{
  margin-top: 10px;
.tableForm {
    margin-top: 10px;
}
/*按钮行*/
.button_Line{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
.button_Line {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
//弹窗底部边框线
::v-deep .el-dialog__footer{
  border-top: 1px solid #e8e8e8;
  border-radius: 0 0 4px 4px;
::v-deep .el-dialog__footer {
    border-top: 1px solid #e8e8e8;
    border-radius: 0 0 4px 4px;
}
//弹窗顶部边框线
::v-deep .el-dialog__header {
  border-bottom: 1px solid #e8e8e8;
  margin-right: 0;
  border-radius: 4px 4px 0 0;
    border-bottom: 1px solid #e8e8e8;
    margin-right: 0;
    border-radius: 4px 4px 0 0;
}
//表头
::v-deep .el-table th.el-table__cell {
  background-color: #f6f7fa;
  font-weight: 400;
  color: #909399;
    background-color: #f6f7fa;
    font-weight: 400;
    color: #909399;
}
.el-table .sort-caret.ascending{
  border-bottom-color: #c0c4cc;
.el-table .sort-caret.ascending {
    border-bottom-color: #c0c4cc;
}
//分页
.pages{
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
.pages {
    display: flex;
    justify-content: flex-end;
    margin-top: 15px;
}
::v-deep .el-pagination .el-pager li {
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
    margin: 0 5px;
    background-color: #f4f4f5;
    color: #606266;
    min-width: 30px;
    border-radius: 2px;
}
::v-deep .el-pagination .el-pager li.is-active {
  background-color: #409eff;
  color: #fff;
    background-color: #409eff;
    color: #fff;
}
::v-deep .el-pagination .btn-prev {
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
    margin: 0 5px;
    background-color: #f4f4f5;
    color: #606266;
    min-width: 30px;
    border-radius: 2px;
}
::v-deep .el-pagination button:disabled{
  color: #c0c4cc;
::v-deep .el-pagination button:disabled {
    color: #c0c4cc;
}
::v-deep .el-pagination .btn-next{
  margin: 0 5px;
  background-color: #f4f4f5;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
::v-deep .el-pagination .btn-next {
    margin: 0 5px;
    background-color: #f4f4f5;
    color: #606266;
    min-width: 30px;
    border-radius: 2px;
}
</style>

 src/views/contingencyManagement/emergencyResources/emergencySupplies/component/inspect.vue

@@ -1,232 +1,224 @@
<template>
  <div class="system-edit-user-container">
    <el-dialog
        :title="titles"
        v-model="isShowDialog"
        width="769px"
        draggable
        :fullscreen="full"
    >
      <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
      <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          size="default"
          label-width="120px"
      >
        <el-row :gutter="35">
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="应急物资" prop="suppliesId">
              <el-input
                  v-model="ruleForm.suppliesId"
                  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="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="保养结果" prop="maintainResult">
              <el-select v-model="ruleForm.maintainResult" class="w100" placeholder="请选择">
                <el-option label="正常" value="正常"></el-option>
                <el-option label="异常" value="异常"></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="userUid">
              <el-input
                  v-model="ruleForm.userUid"
                  placeholder="请选择"
                  class="input-with-select"
              >
                <template #append>
                  <el-button :icon="Search" @click="openUser" />
                </template>
              </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="maintainTime">
              <el-date-picker
                  class="w100"
                  v-model="ruleForm.maintainTime"
                  type="datetime"
                  placeholder="选择日期时间"
                  value-format="YYYY-MM-DD HH:mm:ss"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
    <div class="system-edit-user-container">
        <el-dialog title="修改应急物资检查" 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" :model="ruleForm" :rules="rules" size="default" label-width="120px">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="应急物资">
                            <el-input v-model="nameTitle" disabled 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="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="保养结果" prop="inspectResult">
                            <el-select v-model="ruleForm.inspectResult" class="w100" placeholder="请选择">
                                <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="userName">
                            <el-input v-model="ruleForm.userName" placeholder="请选择" class="input-with-select">
                                <template #append>
                                    <el-button :icon="Search" @click="openUser(0)" />
                                </template>
                            </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="inspectTime">
                            <el-date-picker
                                class="w100"
                                v-model="ruleForm.inspectTime"
                                type="datetime"
                                placeholder="选择日期时间"
                                value-format="YYYY-MM-DD HH:mm:ss"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="resetForm(ruleFormRef)" size="default">关闭</el-button>
          <el-button size="default" type="primary" @click="submitForm(titles, ruleFormRef)">确定</el-button>
                    <el-button size="default" type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
                </span>
      </template>
    </el-dialog>
    <EmergencySupplies ref="showRef" @SearchUser="onUser"/>
    <userSelections ref="userRef"/>
  </div>
            </template>
        </el-dialog>
        <!-- <EmergencySupplies ref="showRef" @SearchUser="onUser"/> -->
        <DailogSearchUser ref="userRef" @SearchUser="onUsers" />
    </div>
</template>

<script lang="ts">
import {
  ref,
  defineComponent
} from 'vue';

import type {
  FormInstance,
} from 'element-plus'
import { ref, defineComponent,reactive } from 'vue';
import DailogSearchUser from '/@/components/DailogSearchUser/index.vue';
import type { FormInstance,FormRules } from 'element-plus';
import { ElMessage } from 'element-plus';
import {
  Search,
  FullScreen
} from '@element-plus/icons-vue'
import EmergencySupplies from '/@/components/emergencySupplies/index.vue'
import UserSelections from "/@/components/userSelections/index.vue"
import {emergencyMaterialsInspectionApi} from "/@/api/emergencyMaterialsInspection";
import { Search, FullScreen } from '@element-plus/icons-vue';
import EmergencySupplies from '/@/components/emergencySupplies/index.vue';
import UserSelections from '/@/components/userSelections/index.vue';
import { emergencyMaterialsInspectionApi } from '/@/api/emergencyMaterialsInspection';

export default defineComponent({
  name: 'inspect',
  components: {
    UserSelections,
    EmergencySupplies,
  },
  setup(props, { emit }) {
    const isShowDialog = ref(false)
    name: 'inspect',
    components: {
        UserSelections,
        EmergencySupplies,
        DailogSearchUser,
    },
    setup(props, { emit }) {
        const isShowDialog = ref(false);

    const ruleFormRef = ref<FormInstance>()
    //定义表单
    const ruleForm = ref ({
      suppliesId: '', // 物资ID
      maintainResult: '', //保养结果
      maintainTime: '', // 创建时间
      userList: [
        {
          userUid: ''
        },
        {
          userUid: ''
        }
      ]
    });
    const titles = ref();
    const disabled = ref();
    // 打开弹窗
    const openDialog = (title: string,) => {
      isShowDialog.value = true;
      titles.value = title;
    };
    // 表单提交验证必填项
    const submitForm = async (title: string, formEl: FormInstance | undefined) => {
      if (title == '修改应急物资检查') {
        if (!formEl) return;
        await formEl.validate((valid, fields) => {
          if (valid) {
            isShowDialog.value = false;
            emergencyMaterialsInspectionApi()
                .addEmergencyMaterialsInspection(ruleForm.value)
                .then((res) => {
                  if (res.data.code == 200) {
                    ElMessage({
                      showClose: true,
                      message: res.data.msg,
                      type: 'success',
                    });
                    emit('myAdd', true);
                  } else {
                    ElMessage({
                      showClose: true,
                      message: res.data.msg,
                      type: 'error',
                    });
                    emit('myAdd', true);
                  }
                  formEl.resetFields();
                });
          } else {
            console.log('error submit!', fields);
          }
        });
      }
    }
    const resetForm = (formEl: FormInstance | undefined) => {
      isShowDialog.value = false;
      if (!formEl) return;
      formEl.resetFields();
    };
        const ruleFormRef = ref<FormInstance>();
        //定义表单
        const ruleForm = ref({
            suppliesId: '', // 物资ID
            inspectResult: '', //保养结果
            inspectTime: '', // 创建时间
            userList: [],
        });
        const disabled = ref();
        // 打开弹窗
        const nameTitle = ref();
        const openDialog = (data: string) => {
            isShowDialog.value = true;
            ruleForm.value.suppliesId = data.id;
            nameTitle.value = data.name;
        };
            const rules = reactive<FormRules>({
            nameTitle: [],
            inspectResult: [
                {
                    required: true,
                    message: '保养结果不能为空',
                    trigger: 'change',
                },
            ],
            userName: [
                {
                    required: true,
                    message: '创建人不能为空',
                    trigger: 'change',
                },
            ],
      inspectTime: [
                {
                    required: true,
                    message: '创建时间不能为空',
                    trigger: 'blur',
                },
            ],
        });
        // 表单提交验证必填项
        const submitForm = async (formEl: FormInstance | undefined) => {
            if (!formEl) return;
            await formEl.validate((valid, fields) => {
                if (valid) {
                    isShowDialog.value = false;
                    emergencyMaterialsInspectionApi()
                        .addEmergencyMaterialsInspection(ruleForm.value)
                        .then((res) => {
                            if (res.data.code == 200) {
                                ElMessage({
                                    showClose: true,
                                    message: res.data.msg,
                                    type: 'success',
                                });
                                emit('myAdd', true);
                                formEl.resetFields();
                            } else {
                                ElMessage({
                                    showClose: true,
                                    message: res.data.msg,
                                    type: 'error',
                                });
                                emit('myAdd', true);
                            }
                        });
                } else {
                    console.log('error submit!', fields);
                }
            });
        };
        const resetForm = (formEl: FormInstance | undefined) => {
            isShowDialog.value = false;
            if (!formEl) return;
            formEl.resetFields();
        };

    //日期选择器
    const value1 = ref('')
        //日期选择器
        const value1 = ref('');

    // 应急物资弹窗
    const showRef=ref()
    const daiInpt=()=>{
      showRef.value.openDailog()
    }
    const onUser = (e:any) => {
      ruleForm.value.suppliesId=e.id
    };
    // 编写人弹窗
    const userRef = ref();
    const openUser = () => {
      userRef.value.openDialog();
    };
    //全屏
    const full = ref(false);
    const toggleFullscreen = () => {
      if (full.value == false) {
        full.value = true;
      } else {
        full.value = false;
      }
    };
    return {
      openDialog,
      isShowDialog,
      resetForm,
      Search,
      ruleForm,
      value1,
      daiInpt,
      showRef,
      onUser,
      ruleFormRef,
      submitForm,
      openUser,
      userRef,
      toggleFullscreen,
      FullScreen,
      full,
      titles,
      disabled,
      emit,
    };
  },
        // 编写人弹窗
        const userRef = ref();
        const openUser = (type: any) => {
            userRef.value.openDailog(type);
        };
        const onUsers = (val: any) => {
            let arr = [];
            for (let i = 0; i < val.length; i++) {
                arr.push(val[i].realName);
                ruleForm.value.userList.push({
                    userUid: val[i].uid,
                    userName: val[i].realName,
                });
            }
            ruleForm.value.userName = arr.toString();
        };
        //全屏
        const full = ref(false);
        const toggleFullscreen = () => {
            if (full.value == false) {
                full.value = true;
            } else {
                full.value = false;
            }
        };
        return {
            nameTitle,
            openDialog,
            isShowDialog,
            resetForm,
            rules,
            Search,
            ruleForm,
            value1,
            onUsers,
            ruleFormRef,
            submitForm,
            openUser,
            userRef,
            toggleFullscreen,
            FullScreen,
            full,
            disabled,
            emit,
        };
    },
});
</script>
<style scoped lang="scss">
.textarea{
  height: 168px!important;
.textarea {
    height: 168px !important;
}
.textarea ::v-deep .el-textarea__inner{
  height: 168px!important;
.textarea ::v-deep .el-textarea__inner {
    height: 168px !important;
}
::v-deep .el-table__cell {
  font-weight: 400;
    font-weight: 400;
}
.el-divider--horizontal{
  height: 0;
  margin: 0;
  border-top: transparent;
.el-divider--horizontal {
    height: 0;
    margin: 0;
    border-top: transparent;
}
.el-select{
  width: 100%;
.el-select {
    width: 100%;
}
</style>

 src/views/contingencyManagement/emergencyResources/emergencySupplies/component/maintain.vue

@@ -1,230 +1,235 @@
<template>
  <div class="system-edit-user-container">
    <el-dialog
        :title="titles"
        v-model="isShowDialog"
        width="769px"
        draggable
        :fullscreen="full"
    >
      <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
      <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          size="default"
          label-width="120px"
      >
        <el-row :gutter="35">
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="应急物资" prop="suppliesId">
              <el-input
                  v-model="ruleForm.suppliesId"
                  placeholder="请选择"
                  class="input-with-select"
              >
                <template #append>
    <div class="system-edit-user-container">
        <el-dialog title="修改应急物资保养" @close="resetForm(ruleFormRef)" v-model="isShowDialog" width="50%" draggable :fullscreen="full">
            <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
            <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" size="default" label-width="120px">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="应急物资" prop="nameTitle">
                            <el-input v-model="nameTitle" disabled 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="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="保养结果" prop="maintainResult">
              <el-select v-model="ruleForm.maintainResult" class="w100" placeholder="请选择">
                <el-option label="正常" value="正常"></el-option>
                <el-option label="异常" value="异常"></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="userUid">
              <el-input
                  v-model="ruleForm.userUid"
                  placeholder="请选择"
                  class="input-with-select"
              >
                <template #append>
                  <el-button :icon="Search" @click="openUser" />
                </template>
              </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="maintainTime">
              <el-date-picker
                  class="w100"
                  v-model="ruleForm.maintainTime"
                  type="datetime"
                  placeholder="选择日期时间"
                  value-format="YYYY-MM-DD HH:mm:ss"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
                </template> -->
                            </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="maintainResult">
                            <el-select v-model="ruleForm.maintainResult" class="w100" placeholder="请选择">
                                <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="userName">
                            <el-input v-model="ruleForm.userName" placeholder="请选择" class="input-with-select">
                                <template #append>
                                    <el-button :icon="Search" @click="openUser(0)" />
                                </template>
                            </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="maintainTime">
                            <el-date-picker
                                class="w100"
                                v-model="ruleForm.maintainTime"
                                type="datetime"
                                placeholder="选择日期时间"
                                value-format="YYYY-MM-DD HH:mm:ss"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="resetForm(ruleFormRef)" size="default">关闭</el-button>
          <el-button size="default" type="primary" @click="submitForm(titles, ruleFormRef)">确定</el-button>
                    <el-button size="default" type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
                </span>
      </template>
    </el-dialog>
    <EmergencySupplies ref="showRef" @SearchUser="onUser"/>
    <DailogSearchUser ref="userRef"  @SearchUser="onUsers"/>
  </div>
            </template>
        </el-dialog>
        <EmergencySupplies ref="showRef" @SearchUser="onUser" />
        <DailogSearchUser ref="userRef" @SearchUser="onUsers" />
    </div>
</template>

<script lang="ts">
import {
  ref,
  defineComponent
} from 'vue';
import { ref, defineComponent, reactive } from 'vue';

import type {
  FormInstance,
} from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus';
import { ElMessage } from 'element-plus';
import {
  Search,
  FullScreen
} from '@element-plus/icons-vue'
import EmergencySupplies from '/@/components/emergencySupplies/index.vue'
import DailogSearchUser from "../../../../../components/DailogSearchUser/index.vue"
import {maintenanceEmergencyMaterialsApi} from "/@/api/maintenanceEmergencyMaterials";
import { Search, FullScreen } from '@element-plus/icons-vue';
import EmergencySupplies from '/@/components/emergencySupplies/index.vue';
import DailogSearchUser from '../../../../../components/DailogSearchUser/index.vue';
import { maintenanceEmergencyMaterialsApi } from '/@/api/maintenanceEmergencyMaterials';

export default defineComponent({
  name: 'maintain',
  components: {
    DailogSearchUser,
    EmergencySupplies,
  },
  setup(props, { emit }) {
    const isShowDialog = ref(false)
    name: 'maintain',
    components: {
        DailogSearchUser,
        EmergencySupplies,
    },
    setup(props, { emit }) {
        const isShowDialog = ref(false);

    const ruleFormRef = ref<FormInstance>()
    //定义表单
    const ruleForm = ref ({
      suppliesId: '', // 物资ID
      maintainResult: '', //保养结果
      maintainTime: '', // 创建时间
      userList: []
    });
    const titles = ref();
    const disabled = ref();
    // 打开弹窗
    const openDialog = (title: string,) => {
      isShowDialog.value = true;
      titles.value = title;
    };
    // 表单提交验证必填项
    const submitForm = async (title: string, formEl: FormInstance | undefined) => {
      if (title == '修改应急物资保养') {
        if (!formEl) return;
        await formEl.validate((valid, fields) => {
          if (valid) {
            isShowDialog.value = false;
            maintenanceEmergencyMaterialsApi()
                .addMaintenanceEmergencyMaterials(ruleForm.value)
                .then((res) => {
                  if (res.data.code == 200) {
                    ElMessage({
                      showClose: true,
                      message: res.data.msg,
                      type: 'success',
                    });
                    emit('myAdd', true);
                  } else {
                    ElMessage({
                      showClose: true,
                      message: res.data.msg,
                      type: 'error',
                    });
                    emit('myAdd', true);
                  }
                  formEl.resetFields();
                });
          } else {
            console.log('error submit!', fields);
          }
        });
      }
    }
    const resetForm = (formEl: FormInstance | undefined) => {
      isShowDialog.value = false;
      if (!formEl) return;
      formEl.resetFields();
    };
        const ruleFormRef = ref<FormInstance>();
        //定义表单
        const ruleForm = ref({
            suppliesId: '', // 物资ID
            maintainResult: '', //保养结果
            maintainTime: '', // 创建时间
            userList: [],
        });
        const disabled = ref();
        // 打开弹窗
        const nameTitle = ref();
        const openDialog = (data: string) => {
            isShowDialog.value = true;
            ruleForm.value.suppliesId = data.id;
            nameTitle.value = data.name;
        };
        const rules = reactive<FormRules>({
            nameTitle: [],
            maintainResult: [
                {
                    required: true,
                    message: '保养结果不能为空',
                    trigger: 'change',
                },
            ],
            userName: [
                {
                    required: true,
                    message: '创建人不能为空',
                    trigger: 'change',
                },
            ],
      maintainTime: [
                {
                    required: true,
                    message: '创建时间不能为空',
                    trigger: 'blur',
                },
            ],
        });
        // 表单提交验证必填项
        const submitForm = async (formEl: FormInstance | undefined) => {
            if (!formEl) return;
            await formEl.validate((valid, fields) => {
                if (valid) {
                    isShowDialog.value = false;
                    maintenanceEmergencyMaterialsApi()
                        .addMaintenanceEmergencyMaterials(ruleForm.value)
                        .then((res) => {
                            if (res.data.code == 200) {
                                ElMessage({
                                    showClose: true,
                                    message: res.data.msg,
                                    type: 'success',
                                });
                                emit('myAdd', true);
                            } else {
                                ElMessage({
                                    showClose: true,
                                    message: res.data.msg,
                                    type: 'error',
                                });
                                emit('myAdd', true);
                            }
                            formEl.resetFields();
                        });
                } else {
                    console.log('error submit!', fields);
                }
            });
        };
        const resetForm = (formEl: FormInstance | undefined) => {
            isShowDialog.value = false;
            if (!formEl) return;
            formEl.resetFields();
        };

    //日期选择器
    const value1 = ref('')
        //日期选择器
        const value1 = ref('');

    // 应急物资弹窗
    const showRef=ref()
    const daiInpt=()=>{
      showRef.value.openDailog()
    }
    const onUser = (e:any) => {
      ruleForm.value.suppliesId=e.id
    };
        // 应急物资弹窗
        const showRef = ref();
        const daiInpt = () => {
            showRef.value.openDailog();
        };
        const onUser = (e: any) => {
            ruleForm.value.suppliesId = e.id;
        };

    // 编写人弹窗
    const userRef = ref();
    const openUser = () => {
      userRef.value.openDailog();
    };
    const onUsers = (e:any) => {
      ruleForm.value.userUid=e.uid
    };
    //全屏
    const full = ref(false);
    const toggleFullscreen = () => {
      if (full.value == false) {
        full.value = true;
      } else {
        full.value = false;
      }
    };
    return {
      openDialog,
      isShowDialog,
      resetForm,
      Search,
      ruleForm,
      value1,
      daiInpt,
      onUsers,
      showRef,
      ruleFormRef,
      onUser,
      submitForm,
      openUser,
      userRef,
      toggleFullscreen,
      FullScreen,
      full,
      titles,
      disabled,
      emit,
    };
  },
        // 编写人弹窗
        const userRef = ref();
        const openUser = (type: any) => {
            userRef.value.openDailog(type);
        };
        const onUsers = (val: any) => {
            let arr = [];
            for (let i = 0; i < val.length; i++) {
                arr.push(val[i].realName);
                ruleForm.value.userList.push({
                    userUid: val[i].uid,
                    userName: val[i].realName,
                });
            }
            ruleForm.value.userName = arr.toString();
        };
        //全屏
        const full = ref(false);
        const toggleFullscreen = () => {
            if (full.value == false) {
                full.value = true;
            } else {
                full.value = false;
            }
        };
        return {
            openDialog,
            rules,
            isShowDialog,
            resetForm,
            Search,
            ruleForm,
            value1,
            daiInpt,
            onUsers,
            showRef,
            ruleFormRef,
            onUser,
            submitForm,
            openUser,
            userRef,
            toggleFullscreen,
            FullScreen,
            full,
            disabled,
            emit,
            nameTitle,
        };
    },
});
</script>
<style scoped lang="scss">
.textarea{
  height: 168px!important;
.textarea {
    height: 168px !important;
}
.textarea ::v-deep .el-textarea__inner{
  height: 168px!important;
.textarea ::v-deep .el-textarea__inner {
    height: 168px !important;
}
::v-deep .el-table__cell {
  font-weight: 400;
    font-weight: 400;
}
.el-divider--horizontal{
  height: 0;
  margin: 0;
  border-top: transparent;
.el-divider--horizontal {
    height: 0;
    margin: 0;
    border-top: transparent;
}
.el-select{
  width: 100%;
.el-select {
    width: 100%;
}
</style>

 src/views/contingencyManagement/emergencyResources/emergencySupplies/component/openAdd.vue

@@ -1,21 +1,8 @@
<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-form ref="ruleFormRef" :rules="rules" :model="ruleForm" size="default" label-width="120px" :disabled="disabled">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="物资名称" prop="name">
@@ -32,15 +19,15 @@
                            <el-input v-model="ruleForm.use" 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.areaId" placeholder="请选择" class="input-with-select">-->
<!--                                <template #append>-->
<!--                                    <el-button :icon="Search" @click="regionsDialog" />-->
<!--                                </template>-->
<!--                            </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.areaId" placeholder="请选择" class="input-with-select">-->
                    <!--                                <template #append>-->
                    <!--                                    <el-button :icon="Search" @click="regionsDialog" />-->
                    <!--                                </template>-->
                    <!--                            </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="model">
                            <el-input v-model="ruleForm.model" placeholder="请填写物资型号"></el-input>
@@ -49,26 +36,26 @@
                    <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"
                  check-strictly
                  :data="data"
                  :props="propse"
                  class="w100"
                  clearable
                  :render-after-expand="false"
                  placeholder="请选择"
              />
                                v-model="ruleForm.departmentId"
                                check-strictly
                                :data="data"
                                :props="propse"
                                class="w100"
                                clearable
                                :render-after-expand="false"
                                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>
@@ -85,12 +72,12 @@
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="生产日期" prop="productionDate">
                            <el-date-picker
                  v-model="ruleForm.productionDate"
                  type="datetime"
                  class="w100"
                  placeholder="选择日期时间"
                  value-format="YYYY-MM-DD HH:mm:ss"
              />
                                v-model="ruleForm.productionDate"
                                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">
@@ -101,72 +88,61 @@
                    <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-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="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="使用说明">
                        <el-form-item label="使用说明" prop="useExplain">
                            <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="检查日期" prop="inspectDate">
                            <el-date-picker
                  v-model="ruleForm.inspectDate"
                  type="datetime"
                  class="w100"
                  placeholder="选择日期时间"
                  value-format="YYYY-MM-DD HH:mm:ss"
              />
                                v-model="ruleForm.inspectDate"
                                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-form-item label="下次检查日期" prop="nextInspectDate">
                            <el-date-picker
                  v-model="ruleForm.nextInspectDate"
                  type="datetime"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  class="w100"
                  placeholder="选择日期时间"
              />
                                v-model="ruleForm.nextInspectDate"
                                type="datetime"
                                value-format="YYYY-MM-DD HH:mm:ss"
                                class="w100"
                                placeholder="选择日期时间"
                            />
                        </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.longitude" 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.latitude" 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.longitude" 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.latitude" 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>
@@ -182,24 +158,24 @@
                </span>
            </template>
        </el-dialog>
        <PersonInCharge ref="Shows" />
        <DailogSearchUser ref="Shows" @SearchUser="onUser"></DailogSearchUser>
        <userSelections ref="userRef" />
        <RegionsCheckbox ref="openRef" />
    </div>
</template>

<script lang="ts">
import { reactive, ref, defineComponent,onMounted, } from 'vue';
import { reactive, ref, defineComponent, onMounted } from 'vue';

import type { FormInstance, FormRules } from 'element-plus';
import { ElMessage } from 'element-plus';

import DailogSearchUser from '/@/components/DailogSearchUser/index.vue';
import { Search, FullScreen } from '@element-plus/icons-vue';
import UserSelections from '/@/components/userSelections/index.vue';
import PersonInCharge from '/@/views/contingencyManagement/emergencyResources/emergencySupplies/component/personInCharge.vue';
import RegionsCheckbox from '/@/views/contingencyManagement/emergencyResources/emergencySupplies/component/regionsCheckbox.vue';
import {emergencySuppliesApi} from "/@/api/emergencyResources";
import {goalManagementApi} from "/@/api/goalManagement";
import { emergencySuppliesApi } from '/@/api/emergencyResources';
import { goalManagementApi } from '/@/api/goalManagement';

export default defineComponent({
    name: 'openAdd',
@@ -207,22 +183,24 @@
        PersonInCharge,
        UserSelections,
        RegionsCheckbox,
        DailogSearchUser,
    },
    setup(props, { emit }) {
        const isShowDialog = ref(false);

        const ruleFormRef = ref<FormInstance>();
        //定义表单
        const ruleForm = ref ({
        const ruleForm = ref({
            productionDate: '',
            useDate: '',
            inspectDate: '',
            nextInspectDate: '',
            inspectPeiod: '',
            inspectPeriod: '',
            count: '',
            usePeriod: '',
            departmentId: '',
            principalUserUid: '',
            principalUserName: '',
            status: '',
            classification: '',
            name: '',
@@ -235,48 +213,48 @@
            place: '',
            useExplain: '',
        });
    const titles = ref();
    const disabled = ref();
        const titles = ref();
        const disabled = ref();
        // 打开弹窗
        const openDialog = (title: string, id: number, type: boolean) => {
      isShowDialog.value = true;
      titles.value = title;
      disabled.value = type;
      if (title == '查看应急物资代码' || title == '修改应急物资代码') {
        emergencySuppliesApi()
            .seeEmergencySupplies(id)
            .then((res) => {
              if (res.data.code == 200) {
                ruleForm.value = res.data.data;
              }
            });
      }
            isShowDialog.value = true;
            titles.value = title;
            disabled.value = type;
            if (title == '查看应急物资代码' || title == '修改应急物资代码') {
                emergencySuppliesApi()
                    .seeEmergencySupplies(id)
                    .then((res) => {
                        if (res.data.code == 200) {
                            ruleForm.value = res.data.data;
                        }
                    });
            }
        };
        //日期选择器
        const value1 = ref('');
    //部门树
    const department = () => {
      goalManagementApi()
          .getTreedepartment()
          .then((res) => {
            if (res.data.code == 200) {
              data.value = res.data.data;
            } else {
              ElMessage.error(res.data.msg);
            }
          });
    };
        //部门树
        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 = ref()
    const propse = {
      label: 'depName',
      children: 'children',
      value: 'depId',
    };
    onMounted(() => {
      department();
    });
        const data = ref();
        const propse = {
            label: 'depName',
            children: 'children',
            value: 'depId',
        };
        onMounted(() => {
            department();
        });
        // 必填项提示
        const rules = reactive<FormRules>({
            name: [
@@ -358,7 +336,7 @@
                    trigger: 'change',
                },
            ],
            inspectPeiod: [
            inspectPeriod: [
                {
                    required: true,
                    message: '检查周期月不能为空',
@@ -387,99 +365,77 @@
                    trigger: 'change',
                },
            ],
            principalUserName:[],
            useExplain:[]
        });
    // 表单提交验证必填项
    const submitForm = async (title: string, formEl: FormInstance | undefined) => {
      if (title == '新建应急物资代码') {
        if (!formEl) return;
        await formEl.validate((valid, fields) => {
          if (valid) {
            isShowDialog.value = false;
            emergencySuppliesApi()
                .addEmergencySupplies(ruleForm.value)
                .then((res) => {
                  if (res.data.code == 200) {
                    ElMessage({
                      showClose: true,
                      message: res.data.msg,
                      type: 'success',
                    });
                    emit('myAdd', true);
                  } else {
                    ElMessage({
                      showClose: true,
                      message: res.data.msg,
                      type: 'error',
                    });
                    emit('myAdd', true);
                  }
                  formEl.resetFields();
                });
          } else {
            console.log('error submit!', fields);
          }
        });
      }
      else if (title == '修改应急物资代码') {
        if (!formEl) return;
        await formEl.validate((valid, fields) => {
          if (valid) {
            isShowDialog.value = false;
            emergencySuppliesApi()
                .editEmergencySupplies(ruleForm.value)
                .then((res) => {
                  if (res.data.code == 200) {
                    ElMessage({
                      showClose: true,
                      message: '修改成功',
                      type: 'success',
                    });
                    emit('myAdd', true);
                  } else {
                    ElMessage({
                      showClose: true,
                      message: res.data.msg,
                      type: 'error',
                    });
                    emit('myAdd', true);
                  }
                  formEl.resetFields();
                });
          } else {
            console.log('error submit!', fields);
          }
        });
        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) => {
      isShowDialog.value = false;
      if (!formEl) return;
      formEl.resetFields();
    };
        // 应急队伍弹窗
        // 表单提交验证必填项
        const submitForm = async (title: string, formEl: FormInstance | undefined) => {
            if (title == '新建应急物资代码') {
                if (!formEl) return;
                await formEl.validate((valid, fields) => {
                    if (valid) {
                        isShowDialog.value = false;
                        emergencySuppliesApi()
                            .addEmergencySupplies(ruleForm.value)
                            .then((res) => {
                                if (res.data.code == 200) {
                                    ElMessage({
                                        showClose: true,
                                        message: res.data.msg,
                                        type: 'success',
                                    });
                                    emit('myAdd', true);
                                } else {
                                    ElMessage({
                                        showClose: true,
                                        message: res.data.msg,
                                        type: 'error',
                                    });
                                    emit('myAdd', true);
                                }
                                formEl.resetFields();
                            });
                    } else {
                        console.log('error submit!', fields);
                    }
                });
            } else if (title == '修改应急物资代码') {
                if (!formEl) return;
                await formEl.validate((valid, fields) => {
                    if (valid) {
                        isShowDialog.value = false;
                        emergencySuppliesApi()
                            .editEmergencySupplies(ruleForm.value)
                            .then((res) => {
                                if (res.data.code == 200) {
                                    ElMessage({
                                        showClose: true,
                                        message: '修改成功',
                                        type: 'success',
                                    });
                                    emit('myAdd', true);
                                } else {
                                    ElMessage({
                                        showClose: true,
                                        message: res.data.msg,
                                        type: 'error',
                                    });
                                    emit('myAdd', true);
                                }
                                formEl.resetFields();
                            });
                    } else {
                        console.log('error submit!', fields);
                    }
                });		
            }
        };
        const resetForm = (formEl: FormInstance | undefined) => {
            isShowDialog.value = false;
            if (!formEl) return;
            formEl.resetFields();
        };
        // 人名
        const Shows = ref();
        const daiInpt = () => {
            Shows.value.openDailog();
@@ -494,28 +450,6 @@
        const openUser = () => {
            userRef.value.openDialog();
        };
    const dataList = [
      {
        maintainResult: '',
        suppliesId: 'Tom',
        maintainTime: '2016-05-02',
      },
      {
        maintainResult: '',
        suppliesId: 'Tom',
        maintainTime: '2016-05-02',
      },
      {
        maintainResult: '',
        suppliesId: 'Tom',
        maintainTime: '2016-05-02',
      },
      {
        maintainResult: '',
        suppliesId: 'Tom',
        maintainTime: '2016-05-02',
      },
    ]
        //全屏
        const full = ref(false);
        const toggleFullscreen = () => {
@@ -525,13 +459,17 @@
                full.value = false;
            }
        };
            const onUser = (e: any) => {
            ruleForm.value.principalUserUid = e.uid;
            ruleForm.value.principalUserName = e.realName;
        };
        return {
            openDialog,
            isShowDialog,
            responsibleDepartment,
            data,
      propse,
      department,
            propse,
            department,
            Search,
            ruleForm,
            value1,
@@ -547,11 +485,11 @@
            toggleFullscreen,
            FullScreen,
            full,
      resetForm,
      titles,
      disabled,
      emit,
      dataList,
            resetForm,
            titles,
            disabled,
            emit,
            onUser
        };
    },
});

 src/views/contingencyManagement/emergencyResources/emergencySupplies/component/openEdit.vue

@@ -1,6 +1,6 @@
<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">
@@ -20,12 +20,8 @@
                        </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">
@@ -35,18 +31,18 @@
                    </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>
@@ -79,21 +75,17 @@
                    <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>
@@ -132,27 +124,47 @@
                    <!--                        </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>
@@ -165,7 +177,7 @@
                </span>
            </template>
        </el-dialog>
        <PersonInCharge ref="Shows" />
        <DailogSearchUser ref="Shows" @SearchUser="onUser"></DailogSearchUser>
        <userSelections ref="userRef" />
        <RegionsCheckbox ref="openRef" />
    </div>
@@ -173,7 +185,7 @@

<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';

@@ -182,11 +194,12 @@
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,
    },
@@ -200,11 +213,12 @@
            useDate: '',
            inspectDate: '',
            nextInspectDate: '',
            inspectPeiod: '',
            inspectPeriod: '',
            count: '',
            usePeriod: '',
            departmentId: '',
            principalUserUid: '',
            principalUserName:"",
            status: '',
            classification: '',
            name: '',
@@ -221,6 +235,7 @@
        const disabled = ref();
        // 打开弹窗
        const openDialog = (title: string, id: number, type: boolean) => {
            department()
            isShowDialog.value = true;
            titles.value = title;
            disabled.value = type;
@@ -230,131 +245,46 @@
                    .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: [
@@ -418,14 +348,14 @@
                {
                    required: true,
                    message: '生产日期不能为空',
                    trigger: 'change',
                    trigger: 'blur',
                },
            ],
            usePeriod: [
                {
                    required: true,
                    message: '使用期限不能为空',
                    trigger: 'change',
                    trigger: 'blur',
                },
                { type: 'number', message: '请输入数字类型', trigger: 'change' },
            ],
@@ -436,7 +366,7 @@
                    trigger: 'change',
                },
            ],
            inspectPeiod: [
            inspectPeriod: [
                {
                    required: true,
                    message: '检查周期月不能为空',
@@ -448,23 +378,24 @@
                {
                    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) => {
@@ -527,28 +458,6 @@
                    }
                });
                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) => {
@@ -556,7 +465,7 @@
            if (!formEl) return;
            formEl.resetFields();
        };
        // 应急队伍弹窗
        // 人名
        const Shows = ref();
        const daiInpt = () => {
            Shows.value.openDailog();
@@ -571,29 +480,7 @@
        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 = () => {
@@ -603,7 +490,13 @@
                full.value = false;
            }
        };
        const onUser = (e: any) => {
            ruleForm.value.principalUserUid = e.uid;
            ruleForm.value.principalUserName = e.realName;
        };
        return {
            onUser,
            userNames,
            openDialog,
            isShowDialog,
            responsibleDepartment,
@@ -612,7 +505,6 @@
            ruleForm,
            value1,
            treeSelect,
            tree,
            daiInpt,
            Shows,
            ruleFormRef,
@@ -630,6 +522,8 @@
            disabled,
            emit,
            dataList,
            propse,
            department
        };
    },
});

 src/views/contingencyManagement/emergencyResources/emergencySupplies/index.vue

@@ -19,38 +19,44 @@
                    </el-button>
                </div>
                <div class="button_Right">
<!--          <el-button @click="upButton">-->
<!--                        <el-icon>-->
<!--                            <Upload />-->
<!--                        </el-icon>-->
<!--                    </el-button>-->
<!--                    <el-button>-->
<!--                        <el-icon>-->
<!--                            <Refresh />-->
<!--                        </el-icon>-->
<!--                    </el-button>-->
                    <!--          <el-button @click="upButton">-->
                    <!--                        <el-icon>-->
                    <!--                            <Upload />-->
                    <!--                        </el-icon>-->
                    <!--                    </el-button>-->
                    <!--                    <el-button>-->
                    <!--                        <el-icon>-->
                    <!--                            <Refresh />-->
                    <!--                        </el-icon>-->
                    <!--                    </el-button>-->
                </div>
            </div>
            <el-table :data="tableData" style="width: 100%" ref="multipleTableRef" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="name" label="物资名称" min-width="120" show-overflow-tooltip sortable></el-table-column>
                <el-table-column prop="number" label="物资编号" min-width="120" show-overflow-tooltip sortable></el-table-column>
                <el-table-column prop="departmentId" label="负责部门" min-width="120" show-overflow-tooltip sortable></el-table-column>
                <el-table-column prop="classification" label="物资分类" min-width="120" show-overflow-tooltip sortable></el-table-column>
                <el-table-column prop="place" label="存放位置" min-width="120" show-overflow-tooltip sortable></el-table-column>
                <el-table-column prop="count" label="存储数量" min-width="120" show-overflow-tooltip sortable></el-table-column>
                <el-table-column align="center" type="selection" width="55" />
                <el-table-column align="center" prop="name" label="物资名称" min-width="120" show-overflow-tooltip sortable></el-table-column>
                <el-table-column align="center" prop="number" label="物资编号" min-width="120" show-overflow-tooltip sortable></el-table-column>
                <el-table-column align="center" prop="deptName" label="负责部门" min-width="120" show-overflow-tooltip sortable></el-table-column>
                <el-table-column align="center" label="物资分类" min-width="120" show-overflow-tooltip sortable>
                    <template #default="scope">
                        <span v-if="scope.row.classification == 1">事故气体吸收装置</span><span v-if="scope.row.classification == 2">通讯设施</span
                        ><span v-if="scope.row.classification == 3">交通运输工具</span><span v-if="scope.row.classification == 4">照明装置</span
                        ><span v-if="scope.row.classification == 5">防护器材</span><span v-if="scope.row.classification == 6">其它</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="place" label="存放位置" min-width="120" show-overflow-tooltip sortable></el-table-column>
                <el-table-column align="center" prop="count" label="存储数量" min-width="120" show-overflow-tooltip sortable></el-table-column>
                <el-table-column label="操作" width="200" align="center" fixed="right">
                    <template #default="scope">
                        <el-button size="small" text type="primary" @click="onMaintain()">
                        <el-button size="small" text type="primary" @click="onMaintain(scope.row)">
                            <el-icon style="margin-right: 5px"> <EditPen /> </el-icon>保养
                        </el-button>
                        <el-button size="small" text type="primary" @click="onInspect()">
                        <el-button size="small" text type="primary" @click="onInspect(scope.row)">
                            <el-icon style="margin-right: 5px"> <EditPen /> </el-icon>检查
                        </el-button>
                        <el-button size="small" text type="primary" @click="onEdit('详情',scope.row.id)">
                        <el-button size="small" text type="primary" @click="onEdit('详情', scope.row.id)">
                            <el-icon style="margin-right: 5px"> <View /> </el-icon>查看
                        </el-button>
                        <el-button size="small" text type="primary" @click="onEdit('修改',scope.row.id)">
                        <el-button size="small" text type="primary" @click="onEdit('修改', scope.row.id)">
                            <el-icon style="margin-right: 5px">
                                <EditPen />
                            </el-icon>
@@ -76,41 +82,28 @@
                />
            </div>
        </el-card>
        <Maintain ref="seeRef" @myadd="onMaintainAdd"/>
    <Inspect ref="spectRef" @myadd="onInspectAdd"/>
        <Maintain ref="seeRef" @myadd="onMaintainAdd" />
        <Inspect ref="spectRef" @myadd="onInspectAdd" />
        <OpenAdd ref="addRef" @myAdd="onMyAdd" />
    <OpenEdit ref="editRef" @myAdd="onMyAdds" />
<!--        <upData ref="upShow"></upData>-->
        <OpenEdit ref="editRef" @myAdd="onMyAdds" />
        <!--        <upData ref="upShow"></upData>-->
    </div>
</template>

<script lang="ts">
import { ref, defineComponent, reactive, onMounted } from 'vue';
import {
    ref,
    defineComponent,
    reactive,
    onMounted,
} from 'vue';
import {
  ElMessageBox,
  ElMessage,
  // ElTable
    ElMessageBox,
    ElMessage,
    // ElTable
} from 'element-plus';
import {
    Plus,
    Edit,
    Delete,
    Upload,
    Refresh,
    View,
    EditPen,
} from '@element-plus/icons-vue';
import { Plus, Edit, Delete, Upload, Refresh, View, EditPen } from '@element-plus/icons-vue';
import OpenAdd from '/@/views/contingencyManagement/emergencyResources/emergencySupplies/component/openAdd.vue';
import Maintain from '/@/views/contingencyManagement/emergencyResources/emergencySupplies/component/maintain.vue';
import Inspect from '/@/views/contingencyManagement/emergencyResources/emergencySupplies/component/inspect.vue';
import OpenEdit from '/@/views/contingencyManagement/emergencyResources/emergencySupplies/component/openEdit.vue';
import UpData from '/@/views/contingencyManagement/panManagement/component/upData.vue';
import {emergencySuppliesApi} from '/@/api/emergencyResources';
import { emergencySuppliesApi } from '/@/api/emergencyResources';

export default defineComponent({
    name: 'systemUser',
@@ -118,14 +111,14 @@
        OpenAdd,
        Maintain,
        View,
    OpenEdit,
        OpenEdit,
        EditPen,
        Plus,
        Edit,
        Delete,
        Upload,
        // Download,
    Inspect,
        Inspect,
        Refresh,
        UpData,
    },
@@ -158,29 +151,29 @@
            listQuery.searchParams.name = '';
            listApi();
        };
    const warning = ref(true);
    const danger = ref(true);
    const deletAll = ref();
    const handleSelectionChange = (val: any) => {
      let valId = JSON.parse(JSON.stringify(val));
      let arr = [];
      for (let i = 0; i < valId.length; i++) {
        arr.push(valId[i].id);
      }
      deletAll.value = arr;
      // console.log(deletAll.value);
      if (val.length == 1) {
        warning.value = false;
        danger.value = false;
      } else if (val.length == 0) {
        warning.value = true;
        danger.value = true;
      } else {
        warning.value = true;
        danger.value = false;
      }
    };
    // 页面加载时
        const warning = ref(true);
        const danger = ref(true);
        const deletAll = ref();
        const handleSelectionChange = (val: any) => {
            let valId = JSON.parse(JSON.stringify(val));
            let arr = [];
            for (let i = 0; i < valId.length; i++) {
                arr.push(valId[i].id);
            }
            deletAll.value = arr;
            // console.log(deletAll.value);
            if (val.length == 1) {
                warning.value = false;
                danger.value = false;
            } else if (val.length == 0) {
                warning.value = true;
                danger.value = true;
            } else {
                warning.value = true;
                danger.value = false;
            }
        };
        // 页面加载时
        onMounted(() => {
            listApi();
        });
@@ -192,122 +185,118 @@

        //新增应急物资检查弹窗
        const seeRef = ref();
        const onMaintain = () => {
      seeRef.value.openDialog('修改应急物资保养',false);
        const onMaintain = (data: any) => {
            seeRef.value.openDialog(data);
        };
    // 应急物资保养新增后刷新
    const onMaintainAdd = (e: boolean) => {
      if (e) {
        listApi();
      } else {
        listApi();
      }
    };
    //修改应急物资检查弹窗
    const spectRef = ref();
    const onInspect = () => {
      spectRef.value.openDialog('修改应急物资检查',false);
    };
    // 应急物资检查新增后刷新
    const onInspectAdd = (e: boolean) => {
      if (e) {
        listApi();
      } else {
        listApi();
      }
    };
        // 应急物资保养新增后刷新
        const onMaintainAdd = () => {
            listApi();
        };
        //修改应急物资检查弹窗
        const spectRef = ref();
        const onInspect = (data: any) => {
            spectRef.value.openDialog(data);
        };
        // 应急物资检查新增后刷新
        const onInspectAdd = (e: boolean) => {
            if (e) {
                listApi();
            } else {
                listApi();
            }
        };
        // 新建应急物资代码弹窗
        const addRef = ref();
        const onOpenAdd = () => {
            addRef.value.openDialog('新建应急物资代码',false);
            addRef.value.openDialog('新建应急物资代码', false);
        };
    // 新增后刷新
    const onMyAdd = (e: boolean) => {
      if (e) {
        listApi();
      } else {
        listApi();
      }
    };
        // 新增后刷新
        const onMyAdd = (e: boolean) => {
            if (e) {
                listApi();
            } else {
                listApi();
            }
        };
        // 打开修改用户弹窗
    const editRef = ref();
    const onEdit = (val: string, row: object) => {
      if (val == '详情') {
        editRef.value.openDialog('查看应急物资代码',row,true);
      } else {
        editRef.value.openDialog('修改应急物资代码',row,false);
      }
    };
    // 新增后刷新
    const onMyAdds = (e: boolean) => {
      if (e) {
        listApi();
      } else {
        listApi();
      }
    };
        const editRef = ref();
        const onEdit = (val: string, row: object) => {
            if (val == '详情') {
                editRef.value.openDialog('查看应急物资代码', row, true);
            } else {
                editRef.value.openDialog('修改应急物资代码', row, false);
            }
        };
        // 新增后刷新
        const onMyAdds = (e: boolean) => {
            if (e) {
                listApi();
            } else {
                listApi();
            }
        };
        // 删除用户
        const onRowDel = (id: number) => {
      let arr = [];
      arr.push(id)
            let arr = [];
            arr.push(id);
            ElMessageBox.confirm('确定删除所选项吗?', '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
            })
          .then(() => {
            emergencySuppliesApi()
              .deleteEmergencySupplies(arr)
              .then((res) => {
                if (res.data.code == 200) {
                  ElMessage({
                    showClose: true,
                    message: res.data.msg,
                    type: 'success',
                  });
                  listApi();
                } else {
                  ElMessage({
                    showClose: true,
                    message: res.data.msg,
                    type: 'error',
                  });
                  listApi();
                }
              });
          })
          .catch(() => {});
                .then(() => {
                    emergencySuppliesApi()
                        .deleteEmergencySupplies(arr)
                        .then((res) => {
                            if (res.data.code == 200) {
                                ElMessage({
                                    showClose: true,
                                    message: res.data.msg,
                                    type: 'success',
                                });
                                listApi();
                            } else {
                                ElMessage({
                                    showClose: true,
                                    message: res.data.msg,
                                    type: 'error',
                                });
                                listApi();
                            }
                        });
                })
                .catch(() => {});
        };
    // 多选删除
    const onDeleteAll = () => {
      ElMessageBox.confirm('确定删除所选项吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
          .then(() => {
            emergencySuppliesApi()
                .deleteEmergencySupplies(deletAll.value)
                .then((res) => {
                  if (res.data.code == 200) {
                    ElMessage({
                      showClose: true,
                      message: res.data.msg,
                      type: 'success',
                    });
                    listApi();
                  } else {
                    ElMessage({
                      showClose: true,
                      message: res.data.msg,
                      type: 'error',
                    });
                    listApi();
                  }
                });
          })
          .catch(() => {});
    };
        // 多选删除
        const onDeleteAll = () => {
            ElMessageBox.confirm('确定删除所选项吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    emergencySuppliesApi()
                        .deleteEmergencySupplies(deletAll.value)
                        .then((res) => {
                            if (res.data.code == 200) {
                                ElMessage({
                                    showClose: true,
                                    message: res.data.msg,
                                    type: 'success',
                                });
                                listApi();
                            } else {
                                ElMessage({
                                    showClose: true,
                                    message: res.data.msg,
                                    type: 'error',
                                });
                                listApi();
                            }
                        });
                })
                .catch(() => {});
        };
        // 分页
        const pageIndex = ref();
        const pageSize = ref();
@@ -340,18 +329,18 @@
            listApi,
            onMounted,
            submitReset,
      onMyAdd,
      onEdit,
      editRef,
      onDeleteAll,
      handleSelectionChange,
      warning,
      danger,
      spectRef,
      onInspect,
      onMaintainAdd,
      onInspectAdd,
      onMyAdds,
            onMyAdd,
            onEdit,
            editRef,
            onDeleteAll,
            handleSelectionChange,
            warning,
            danger,
            spectRef,
            onInspect,
            onMaintainAdd,
            onInspectAdd,
            onMyAdds,
        };
    },
});

 src/views/contingencyManagement/emergencyResources/maintenanceOfEmergencyMaterials/component/openAdd.vue

@@ -1,276 +1,271 @@
<template>
  <div class="system-edit-user-container">
    <el-dialog
        :title="titles"
        v-model="isShowDialog"
        width="769px"
        draggable
        :fullscreen="full"
    >
      <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
      <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          size="default"
          label-width="120px"
          :disabled="disabled"
      >
        <el-row :gutter="35">
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="应急物资" prop="suppliesId">
              <el-input
                  v-model="ruleForm.suppliesId"
                  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="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="保养结果" prop="maintainResult">
              <el-select v-model="ruleForm.maintainResult" class="w100" placeholder="请选择">
                <el-option label="正常" value="正常"></el-option>
                <el-option label="异常" value="异常"></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="userUid">
              <el-input
                  v-model="ruleForm.userUid"
                  placeholder="请选择"
                  class="input-with-select"
              >
                <template #append>
                  <el-button :icon="Search" @click="openUser" />
                </template>
              </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="maintainTime">
              <el-date-picker
                  class="w100"
                  v-model="ruleForm.maintainTime"
                  type="datetime"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  placeholder="选择日期时间"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
    <div class="system-edit-user-container">
        <el-dialog :title="titles" v-model="isShowDialog" width="50%" @close="resetForm(ruleFormRef)" 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-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="应急物资" prop="suppliesName">
                            <el-input v-model="ruleForm.suppliesName" 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="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="保养结果" prop="maintainResult">
                            <el-select v-model="ruleForm.maintainResult" class="w100" placeholder="请选择">
                                <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="userName">
                            <el-input v-model="ruleForm.userName" placeholder="请选择" class="input-with-select">
                                <template #append>
                                    <el-button :icon="Search" @click="openUser(0)" />
                                </template>
                            </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="maintainTime">
                            <el-date-picker
                                class="w100"
                                v-model="ruleForm.maintainTime"
                                type="datetime"
                                value-format="YYYY-MM-DD HH:mm:ss"
                                placeholder="选择日期时间"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="resetForm(ruleFormRef)" size="default">关闭</el-button>
          <el-button size="default" type="primary" v-if="disabled == true ? false : true" @click="submitForm(titles, ruleFormRef)">确定</el-button>
                    <el-button size="default" type="primary" v-if="disabled == true ? false : true" @click="submitForm(ruleFormRef)">确定</el-button>
                </span>
      </template>
    </el-dialog>
    <EmergencySupplies ref="showRef" @SearchUser="onUser"/>
    <DailogSearchUser ref="userRef" @SearchUser="onUsers"/>
  </div>
            </template>
        </el-dialog>
        <EmergencySupplies ref="showRef" @SearchUser="onUser" />
        <DailogSearchUser ref="userRef" @SearchUser="onUsers" />
    </div>
</template>

<script lang="ts">
import {
  ref,
  defineComponent
} from 'vue';
import { ref, defineComponent, reactive } from 'vue';

import type {
  FormInstance,
  // FormRules,
} from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus';
import { ElMessage } from 'element-plus';
import {
  Search,
  FullScreen
} from '@element-plus/icons-vue'
import EmergencySupplies from '../../../../../components/emergencySupplies/index.vue'
import DailogSearchUser from "../../../../../components/DailogSearchUser/index.vue"
import {maintenanceEmergencyMaterialsApi} from "../../../../../api/maintenanceEmergencyMaterials";
import { Search, FullScreen } from '@element-plus/icons-vue';
import EmergencySupplies from '../../../../../components/emergencySupplies/index.vue';
import DailogSearchUser from '/@/components/DailogSearchUser/index.vue';
import { maintenanceEmergencyMaterialsApi } from '../../../../../api/maintenanceEmergencyMaterials';

export default defineComponent({
  name: 'openAdd',
  components: {
    DailogSearchUser,
    EmergencySupplies,
  },
  setup(props, { emit }) {
    const isShowDialog = ref(false)
    name: 'openAdd',
    components: {
        DailogSearchUser,
        EmergencySupplies,
    },
    setup(props, { emit }) {
        const isShowDialog = ref(false);

    const ruleFormRef = ref<FormInstance>()
    //定义表单
    const ruleForm = ref ({
      suppliesId: '', // 物资ID
      maintainResult: '', //保养结果
      maintainTime: '', // 创建时间
      userList: []
    });
    const titles = ref();
    const disabled = ref();
    // 打开弹窗
    const openDialog = (title: string, id: number, type: boolean) => {
      isShowDialog.value = true;
      titles.value = title;
      disabled.value = type;
      if (title == '查看应急物资保养' || title == '修改应急物资保养') {
        maintenanceEmergencyMaterialsApi()
            .seeMaintenanceEmergencyMaterials(id)
            .then((res) => {
              if (res.data.code == 200) {
                ruleForm.value = res.data.data;
              }
            });
      }
    };
    //日期选择器
    const maintainTime = ref('')
    // 表单提交验证必填项
    const submitForm = async (title: string, formEl: FormInstance | undefined) => {
      if (title == '新建应急物资保养') {
        if (!formEl) return;
        await formEl.validate((valid, fields) => {
          if (valid) {
            isShowDialog.value = false;
            maintenanceEmergencyMaterialsApi()
                .addMaintenanceEmergencyMaterials(ruleForm.value)
                .then((res) => {
                  if (res.data.code == 200) {
                    ElMessage({
                      showClose: true,
                      message: res.data.msg,
                      type: 'success',
                    });
                    emit('myAdd', true);
                  } else {
                    ElMessage({
                      showClose: true,
                      message: res.data.msg,
                      type: 'error',
                    });
                    emit('myAdd', true);
                  }
                  formEl.resetFields();
                });
          } else {
            console.log('error submit!', fields);
          }
        });
      }
      else if (title == '修改应急物资保养') {
        if (!formEl) return;
        await formEl.validate((valid, fields) => {
          if (valid) {
            isShowDialog.value = false;
            maintenanceEmergencyMaterialsApi()
                .editMaintenanceEmergencyMaterials(ruleForm.value)
                .then((res) => {
                  if (res.data.code == 200) {
                    ElMessage({
                      showClose: true,
                      message: '修改成功',
                      type: 'success',
                    });
                    emit('myAdd', true);
                  } else {
                    ElMessage({
                      showClose: true,
                      message: res.data.msg,
                      type: 'error',
                    });
                    emit('myAdd', true);
                  }
                  formEl.resetFields();
                });
          } else {
            console.log('error submit!', fields);
          }
        });
        formEl.resetFields();
        ruleForm.value = {
          suppliesId: '', // 队伍名称
          maintainResult: '', //队伍负责人
          maintainTime: '', // 负责人部门
          userList: []
        }
      }
    }
    const resetForm = (formEl: FormInstance | undefined) => {
      isShowDialog.value = false;
      if (!formEl) return;
      formEl.resetFields();
    };
    // 应急物资弹窗
    const showRef=ref()
    const daiInpt=()=>{
      showRef.value.openDailog()
    }
    const onUser = (e:any) => {
      ruleForm.value.suppliesId=e.id
    };
    // 编写人弹窗
    const userRef = ref();
    const openUser = () => {
      userRef.value.openDailog();
    };
    const onUsers = (e:any) => {
      ruleForm.value.userUid=e.uid
    };
    //全屏
    const full = ref(false);
    const toggleFullscreen = () => {
      if (full.value == false) {
        full.value = true;
      } else {
        full.value = false;
      }
    };
    return {
      openDialog,
      isShowDialog,
      Search,
      ruleForm,
      maintainTime,
      daiInpt,
      onUser,
      onUsers,
      showRef,
      ruleFormRef,
      submitForm,
      openUser,
      userRef,
      toggleFullscreen,
      FullScreen,
      full,
      resetForm,
      titles,
      disabled,
      emit,
    };
  },
        const ruleFormRef = ref<FormInstance>();
        //定义表单
        const ruleForm = ref({
            suppliesId: '', // 物资ID
            maintainResult: '', //保养结果
            maintainTime: '', // 创建时间
            userList: [],
        });
        const titles = ref();
        const disabled = ref();
        // 打开弹窗
        const openDialog = (title: string, id: number) => {
            isShowDialog.value = true;
            titles.value = `${title}应急物资保养`;
            disabled.value = title == '查看' ? true : false;
            if (title == '查看' || title == '修改') {
                maintenanceEmergencyMaterialsApi()
                    .seeMaintenanceEmergencyMaterials(id)
                    .then((res) => {
                        if (res.data.code == 200) {
                            ruleForm.value = res.data.data;
                            let arr = [];
                            for (let i = 0; i < ruleForm.value.userList.length; i++) {
                                arr.push(ruleForm.value.userList[i].userName);
                            }
                            ruleForm.value.userName = arr.toString();
                        }
                    });
            }
        };
        //日期选择器
        const maintainTime = ref('');
        // 表单提交验证必填项
        const submitForm = async (formEl: FormInstance | undefined) => {
            if (!formEl) return;
            await formEl.validate((valid, fields) => {
                if (valid) {
                    if (titles.value == '新建应急物资保养') {
                        isShowDialog.value = false;
                        maintenanceEmergencyMaterialsApi()
                            .addMaintenanceEmergencyMaterials(ruleForm.value)
                            .then((res) => {
                                if (res.data.code == 200) {
                                    ElMessage({
                                        showClose: true,
                                        message: res.data.msg,
                                        type: 'success',
                                    });
                                    emit('myAdd', true);
                                } else {
                                    ElMessage({
                                        showClose: true,
                                        message: res.data.msg,
                                        type: 'error',
                                    });
                                    emit('myAdd', true);
                                }
                            });
                    } else if (titles.value == '修改应急物资保养') {
                        isShowDialog.value = false;
                        maintenanceEmergencyMaterialsApi()
                            .editMaintenanceEmergencyMaterials(ruleForm.value)
                            .then((res) => {
                                if (res.data.code == 200) {
                                    ElMessage({
                                        showClose: true,
                                        message: '修改成功',
                                        type: 'success',
                                    });
                                    emit('myAdd', true);
                                } else {
                                    ElMessage({
                                        showClose: true,
                                        message: res.data.msg,
                                        type: 'error',
                                    });
                                    emit('myAdd', true);
                                }
                                formEl.resetFields();
                            });
                    }
                } else {
                    console.log('error submit!', fields);
                }
            });
            formEl.resetFields();
        };
        const resetForm = (formEl: FormInstance | undefined) => {
            isShowDialog.value = false;
            if (!formEl) return;
            formEl.resetFields();
        };
        const rules = reactive<FormRules>({
            nameTitle: [],
            maintainResult: [
                {
                    required: true,
                    message: '保养结果不能为空',
                    trigger: 'change',
                },
            ],
            userName: [
                {
                    required: true,
                    message: '创建人不能为空',
                    trigger: 'change',
                },
            ],
            maintainTime: [
                {
                    required: true,
                    message: '创建时间不能为空',
                    trigger: 'blur',
                },
            ],
        });
        // 应急物资弹窗
        const showRef = ref();
        const daiInpt = () => {
            showRef.value.openDailog();
        };
        const onUser = (e: any) => {
            ruleForm.value.suppliesId = e.id;
            ruleForm.value.suppliesName = e.name;
        };
        // 编写人弹窗
        const userRef = ref();
        const openUser = (data: any) => {
            userRef.value.openDailog(data);
        };
        const onUsers = (val: any) => {
            let arr = [];
            for (let i = 0; i < val.length; i++) {
                arr.push(val[i].realName);
                ruleForm.value.userList.push({
                    userUid: val[i].uid,
                    userName: val[i].realName,
                });
            }
            ruleForm.value.userName = arr.toString();
        };
        //全屏
        const full = ref(false);
        const toggleFullscreen = () => {
            if (full.value == false) {
                full.value = true;
            } else {
                full.value = false;
            }
        };
        return {
            openDialog,
            isShowDialog,
            Search,
            ruleForm,
            maintainTime,
            daiInpt,
            onUser,
            onUsers,
            rules,
            showRef,
            ruleFormRef,
            submitForm,
            openUser,
            userRef,
            toggleFullscreen,
            FullScreen,
            full,
            resetForm,
            titles,
            disabled,
            emit,
        };
    },
});
</script>
<style scoped lang="scss">
.textarea{
  height: 168px!important;
.textarea {
    height: 168px !important;
}
.textarea ::v-deep .el-textarea__inner{
  height: 168px!important;
.textarea ::v-deep .el-textarea__inner {
    height: 168px !important;
}
::v-deep .el-table__cell {
  font-weight: 400;
    font-weight: 400;
}
.el-divider--horizontal{
  height: 0;
  margin: 0;
  border-top: transparent;
.el-divider--horizontal {
    height: 0;
    margin: 0;
    border-top: transparent;
}
.el-select{
  width: 100%;
.el-select {
    width: 100%;
}
</style>

 src/views/contingencyManagement/emergencyResources/maintenanceOfEmergencyMaterials/index.vue

@@ -4,7 +4,7 @@
            <div class="system-user-search mb15">
                <el-form size="default" label-width="80px" :inline="true">
                    <el-form-item prop="telephone">
                        <el-input v-model="listQuery.searchParams.suppliesId" placeholder="请选择应急物资" class="input-with-select">
                        <el-input v-model="listQuery.searchParams.suppliesName" placeholder="请选择应急物资" class="input-with-select">
                            <template #append>
                                <el-button :icon="Search" @click="daiInpt" />
                            </template>
@@ -16,20 +16,14 @@
            </div>
            <div class="button_Line">
                <div class="button_Left">
                    <el-button size="default" type="primary" @click="onOpenAdd">
                        <el-icon>
                            <Plus /> </el-icon
                        >新建
                    <el-button size="default" type="primary" @click="onOpenAdd('新建')">
                        <el-icon> <Plus /> </el-icon>新建
                    </el-button>
                    <el-button size="default" type="warning" plain :disabled="warning">
                        <el-icon>
                            <Edit /> </el-icon
                        >修改
                        <el-icon> <Edit /> </el-icon>修改
                    </el-button>
                    <el-button size="default" type="danger" plain @click="onDeleteAll" :disabled="danger">
                        <el-icon>
                            <Delete /> </el-icon
                        >删除
                        <el-icon> <Delete /> </el-icon>删除
                    </el-button>
                </div>
                <div class="button_Right">
@@ -46,33 +40,32 @@
                </div>
            </div>
            <el-table :data="tableData" style="width: 100%" ref="multipleTableRef" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="suppliesId" label="应急物资" min-width="120" show-overflow-tooltip sortable></el-table-column>
                <el-table-column prop="maintainResult" label="保养结果" min-width="120" show-overflow-tooltip sortable></el-table-column>
                <el-table-column prop="maintainTime" label="保养日期" min-width="120" show-overflow-tooltip sortable></el-table-column>
                <el-table-column align="center" type="selection" width="55" />
                <el-table-column align="center" prop="suppliesName" label="应急物资" min-width="120" show-overflow-tooltip sortable></el-table-column>
                <el-table-column align="center" label="保养结果" min-width="120" show-overflow-tooltip sortable>
                    <template #default="scope">
                        <span v-if="scope.row.maintainResult == 1">正常</span>
                        <span v-if="scope.row.maintainResult == 2">异常</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="maintainTime" label="保养日期" min-width="120" show-overflow-tooltip sortable></el-table-column>
                <el-table-column label="操作" width="200" align="center" fixed="right">
                    <template #default="scope">
                        <el-button size="small" text type="primary" @click="onEdit('详情',scope.row.id)">
                            <el-icon style="margin-right: 5px">
                                <View /> </el-icon
                            >查看
                        <el-button size="small" text type="primary" @click="onEdit('查看', scope.row.id)">
                            <el-icon style="margin-right: 5px"> <View /> </el-icon>查看
                        </el-button>
            <el-button size="small" text type="primary" @click="onEdit('修改',scope.row.id)">
              <el-icon style="margin-right: 5px">
                <EditPen /> </el-icon
              >修改
            </el-button>
                        <el-button size="small" text type="primary" @click="onEdit('修改', scope.row.id)">
                            <el-icon style="margin-right: 5px"> <EditPen /> </el-icon>修改
                        </el-button>
                        <el-button size="small" text type="primary" @click="onRowDel(scope.row.id)">
                            <el-icon>
                                <Delete /> </el-icon
                            >删除
                            <el-icon> <Delete /> </el-icon>删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pages">
                <el-pagination
          v-if="tableData.length == 0 ? false : true"
                    v-if="tableData.length == 0 ? false : true"
                    v-model:currentPage="pageIndex"
                    v-model:page-size="pageSize"
                    :page-sizes="[10, 20, 30]"
@@ -84,20 +77,15 @@
                />
            </div>
        </el-card>
        <EmergencySupplies ref="showRef" @SearchUser="onUser"/>
        <OpenSee ref="editRef"/>
        <EmergencySupplies ref="showRef" @SearchUser="onUser" />
        <OpenSee ref="editRef" />
        <upData ref="upShow"></upData>
        <OpenAdd ref="addRef"  @myAdd="onMyAdd" />
        <OpenAdd ref="addRef" @myAdd="onMyAdd" />
    </div>
</template>

<script lang="ts">
import {
  reactive,
  onMounted,
  ref,
  defineComponent
} from 'vue';
import { reactive, onMounted, ref, defineComponent } from 'vue';
import {
    ElMessageBox,
    ElMessage,
@@ -112,11 +100,11 @@
// import { contingencyApi } from '/@/api/contingency';
// import { emergencySuppliesMaintainApi } from '/@/api/emergencySuppliesMaintain';

import OpenSee from '../../emergencyPlanStartRecord/component/openSee.vue'
import UpData from '../../panManagement/component/upData.vue'
import EmergencySupplies from '../../../../components/emergencySupplies/index.vue'
import OpenAdd from '../maintenanceOfEmergencyMaterials/component/openAdd.vue'
import {maintenanceEmergencyMaterialsApi} from "/@/api/maintenanceEmergencyMaterials";
import OpenSee from '../../emergencyPlanStartRecord/component/openSee.vue';
import UpData from '../../panManagement/component/upData.vue';
import EmergencySupplies from '../../../../components/emergencySupplies/index.vue';
import OpenAdd from '../maintenanceOfEmergencyMaterials/component/openAdd.vue';
import { maintenanceEmergencyMaterialsApi } from '/@/api/maintenanceEmergencyMaterials';

export default defineComponent({
    name: 'systemUser',
@@ -142,132 +130,134 @@
                suppliesId: '',
            },
        });
    // 定义表格数据
    const tableData = ref([]);
        // 定义表格数据
        const tableData = ref([]);
        // 请求列表数据
        const onSubmit = async () => {
      let res = await maintenanceEmergencyMaterialsApi().getMaintenanceEmergencyMaterialsList(listQuery);
      if (res.data.code == 200) {
        tableData.value = res.data.data;
        pageIndex.value = res.data.pageIndex;
        pageSize.value = res.data.pageSize;
        total.value = res.data.total;
      } else {
        ElMessage({
          showClose: true,
          message: res.data.msg,
          type: 'error',
        });
      }
            let res = await maintenanceEmergencyMaterialsApi().getMaintenanceEmergencyMaterialsList(listQuery);
            if (res.data.code == 200) {
                tableData.value = res.data.data;
                pageIndex.value = res.data.pageIndex;
                pageSize.value = res.data.pageSize;
                total.value = res.data.total;
            } else {
                ElMessage({
                    showClose: true,
                    message: res.data.msg,
                    type: 'error',
                });
            }
        };
    // 重置
    const submitReset = () => {
      listQuery.searchParams.suppliesId = '';
      onSubmit();
    };
    const warning = ref(true);
    const danger = ref(true);
    const deletAll = ref();
    const handleSelectionChange = (val: any) => {
      let valId = JSON.parse(JSON.stringify(val));
      let arr = [];
      for (let i = 0; i < valId.length; i++) {
        arr.push(valId[i].id);
      }
      deletAll.value = arr.toString();
      if (val.length == 1) {
        warning.value = false;
        danger.value = false;
      } else if (val.length == 0) {
        warning.value = true;
        danger.value = true;
      } else {
        warning.value = true;
        danger.value = false;
      }
    };
        // 重置
        const submitReset = () => {
            listQuery.searchParams.suppliesId = '';
            onSubmit();
        };
        const warning = ref(true);
        const danger = ref(true);
        const deletAll = ref();
        const handleSelectionChange = (val: any) => {
            let valId = JSON.parse(JSON.stringify(val));
            let arr = [];
            for (let i = 0; i < valId.length; i++) {
                arr.push(valId[i].id);
            }
            deletAll.value = arr
            if (val.length == 1) {
                warning.value = false;
                danger.value = false;
            } else if (val.length == 0) {
                warning.value = true;
                danger.value = true;
            } else {
                warning.value = true;
                danger.value = false;
            }
        };

    // 打开新建用户弹窗
        // 打开新建用户弹窗
        const addRef = ref();
        const onOpenAdd = () => {
            addRef.value.openDialog('新建应急物资保养',false);
        const onOpenAdd = (data:any) => {
            addRef.value.openDialog(data);
        };
    // 新增后刷新
    const onMyAdd = (e: boolean) => {
      if (e) {
        onSubmit();
      } else {
        onSubmit();
      }
    };
    // 打开修改用户弹窗
    const onEdit = (val: string, row: object) => {
      if (val == '详情') {
        addRef.value.openDialog('查看应急物资保养',row,true);
      } else {
        addRef.value.openDialog('修改应急物资保养',row,false);
      }
    };
    // 删除
    const onRowDel = (data: any) => {
      ElMessageBox.confirm('确定删除所选项吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
          .then(() => {
            maintenanceEmergencyMaterialsApi()
                .deleteMaintenanceEmergencyMaterials(data)
                .then((res) => {
                  if (res.data.code == 200) {
                    ElMessage({
                      showClose: true,
                      message: res.data.msg,
                      type: 'success',
                    });
                    onSubmit();
                  } else {
                    ElMessage({
                      showClose: true,
                      message: res.data.msg,
                      type: 'error',
                    });
                    onSubmit();
                  }
                });
          })
          .catch(() => {});
    };
    // 多选删除
    const onDeleteAll = () => {
      ElMessageBox.confirm('确定删除所选项吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
          .then(() => {
            maintenanceEmergencyMaterialsApi()
                .deleteMaintenanceEmergencyMaterials(deletAll.value)
                .then((res) => {
                  if (res.data.code == 200) {
                    ElMessage({
                      showClose: true,
                      message: res.data.msg,
                      type: 'success',
                    });
                    onSubmit();
                  } else {
                    ElMessage({
                      showClose: true,
                      message: res.data.msg,
                      type: 'error',
                    });
                    onSubmit();
                  }
                });
          })
          .catch(() => {});
    };
        // 新增后刷新
        const onMyAdd = (e: boolean) => {
            if (e) {
                onSubmit();
            } else {
                onSubmit();
            }
        };
        // 打开修改用户弹窗
        const onEdit = (val: string, row: object) => {
            if (val == '详情') {
                addRef.value.openDialog(val, row);
            } else {
                addRef.value.openDialog(val, row);
            }
        };
        // 删除
        const onRowDel = (data: any) => {
            let arr=[]
            arr.push(data)
            ElMessageBox.confirm('确定删除所选项吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    maintenanceEmergencyMaterialsApi()
                        .deleteMaintenanceEmergencyMaterials(arr)
                        .then((res) => {
                            if (res.data.code == 200) {
                                ElMessage({
                                    showClose: true,
                                    message: res.data.msg,
                                    type: 'success',
                                });
                                onSubmit();
                            } else {
                                ElMessage({
                                    showClose: true,
                                    message: res.data.msg,
                                    type: 'error',
                                });
                                onSubmit();
                            }
                        });
                })
                .catch(() => {});
        };
        // 多选删除
        const onDeleteAll = () => {
            ElMessageBox.confirm('确定删除所选项吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    maintenanceEmergencyMaterialsApi()
                        .deleteMaintenanceEmergencyMaterials(deletAll.value)
                        .then((res) => {
                            if (res.data.code == 200) {
                                ElMessage({
                                    showClose: true,
                                    message: res.data.msg,
                                    type: 'success',
                                });
                                onSubmit();
                            } else {
                                ElMessage({
                                    showClose: true,
                                    message: res.data.msg,
                                    type: 'error',
                                });
                                onSubmit();
                            }
                        });
                })
                .catch(() => {});
        };
        // 上传
        const upShow = ref();
        const upButton = () => {
@@ -278,26 +268,27 @@
        const daiInpt = () => {
            showRef.value.openDailog();
        };
    const onUser = (e:any) => {
      listQuery.searchParams.suppliesId=e.id
    };
        const onUser = (e: any) => {
            listQuery.searchParams.suppliesId = e.id;
            listQuery.searchParams.suppliesName=e.name
        };
        // 分页
    const pageIndex = ref();
    const pageSize = ref();
    const total = ref();
        const pageIndex = ref();
        const pageSize = ref();
        const total = ref();
        // 分页改变
        const handleSizeChange = (val: number) => {
      listQuery.pageSize = val;
      onSubmit();
            listQuery.pageSize = val;
            onSubmit();
        };
        // 分页未改变
        const handleCurrentChange = (val: number) => {
      listQuery.pageIndex = val;
      onSubmit();
            listQuery.pageIndex = val;
            onSubmit();
        };
        // 页面加载时
        onMounted(() => {
      onSubmit();
            onSubmit();
        });
        return {
            upButton,
@@ -312,19 +303,19 @@
            onOpenAdd, //新增
            addRef,
            onSubmit,
      submitReset,
      onMyAdd,
      listQuery,
      warning,
      danger,
      tableData,
      pageIndex,
      pageSize,
      total,
      handleSelectionChange,
      onDeleteAll,
      onEdit,
      onUser,
            submitReset,
            onMyAdd,
            listQuery,
            warning,
            danger,
            tableData,
            pageIndex,
            pageSize,
            total,
            handleSelectionChange,
            onDeleteAll,
            onEdit,
            onUser,
        };
    },
});