xzlz_GjWeb/src/views/backOfficeSystem/passengerTransport/components/detailForm.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 disabled
                      v-model="dataList.corpoInfo.dwlx"
                      placeholder="ktv"
                    />
                  </el-form-item>
                  <el-form-item label="统一社会信用代码">
                    <el-input disabled
                      v-model="dataList.corpoInfo.shxydm"
                      placeholder="请输入"
                    />
                  </el-form-item>
                </div>
                <div class="form-row">
                  <el-form-item label="单位名称（营业执照登记名称）">
                    <el-input disabled
                      v-model="dataList.corpoInfo.dwmc"
                      placeholder="请输入"
                    />
                  </el-form-item>
                  <el-form-item label="单位注册地址">
                    <el-input disabled
                      v-model="dataList.corpoInfo.dwzcdz"
                      placeholder="请输入"
                    />
                  </el-form-item>
                </div>
                <div class="form-row">
                  <el-form-item label="单位司机数量">
                    <el-input disabled
                      v-model="dataList.corpoInfo.dwsjsl"
                      placeholder="请输入"
                    />
                  </el-form-item>
                  <el-form-item label="单位车辆数量">
                    <el-input disabled
                      v-model="dataList.corpoInfo.dwclsl"
                      placeholder="请输入"
                    />
                  </el-form-item>
                </div>
                <div class="form-row">
                  <el-form-item label="所属辖区">
                    <el-input disabled
                      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">
          <!-- 从业人员表格 -->
           <Cyry v-if="activeName=='staff'" :dwid="dataList.corpoInfo.id" :dict="dict"/>

        </el-tab-pane>
        <el-tab-pane label="车辆" name="vehicle">
          <!-- 车辆 -->
           <Clsl v-if="activeName=='vehicle'" :dwid="dataList.corpoInfo.id" :dict="dict"/>
          <!-- <el-form :label-width="230" label-position="left">

            <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";
import Cyry from './cyry.vue'
import Clsl from './clsl.vue'
const props = defineProps({
  dict: { type: Object, default:{} }
});
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>