InteSecurePlatform.git

<template>
  <div class="system-edit-user-container">
    <el-dialog
        :title="title"
        v-model="isShowDialog"
        width="769px"
        draggable
        :fullscreen="full"
    >
      <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
      <el-form
          :model="ruleForm"
          size="default"
          :rules="rules"
          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="teamName">
              <el-input v-model="ruleForm.teamName" :disabled="true"></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="teamLevel">
              <el-select v-model="ruleForm.teamLevel" :disabled="true" class="w100">
                <el-option label="公司" value="admin"></el-option>
                <el-option label="分厂-车间" value="common"></el-option>
                <el-option label="工序-班组等" value="shang"></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="principalUid">
              <el-input
                  v-model="ruleForm.principalUid"
                  placeholder="Please input"
                  class="input-with-select"
                  :disabled="true"
              >
                <template #append>
                  <el-button :icon="Search"/>
                </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="principalDepartmentId">
              <el-tree-select v-model="ruleForm.principalDepartmentId" :data="data"  :disabled="true" class="w100"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="负责人手机" prop="principalPhone">
              <el-input v-model="ruleForm.principalPhone" :disabled="true"></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="telephoneNumber">
              <el-input v-model="ruleForm.telephoneNumber" :disabled="true"></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="队伍描述" prop="teamDesc">
              <el-input class="textarea" v-model="ruleForm.teamDesc" type="textarea" :disabled="true" maxlength="150"></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="相关附件" prop="fileList">
              <el-upload
                  v-model:file-list="fileList"
                  class="upload-demo"
                  action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                  :on-change="handleChange"
              >
                <el-button type="primary" disabled
                >点击上传</el-button>
                <template #tip>
                  <div class="el-upload__tip">
                    添加相关附件
                  </div>
                </template>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
              <el-tab-pane label="应急队伍人员" name="first">
                <el-button type="primary" size="default" disabled>新增</el-button>
                <el-table
                    :data="tableData"
                    style="width: 100%;margin-top: 15px;"
                    ref="multipleTableRef"
                    :header-cell-style="{background:'#f6f7fa',color:'#909399'}"
                >
                  <el-table-column prop="jobNo" label="人员工号" show-overflow-tooltip></el-table-column>
                  <el-table-column prop="personnelName" label="人员名称" show-overflow-tooltip></el-table-column>
                  <el-table-column prop="phone" label="手机号码" show-overflow-tooltip></el-table-column>
                  <el-table-column prop="position" label="职位" show-overflow-tooltip></el-table-column>
                  <el-table-column label="操作" width="200" align="center">
                    <template #default="scope">
                      <el-button disabled size="small" text="plain" >查看
                      </el-button>
                      <el-button disabled size="small" text="plain" style="margin-right: 5px;">编辑
                      </el-button>
                      <el-button disabled size="small" text="plain" style="margin-right: 5px;">删除
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
            </el-tabs>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
                <span class="dialog-footer">
                    <el-button @click="onCancel" size="default">关闭</el-button>
                </span>
      </template>
    </el-dialog>
<!--    <AddTeamLeader ref="addRef" />-->
  </div>
</template>
 
<script lang="ts">
import { reactive, toRefs, ref, onMounted, defineComponent } from 'vue';
import type {
  UploadUserFile,
  TabsPaneContext,
  FormRules,
} from 'element-plus'
import {
  Search,
  FullScreen
} from '@element-plus/icons-vue'
// import AddTeamLeader from '/@/views/contingency/component/addEmergencyPersonnel.vue';
// 定义接口来定义对象的类型
interface MenuDataTree {
  id: number;
  label: string;
  children?: MenuDataTree[];
}
 
// 定义表格数据类型
interface User {
  personnelName: string
  jobNo: string
  phone: string;
  position: string;
}
 
interface RoleState {
  title:string,
  // buttonName:string,
  isShowDialog: boolean;
  ruleForm: {
    teamName: string;
    teamLevel: string;
    principalUid: number;
    principalDepartmentId: number;
    principalPhone: string;
    telephoneNumber: string;
    teamDesc: string;
    fileList: string,
  };
  menuData: Array<MenuDataTree>;
}
export default defineComponent({
  name: 'openSee',
  components: {
    // Search,
  },
  setup() {
    const state = reactive<RoleState>({
      isShowDialog: false,
      title:'',
      // buttonName:'',
      ruleForm: {
        teamName: '', // 队伍名称
        teamLevel: '', // 队伍级别
        principalUid: 1, // 队伍负责人
        principalDepartmentId: 2,  //负责人部门
        principalPhone: '', // 负责人手机
        telephoneNumber: '', // 固定电话
        teamDesc: '',  //队伍描述
        fileList: [],
      },
      menuData: [],
    });
    // 打开弹窗
    const openDialog = (type: string, value: any) => {
      state.isShowDialog = true;
      if(type === '查看'){
        state.title = '查看应急队伍管理'
        // state.buttonName = '新增'
        state.ruleForm = {
          teamName: '', // 队伍名称
          teamLevel: '', // 队伍级别
          principalUid: 1, // 队伍负责人
          principalDepartmentId: 2,  //负责人部门
          principalPhone: '', // 负责人手机
          telephoneNumber: '', // 固定电话
          teamDesc: '',  //队伍描述
          fileList: [],
        }
      }else{
        // state.title = '修改应急队伍管理'
        // // state.buttonName = '确定'
        // state.ruleForm = JSON.parse(JSON.stringify(value))
      }
    };
    // 关闭弹窗
    const closeDialog = () => {
      state.isShowDialog = false;
    };
    // 取消
    const onCancel = () => {
      closeDialog();
    };
    // // 初始化部门数据
    // const initTableData = () => {
    //   state.deptData.push({
    //     deptName: 'vueNextAdmin',
    //     createTime: new Date().toLocaleString(),
    //     status: true,
    //     sort: Math.random(),
    //     describe: '顶级部门',
    //     id: Math.random(),
    //     children: [
    //       {
    //         deptName: 'IT外包服务',
    //         createTime: new Date().toLocaleString(),
    //         status: true,
    //         sort: Math.random(),
    //         describe: '总部',
    //         id: Math.random(),
    //       },
    //       {
    //         deptName: '资本控股',
    //         createTime: new Date().toLocaleString(),
    //         status: true,
    //         sort: Math.random(),
    //         describe: '分部',
    //         id: Math.random(),
    //       },
    //     ],
    //   });
    // };
    // // 页面加载时
    // onMounted(() => {
    //   initTableData();
    // });
    // 上传附件
    const fileList = ref<UploadUserFile[]>([])
 
    //定义树形下拉框
    const responsibleDepartment = ref()
    const data = [
      {
        value: '1',
        label: '广汇能源综合物流发展有限责任公司',
        children: [
          {
            value: '1-1',
            label: '经营班子',
            children: [],
          },
        ],
      },
      {
        value: '2',
        label: '生产运行部',
        children: [
          {
            value: '2-1',
            label: '灌装一班',
            children: []
          },
          {
            value: '2-2',
            label: '工艺四班',
            children: [],
          },
        ],
      },
      {
        value: '3',
        label: '设备部',
        children: [
          {
            value: '3-1',
            label: '仪表班',
            children: [],
          },
          {
            value: '3-2',
            label: '机修班',
            children: [],
          },
        ],
      },
    ]
    //定义tabs切换
    const activeName = ref('first')
 
    const handleClick = (tab: TabsPaneContext, event: Event) => {
      console.log(tab, event)
    }
 
    //定义表格数据
    const multipleSelection = ref<User[]>([])
    const tableData: User[] = [
      {
        personnelName: '张志刚',
        jobNo: '1037',
        position: '副组长',
        phone: '13673321356',
      },
      {
        personnelName: '张志刚',
        jobNo: '1037',
        position: '副组长',
        phone: '13673321356',
      },
      {
        personnelName: '张志刚',
        jobNo: '1037',
        position: '副组长',
        phone: '13673321356',
      },
      {
        personnelName: '张志刚',
        jobNo: '1037',
        position: '副组长',
        phone: '13673321356',
      }
    ]
 
    // 必填项提示
    const rules = reactive<FormRules>({
      teamName: [
        {
          required: true,
          message: '队伍名称不能为空',
          trigger: 'change',
        },
      ],
      teamLevel: [
        {
          required: true,
          message: '队伍级别不能为空',
          trigger: 'change',
        },
      ],
      principalUid: [
        {
          required: true,
          message: '队伍负责人不能为空',
          trigger: 'change',
        },
      ],
      principalDepartmentId: [
        {
          required: true,
          message: '负责人部门不能为空',
          trigger: 'change',
        },
      ],
      principalPhone: [
        {
          required: true,
          message: '负责人手机不能为空',
          trigger: 'change',
        },
      ],
      telephoneNumber: [
        {
          required: true,
          message: '固定电话不能为空',
          trigger: 'change',
        },
      ],
    })
    //全屏
    const full = ref(false);
    const toggleFullscreen = () => {
      if(full.value == false) {
        full.value = true;
      } else {
        full.value = false;
      }
    };
    return {
      openDialog,
      closeDialog,
      onCancel,
      fileList,
      responsibleDepartment,
      data,
      activeName,
      handleClick,
      tableData,
      multipleSelection,
      Search,
      // addRef,
      // onAddTeamLeader,
      ...toRefs(state),
      toggleFullscreen,
      FullScreen,
      full,
      rules,
    };
  },
});
</script>
<style scoped lang="scss">
.textarea{
  height: 168px!important;
}
.textarea ::v-deep .el-textarea__inner{
  height: 168px!important;
}
::v-deep .el-table__cell {
  font-weight: 400;
}
</style>