221 lines
7.4 KiB
Vue
221 lines
7.4 KiB
Vue
|
<template>
|
||
|
|
<div class="dialog" v-if="dialogForm">
|
||
|
|
<div class="head_box">
|
||
|
|
<span class="title">{{ title }}</span>
|
||
|
|
<div>
|
||
|
|
<el-button size="small" @click="close">关闭</el-button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="cntinfo">
|
||
|
|
<el-tabs v-model="activeName">
|
||
|
|
<el-tab-pane label="场所信息" name="basic">
|
||
|
|
<el-form :model="listQuery" :label-width="230" label-position="left">
|
||
|
|
<div class="flex align-center">
|
||
|
|
<div style="width: calc(100% - 176px);">
|
||
|
|
<div class="form-row">
|
||
|
|
<el-form-item label="统一社会信用代码">
|
||
|
|
<el-input v-model="listQuery.tyshdm" placeholder="ktv"/>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="单位名称（营业执照登记名称）">
|
||
|
|
<el-input v-model="listQuery.djmc" placeholder="请输入"/>
|
||
|
|
</el-form-item>
|
||
|
|
</div>
|
||
|
|
<div class="form-row">
|
||
|
|
<el-form-item label="场所名称">
|
||
|
|
<el-input v-model="listQuery.csmc" placeholder="请输入"/>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="场所联系电话">
|
||
|
|
<el-input v-model="listQuery.cslxdh" placeholder="请输入"/>
|
||
|
|
</el-form-item>
|
||
|
|
</div>
|
||
|
|
<div class="form-row">
|
||
|
|
<el-form-item label="经营状况">
|
||
|
|
<el-input v-model="listQuery.csdm" placeholder="请输入"/>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="场所面积">
|
||
|
|
<el-input v-model="listQuery.csmj" placeholder="请输入"/>
|
||
|
|
</el-form-item>
|
||
|
|
</div>
|
||
|
|
<div class="form-row">
|
||
|
|
<el-form-item label="开业日期">
|
||
|
|
<el-input v-model="listQuery.kyrq" placeholder="请输入"/>
|
||
|
|
</el-form-item>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<img height="130" src="@/assets/images/person.png" alt="">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<el-form-item label="单位注册地址">
|
||
|
|
<el-input v-model="listQuery.dwzcdz" placeholder="请输入"/>
|
||
|
|
</el-form-item>
|
||
|
|
|
||
|
|
<el-form-item label="场所地址">
|
||
|
|
<el-input v-model="listQuery.csdz" placeholder="请输入"/>
|
||
|
|
</el-form-item>
|
||
|
|
|
||
|
|
<div class="flex align-center">
|
||
|
|
<div style="width: calc(100% - 176px);">
|
||
|
|
<div class="form-row">
|
||
|
|
<el-form-item label="法定代表人">
|
||
|
|
<el-input v-model="listQuery.fddbr" placeholder="请输入"/>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="法定代表人证件号码">
|
||
|
|
<el-input v-model="listQuery.fddbrzjhm" placeholder="请输入"/>
|
||
|
|
</el-form-item>
|
||
|
|
</div>
|
||
|
|
<div class="form-row">
|
||
|
|
<el-form-item label="法定代表人联系电话">
|
||
|
|
<el-input v-model="listQuery.fddbrLxdh" placeholder="请输入"/>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="法定代表人居住地址">
|
||
|
|
<el-input v-model="listQuery.fddbrJzdz" placeholder="请输入"/>
|
||
|
|
</el-form-item>
|
||
|
|
</div>
|
||
|
|
<div class="form-row">
|
||
|
|
<el-form-item label="场所负责人">
|
||
|
|
<el-input v-model="listQuery.csfzr" placeholder="请输入"/>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="场所负责人身份证号">
|
||
|
|
<el-input v-model="listQuery.csfzrSfzh" placeholder="请输入"/>
|
||
|
|
</el-form-item>
|
||
|
|
</div>
|
||
|
|
<div class="form-row">
|
||
|
|
<el-form-item label="场所负责人联系方式">
|
||
|
|
<el-input v-model="listQuery.csfzrLxfs" placeholder="请输入"/>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="场所负责人居住地址">
|
||
|
|
<el-input v-model="listQuery.csfzrJzdz" placeholder="请输入"/>
|
||
|
|
</el-form-item>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<img height="65" style="width: 100%;" src="@/assets/images/person.png" alt="">
|
||
|
|
<img height="65" style="width: 100%;" src="@/assets/images/person.png" alt="">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="upload-group">
|
||
|
|
<el-form-item label="营业执照照片">
|
||
|
|
<img height="130" src="@/assets/images/person.png" alt="">
|
||
|
|
<img height="130" src="@/assets/images/person.png" alt="">
|
||
|
|
<img height="130" src="@/assets/images/person.png" alt="">
|
||
|
|
</el-form-item>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-row">
|
||
|
|
<el-form-item label="机修场所备案编号">
|
||
|
|
<el-input v-model="listQuery.jxcsbabh" placeholder="请输入"/>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="场所备案机构名称">
|
||
|
|
<el-input v-model="listQuery.ylcsbajgmc" placeholder="请输入"/>
|
||
|
|
</el-form-item>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-row">
|
||
|
|
<el-form-item label="备案登记日期">
|
||
|
|
<el-input v-model="listQuery.badjrq" placeholder="请输入"/>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="所属辖区">
|
||
|
|
<el-input v-model="listQuery.ssxq" placeholder="请输入"/>
|
||
|
|
</el-form-item>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-row">
|
||
|
|
<el-form-item label="责任民警">
|
||
|
|
<el-input v-model="listQuery.zrmj" placeholder="请输入"/>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="警号">
|
||
|
|
<el-input v-model="listQuery.jh" placeholder="请输入"/>
|
||
|
|
</el-form-item>
|
||
|
|
</div>
|
||
|
|
</el-form>
|
||
|
|
</el-tab-pane>
|
||
|
|
<el-tab-pane label="从业人员" name="staff">
|
||
|
|
<!-- 从业人员表格 -->
|
||
|
|
</el-tab-pane>
|
||
|
|
</el-tabs>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { ref, reactive } from 'vue';
|
||
|
|
import { Plus } from '@element-plus/icons-vue';
|
||
|
|
|
||
|
|
const dialogForm = ref(false);
|
||
|
|
const activeName = ref('basic');
|
||
|
|
const title = ref('废旧金属回收场所详情');
|
||
|
|
const listQuery = ref({});
|
||
|
|
|
||
|
|
const areaOptions = ref([]); // 区域选项数据
|
||
|
|
|
||
|
|
// 初始化数据
|
||
|
|
const init = (type, row,) => {
|
||
|
|
dialogForm.value = true;
|
||
|
|
// 根据type和row初始化表单数据
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
const close = () => {
|
||
|
|
dialogForm.value = false;
|
||
|
|
};
|
||
|
|
|
||
|
|
defineExpose({init})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.dialog {
|
||
|
|
padding: 20px;
|
||
|
|
|
||
|
|
:deep(.el-form-item__label) {
|
||
|
|
background-color: #F7FAFB;
|
||
|
|
padding: 0px 8px;
|
||
|
|
color: #000;
|
||
|
|
font-weight: 500;
|
||
|
|
border: 1px solid #E3E7ED;
|
||
|
|
}
|
||
|
|
|
||
|
|
.head_box {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
.cntinfo{
|
||
|
|
height: calc(100% - 70px);
|
||
|
|
overflow: hidden;
|
||
|
|
overflow-y: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-row {
|
||
|
|
display: flex;
|
||
|
|
|
||
|
|
.el-form-item {
|
||
|
|
flex: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.upload-group {
|
||
|
|
display: flex;
|
||
|
|
// gap: 20px;
|
||
|
|
|
||
|
|
.el-form-item {
|
||
|
|
flex: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.unit {
|
||
|
|
margin-left: 5px;
|
||
|
|
}
|
||
|
|
::v-deep .el-input__inner{
|
||
|
|
height: 36px !important;
|
||
|
|
line-height: 36px !important;
|
||
|
|
border-radius: 0;
|
||
|
|
color: #777575;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.el-form-item--default{
|
||
|
|
margin-bottom: 0px;
|
||
|
|
}
|
||
|
|
</style>
|