ba_web/src/views/Training/AnnualInspection/components/pxgs.vue

<template>
  <div>
    <el-dialog title="选择培训公司" v-model="dialogForm" width="400px">
      <ul class="company-list">
        <li :class="{ 'active': active == item.id }" @click="updateActive(item)" class="company-item one_text_detail"
          v-for="item in companyList" :key="item.id">{{ item.dwmc }}</li>
      </ul>
      <div class="flex just-center mt10">
        <el-button type="primary" @click="dialogForm = false">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, defineExpose } from 'vue';
import { dwglList, njglEdit } from '@/api/pxzx';

import { ElMessage } from "element-plus";
const props = defineProps({
  dict: {
    type: Object,
    default: () => ({})
  }
})
const dialogForm = ref(false);
const companyList = ref([]);
const pxgsData = ref()
const active = ref(null)
const getList = () => {
  dwglList({}).then(res => {
    companyList.value = res.length > 0 ? res.filter(item => item.type == '02' || item.type == '03') : []
  })
}
const updateActive = (item) => {
  active.value = item.id;
  njglEdit({
    id: pxgsData.value.id,
    pxgs: item.dwmc,
    pxgsdm: item.id
  }).then(res => {
    if (res.code == 200) {
      ElMessage.success('修改成功');
      dialogForm.value = false;
    }
  })
}
const init = (row) => {
  active.value = row.pxgsdm?row.pxgsdm:null;
  pxgsData.value =row
  dialogForm.value = true;
  getList()
}

defineExpose({
  init
})
</script>

<style scoped lang="scss">
.company-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
  max-height: 40vh;
  overflow: hidden;
  overflow-y: auto;

  .company-item {
    padding: 10px;
    cursor: pointer;
    line-height: 20px;
    text-align: center;
    border-bottom: 1px solid #eee;
  }

  .active {
    background: #00bfbf;
    color: #fff;
  }
}
</style>