vue-fastapi-admin/vue-fastapi-frontend/src/views/datastd/stdcode/codeItemCommon.vue

<template>
  <el-form :model="form" ref="formRef" label-width="120px" >
    <div class="form-container">
  <el-row :gutter="20">
    <!-- 代码归属 -->
    <el-col :span="8">
      <span class="info-text">代码归属: {{ form.sysName || '暂无代码归属' }}</span>
    </el-col>

    <!-- 代码编号 -->
    <el-col :span="8">
      <span class="info-text">代码编号: {{ form.codeNum || '暂无代码编号' }}</span>
    </el-col>

    <!-- 代码名称 -->
    <el-col :span="8">
      <span class="info-text">代码名称: {{ form.codeName || '暂无代码名称' }}</span>
    </el-col>
  </el-row>
</div>


    <!-- 查询表单 -->
   <div class="query-form-container">
      <el-form :model="queryParams" ref="queryRef" :inline="true">
        <el-form-item label="代码值/名称" prop="codeNum">
          <el-input
            v-model="queryParams.codeNum"
            placeholder="请输入标准代码编号"
            clearable
            style="width: 220px"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-form>



  <!-- 表格展示 -->
  <el-table
    v-loading="loading"
    :data="tableData"
    @selection-change="handleSelectionChange"
    border
    style="width: 100%"
  >
    <el-table-column type="selection" width="55" align="center" />
    <el-table-column
      label="代码值"
      align="center"
      prop="codeNum"
      :editable="true"
    >

    </el-table-column>

    <el-table-column
      label="代码含义"
      align="center"
      prop="codeName"
      :editable="true"
    >

    </el-table-column>

  </el-table>
  
</template>

<script setup>
import { ref, reactive, onMounted, toRefs } from 'vue';
import { listStdCode,getStdCode} from "@/api/datastd/stdcode"; // 更新为新的接口

const { proxy } = getCurrentInstance();
const { std_code_status } = proxy.useDict("std_code_status");

const props = defineProps({
  codeId: {
    type: Object,
    required: false
  },

});

const queryParams = ref({
  codeNum: '',
  parentId: props.codeId,
  codeName: '',
  codeType: '',
  sysName: '',
  classId: 'codeItem',
  sysId: '',
  pageNum: 1,
  pageSize: 100
});

const form = ref({
  id: "",
  codeNum: '',
  codeName: '',
  codeType: 'company',
  codeStatus: '',
  sysName: '',
  classId: 'code',
  codeMapId: '',
  codeMapName: '',
  codeMapNum: '',
  sysId: undefined
});

const tableData = ref([]);
const selections = ref([]);
const loading = ref(false);
const showSys = ref(false);
const multiple = ref(false);


//初始话判断展示系统及映射下拉选
if (props.codeId) {
  form.value = { ...props.rowData };
  if (form.value.codeType == "sys") {
    showSys.value = true;
  } else {
    showSys.value = false;
  }
}





// 获取数据列表
const getList = async () => {
  loading.value = true;
  console.log(queryParams.value,"queryParams.value")
  const response = await listStdCode(queryParams.value);
  tableData.value = response.rows.map(item => ({ ...item}));
  loading.value = false;
};



const handleCodeClick = (row) => {
  console.log('点击了标准代码名称', row);
};


const handleSelectionChange = (selection) => {
  multiple.value = selection.length > 0;
  selections.value = selection; // 保存选中的行数据
console.log(selections.value,"子页面选中")
};

// 搜索
const handleQuery = () => {
  queryParams.value.pageNum = 1;
  getList();
};

// 重置查询
const resetQuery = () => {
  queryParams.value = {
    parentId:props.codeId,
    pageNum: 1,
    pageSize: 100
  };

};

defineExpose({
  selections
});


onMounted(() => {
  getStdCode(props.codeId).then(response => {
    form.value = response.data;

  });
  getList();
  // getcompanyList()
});
</script>

<style scoped>
.app-container {
  padding: 20px;
}



.query-form-container {
  margin-bottom: 20px;
}

.el-table .el-input {
  width: 100%;
}
.form-container {
  margin-bottom: 20px;
  
}
.info-text {
  font-size: 18px; /* 调整字体大小 */
  line-height: 1.6; /* 行高，使文字更易于阅读 */
  color: #333; /* 字体颜色 */
  font-weight: 500; /* 设置字体加粗 */
  display: inline-block;
  width: 100%;
}



</style>