合并

Your Name

2022-09-08 5a1616f169d75ece07d2d12a8edac3e5f660a920

 src/views/contingencyManagement/processForm/component/formInformationTops.vue

@@ -0,0 +1,312 @@
<template>
   <el-form ref="form" :model="form" label-width="120px">
      <el-row>
         <el-col :span="12">
            <el-form-item label="预案名称">
               <el-input v-model="form.name" placeholder="请填写预案名称"></el-input>
            </el-form-item>
         </el-col>
         <el-col :span="12">
            <el-form-item label="适用部门">
          <el-tree-select
              class="select"
              placeholder="请选择"
              v-model="value"
              :data="data"
              :render-after-expand="false"
              show-checkbox
              multiple
              clearable
          />
            </el-form-item>
         </el-col>
      </el-row>
      <el-row>
         <el-col :span="12">
            <el-form-item label="预案类型">
          <el-select class="select" v-model="form.region" placeholder="请选择">
            <el-option label="综合应急预案" value="shanghai" />
            <el-option label="现场处置方案" value="beijing" />
            <el-option label="专项应急预案" value="shanghai" />
            <el-option label="其它预案" value="beijing" />
          </el-select>
            </el-form-item>
         </el-col>
         <el-col :span="12">
            <el-form-item label="危险源关联">
          <el-select class="select" v-model="form.region" placeholder="请选择">
            <el-option label="是" value="shanghai" />
            <el-option label="否" value="beijing" />
          </el-select>
            </el-form-item>
         </el-col>
      </el-row>
      <el-row>
         <el-col :span="12">
            <el-form-item label="预案级别">
          <el-select class="select" v-model="form.region" placeholder="请选择">
            <el-option label="公司及" value="shanghai" />
            <el-option label="分厂级" value="beijing" />
            <el-option label="车间级" value="beijing" />
          </el-select>
            </el-form-item>
         </el-col>
         <el-col :span="12">
            <el-form-item label="编写人">
          <el-input
              v-model="form.teamLeader"
              placeholder="请选择"
              class="input-with-select"
          >
            <template #append>
              <el-button :icon="Search" @click="openUser"/>
            </template>
          </el-input>
            </el-form-item>
         </el-col>
      </el-row>
      <el-row>
         <el-col :span="12">
            <el-form-item label="编写部门"  placeholder="请选择">
          <el-tree-select
              class="select"
              v-model="value2"
              :data="dataSelect"
              :render-after-expand="false"
              multiple
              check-strictly
              check-on-click-node
              clearable
          />
            </el-form-item>
         </el-col>
      <el-col :span="12">
        <el-form-item label="发布实施日期">
          <el-date-picker v-model="datetime" type="datetime" placeholder="选择日期时间" style="width: 100%" />
        </el-form-item>
      </el-col>
      </el-row>
    <el-row>
      <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
        <el-form-item label="应急队伍" prop="telephone" @click="daiInpt" >
          <el-input
              v-model="form.teamLeader"
              placeholder="请选择"
              class="input-with-select"
          >
            <template #append>
              <el-button :icon="Search"/>
            </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-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"
            >点击上传</el-button>
            <template #tip>
              <div class="el-upload__tip">
                添加相关附件
              </div>
            </template>
          </el-upload>
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
        <el-form-item label="区域名称" prop="telephone">
          <el-input
              v-model="form.teamLeader"
              placeholder="请选择"
              class="input-with-select"
          >
            <template #append>
              <el-button :icon="Search" @click="regionsDialog"/>
            </template>
          </el-input>
        </el-form-item>
      </el-col>
    </el-row>
   </el-form>
  <checkTemplate ref="ShowRef"/>
  <userSelections ref="userRef"/>
  <RegionsDialog ref="openRef"/>
</template>
<script lang="ts">
import {
  defineComponent,
  ref,
  reactive
} from 'vue';
import {
  Search
} from '@element-plus/icons-vue'
import UserSelections from "/@/components/userSelections/index.vue"
import CheckTemplate from "/@/components/checkTemplate/index.vue"
import RegionsDialog from "/@/components/regionsDialog/index.vue";
export default defineComponent({
  components: {
    CheckTemplate,
    UserSelections,
    RegionsDialog,
  },
   setup() {
      const form = reactive({
         name: '',
      value: '',
      value2: '',
      teamLeader: '',

      // data: '',
      // dataSelect: '',
         date1: '',
         date2: '',
         delivery: false,
         type: [],
         resource: '',
         desc: '',
      });

    // 可选择树形选择框
    const value = ref()

    const data = [
      {
        value: '1',
        label: '广汇能源综合物流发展有限责任公司',
        children: [
          {
            value: '1-1',
            label: '生产运行部',
            children: [
              {
                value: '1-1-1',
                label: '工艺二班',
              },
            ],
          },
        ],
      }
    ]
    // 树形选择框
    const value2 = ref()

    const dataSelect = [
      {
        value: '1',
        label: '广汇能源综合物流发展有限责任公司',
        children: [
          {
            value: '1-1',
            label: '生产运行部',
            children: [
              {
                value: '1-1-1',
                label: '工艺二班',
              },
            ],
          },
        ],
      }
    ]
    // 应急队伍弹窗
    const ShowRef=ref()
    const daiInpt=()=>{
      ShowRef.value.openDailog()
    }
    // 选择区域弹窗
    const openRef=ref()
    const regionsDialog=()=>{
      openRef.value.openDailog()
    }
    // 打开编写人选择用户弹窗
    const userRef = ref();
    const openUser = () => {
      userRef.value.openDialog();
    };
    // 日期选择
    const datetime = ref('')
      return {
         form,
      value,
      data,
      value2,
      dataSelect,
      openUser,
      userRef,
      Search,
      ShowRef,
      daiInpt,
      openRef,
      datetime,
      regionsDialog,
      };
   },
});
</script>
<style scoped>
.title {
   text-align: center;
   font-size: 16px;
   margin-bottom: 20px;
}
.box {
   border: 1px solid #dcdfe6;
   box-shadow: 0 2px 4px 0 rgb(0 0 0 / 12%), 0 0 6px 0 rgb(0 0 0 / 4%);
}
.navType {
   background-color: #fff;
}
.tiao {
   width: 100%;
   height: 1px;
   background-color: #dcdfe6;
   margin: 30px 0;
   position: relative;
}
.typeS {
   width: 80px;
   background-color: #fff;
   position: absolute;
   left: 30px;
   top: -9px;
   font-size: 14px;
   text-align: center;
}
.logoColor {
   background-color: #67c23a;
   color: #fff;
   padding: 5px 8px;
   border-radius: 5px;
   margin-right: 5px;
}
.btns {
   width: 100%;
   padding: 20px 0;
   background-color: #fff;
   position: fixed;
   bottom: 0px;
   left: 0px;
   text-align: center;
   box-shadow: 0 -3px 5px 0 rgb(0 0 0 / 12%);
}
.title2 {
   padding: 20px 0 20px 10px;
   width: 100%;
   border: 1px solid #dcdfe6;
}
.el-row{
   padding:0 0 20px 0;
}
.select{
  width: 100%;
}
.select ::v-deep .el-select{
  width: 100%;
}
</style>