124
This commit is contained in:
@ -0,0 +1,284 @@
|
||||
<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" @tab-click="switchover(activeName)">
|
||||
<el-tab-pane label="单位信息" name="basic">
|
||||
<el-form
|
||||
:model="dataList.corpoInfo"
|
||||
: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="dataList.corpoInfo.dwlx"
|
||||
placeholder="ktv"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="统一社会信用代码">
|
||||
<el-input
|
||||
v-model="dataList.corpoInfo.shxydm"
|
||||
placeholder="请输入"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="单位名称（营业执照登记名称）">
|
||||
<el-input
|
||||
v-model="dataList.corpoInfo.dwmc"
|
||||
placeholder="请输入"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="单位注册地址">
|
||||
<el-input
|
||||
v-model="dataList.corpoInfo.dwzcdz"
|
||||
placeholder="请输入"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="单位司机数量">
|
||||
<el-input
|
||||
v-model="dataList.corpoInfo.dwsjsl"
|
||||
placeholder="请输入"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="单位车辆数量">
|
||||
<el-input
|
||||
v-model="dataList.corpoInfo.dwclsl"
|
||||
placeholder="请输入"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="所属辖区">
|
||||
<el-input
|
||||
v-model="dataList.corpoInfo.ssxq"
|
||||
placeholder="请输入"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="upload-group">
|
||||
<el-form-item label="营业执照照片">
|
||||
<img height="130" :src="dataList.corpoInfo.yyzzzp" alt="" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="从业人员" name="staff">
|
||||
<!-- 从业人员表格 -->
|
||||
<el-form :label-width="230" label-position="left">
|
||||
<div
|
||||
class="flex align-center bottom"
|
||||
v-for="(item, index) in dataList.personalInfo"
|
||||
:key="index"
|
||||
>
|
||||
<div style="width: calc(100% - 176px)">
|
||||
<div class="form-row">
|
||||
<el-form-item label="姓名">
|
||||
<el-input v-model="item.xm" placeholder="ktv" />
|
||||
</el-form-item>
|
||||
<el-form-item label="民族">
|
||||
<el-input v-model="item.shxydm" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="证件号码">
|
||||
<el-input v-model="item.zjhm" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
<el-form-item label="联系电话">
|
||||
<el-input v-model="item.lxdh" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="居住地址">
|
||||
<el-input v-model="item.jzdz" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="单位名称">
|
||||
<el-input v-model="item.dwmc" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
<el-form-item label="企业部门">
|
||||
<el-input v-model="item.qybm" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="入职时间">
|
||||
<el-input v-model="item.rzsj" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
<el-form-item label="岗位">
|
||||
<el-input v-model="item.gw" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="违法犯罪经历描述">
|
||||
<el-input v-model="item.wffzms" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Empty :show="dataList.personalInfo.length == 0" />
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="车辆" name="vehicle">
|
||||
<!-- 车辆 -->
|
||||
<el-form :label-width="230" label-position="left">
|
||||
<div
|
||||
class="flex align-center bottom"
|
||||
v-for="(item, index) in dataList.vehicleInfo"
|
||||
:key="index"
|
||||
>
|
||||
<div style="width: calc(100% - 176px)">
|
||||
<div class="form-row">
|
||||
<el-form-item label="车辆驾驶员">
|
||||
<el-input v-model="item.cljsy" placeholder="ktv" />
|
||||
</el-form-item>
|
||||
<el-form-item label="车辆类型">
|
||||
<el-input v-model="item.cllx" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="车牌号">
|
||||
<el-input v-model="item.cph" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
<el-form-item label="单位名称">
|
||||
<el-input v-model="item.dwmc" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="企业部门">
|
||||
<el-input v-model="item.qybm" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
<el-form-item label="行政区域">
|
||||
<el-input v-model="item.xzqy" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<el-form-item label="线路名称">
|
||||
<el-input v-model="item.xlmc" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Empty :show="dataList.vehicleInfo.length == 0" />
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from "vue";
|
||||
import { tbGjclselectList, tbJcxxAbrySelectList } from "@/api/mosty-zhgj.js";
|
||||
import Empty from "@/components/Empty/index.vue";
|
||||
const dialogForm = ref(false);
|
||||
const activeName = ref("basic");
|
||||
const title = ref("单位信息");
|
||||
const dataList = reactive({
|
||||
corpoInfo: {},
|
||||
vehicleInfo: [],
|
||||
personalInfo: []
|
||||
});
|
||||
// 初始化数据
|
||||
const init = (type, row) => {
|
||||
dialogForm.value = true;
|
||||
// 根据type和row初始化表单数据
|
||||
activeName.value = type;
|
||||
dataList.corpoInfo = { ...row };
|
||||
switchover(type);
|
||||
};
|
||||
const switchover = (type) => {
|
||||
if (type == "staff") {
|
||||
gettbJcxxAbrySelectList();
|
||||
} else if (type == "vehicle") {
|
||||
gettbGjclselectList();
|
||||
}
|
||||
};
|
||||
const gettbJcxxAbrySelectList = () => {
|
||||
tbJcxxAbrySelectList({ dwid: dataList.corpoInfo.id }).then((res) => {
|
||||
dataList.personalInfo = res;
|
||||
});
|
||||
};
|
||||
const gettbGjclselectList = () => {
|
||||
tbGjclselectList({ dwid: dataList.corpoInfo.id }).then((res) => {
|
||||
dataList.vehicleInfo = res;
|
||||
});
|
||||
};
|
||||
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;
|
||||
}
|
||||
.bottom {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user