285 lines
9.2 KiB
Vue
285 lines
9.2 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" @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>
|