vue-fastapi-admin/vue-fastapi-frontend/src/views/datastd/main/components/AddEditForm.vue

<template>
  <el-dialog width="500px" append-to-body :title="isShow?'查看数据标准':isEdit ? '修改数据标准' : '新增数据标准'" v-model="visible" @close="handleClose">
    <el-form :model="formData" ref="formRef" label-width="120px" :rules="formRules">

        
        <el-form-item label="标准编号" prop="stdNum">
        <el-input v-model="formData.stdNum" :disabled="isEdit" placeholder="请输入标准编号" clearable />
      </el-form-item>
      <el-form-item label="标准中文名" prop="stdName">
        <el-input v-model="formData.stdName" placeholder="请输入标准中文名" clearable />
      </el-form-item>
      <el-form-item label="标准英文名" prop="stdCode">
        <el-input v-model="formData.stdCode" placeholder="请输入标准英文名" clearable />
      </el-form-item>
      <el-form-item label="标准业务定义" prop="stdMenu">
        <el-input v-model="formData.stdMenu" placeholder="请输入标准业务定义" clearable />
      </el-form-item>

      <el-form-item label="标准类型" prop="stdType">
        <el-select v-model="formData.stdType" placeholder="请输入标准类型">
          <el-option label="基础数据" value="0" />
          <el-option label="指标数据" value="1" />
        </el-select>    
        </el-form-item>
        <el-form-item label="标准来源" prop="stdSrc">
        <el-select v-model="formData.stdSrc" placeholder="请选择标准来源">
          <el-option label="行业标准" value="行业标准" />
          <el-option label="自建标准" value="自建标准" />
        </el-select>    
        </el-form-item>
        <el-form-item label="数据类别" prop="dataClas">
        <el-select v-model="formData.dataClas" placeholder="请选择数据类别">
          <el-option label="日期类" value="日期类" />
          <el-option label="文本类" value="文本类" />
          <el-option label="数值类" value="数值类" />
          <el-option label="金额类" value="金额类" />
          <el-option label="编码类" value="编码类" />
          <el-option label="标志类" value="标志类" />
          <el-option label="码值类" value="码值类" />
        </el-select>    
        </el-form-item>
        <el-form-item label="来源系统" prop="sourceSystem">
        <el-select
              v-model="formData.sourceSystem"
              placeholder="请选择来源系统"
              maxlength="30"
              @change="dataChange"
            >
              <el-option
                v-for="dict in dbResourceOldList"
                :key="dict.id"
                :label="dict.name"
                :value="dict.name"
              ></el-option>
            </el-select>  
      </el-form-item>
      <el-form-item label="安全等级" prop="securityLevel">
        <el-select v-model="formData.securityLevel" placeholder="请选择安全等级">
          <el-option label="1" value="1" />
          <el-option label="2" value="2" />
          <el-option label="3" value="3" />
          <el-option label="4" value="4" />
        </el-select>
      </el-form-item>
      <el-form-item label="代码编号" prop="codeNum">
        <el-input
    v-model="formData.codeNum"
    placeholder="请输入代码编号"
    clearable
    style="width: 80%;"
    :disabled="true"
  />
  <el-button
              
              icon="Edit"
              :disabled="single"
              @click="codeVisible = true" 
              style="margin-left: 5px;"
              v-hasPermi="['meta:metaSecurityCol:edit']"
              ></el-button>
  </el-form-item>
      <el-form-item label="业务认责部门" prop="bussDeptId">
       <el-tree-select
                        v-model="formData.bussDeptId"
                        :data="deptOptions"
                        :props="{ value: 'id', label: 'label', children: 'children' }"
                        value-key="id"
                        placeholder="请选择业务认责部门"
                        check-strictly />
     </el-form-item>
     <el-form-item label="业务认责人员" prop="bussUser">
        <el-select v-model="formData.bussUser" placeholder="请选择业务认责人员">
          <el-option
                v-for="dict in userList"
                :key="dict.id"
                :label="dict.userName"
                :value="dict.userName"
              ></el-option>
        </el-select>    
        </el-form-item>
     <el-form-item label="技术认责部门" prop="techDeptId">
                     <el-tree-select
                        v-model="formData.techDeptId"
                        :data="deptOptions"
                        :props="{ value: 'id', label: 'label', children: 'children' }"
                        value-key="id"
                        placeholder="请选择技术认责部门"
                        check-strictly />
     </el-form-item>
     <el-form-item label="技术认责人员" prop="techUser">
        <el-select v-model="formData.techUser" placeholder="技术认责人员">
          <el-option
                v-for="dict in userList"
                :key="dict.id"
                :label="dict.userName"
                :value="dict.userName"
              ></el-option>
        </el-select>    
        </el-form-item>

         <!-- 底部按钮区域 -->
         <el-row justify="center" style="margin-top: 20px;" v-if="!isShow">
        <el-col :span="4" style="padding-right: 10px;">
          <el-button @click="handleClose" style="width: 100%" plain>取消</el-button>
        </el-col>
        <el-col :span="4" style="padding-left: 10px;">
          <el-button type="primary" @click="handleSubmit" style="width: 100%">保存</el-button>
        </el-col>
      </el-row>
  

    </el-form>
    <el-dialog  title="选择代码" v-model="codeVisible" width="1000px">
      <!-- 引入第二个页面组件 -->
      <code-components  ref="showCodeDialog" v-if="codeVisible"  />
      <template #footer >
        <el-button 
        @click="codeCancel">取消</el-button>
        <el-button 
        type="primary" @click="codeSave">确定</el-button>
      </template>
    </el-dialog>
  </el-dialog>
</template>

<script setup>
import { ref, watch } from 'vue';
import { updateStdMain, addStdMain } from '@/api/datastd/std'; // 确保接口存在
import {  listUser,  deptTreeSelect } from "@/api/system/user";
import codeComponents from '../../stdcode/codeComponents.vue';

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

const props = defineProps({
  data: {
    type: Object,
    required: false,
  },
  isEdit: {
    type: Boolean,
  },
  isShow: {
    type: Boolean,
    default:false
  },
  dbResourceOldList: {
    type: Object,
  },
  visible: {
    type: Boolean,
  },
  dbResourceOldList: {
    type: Object,
  },
});

// 定义表单校验规则
const formRules = ref({
  stdNum: [{ required: true, message: '请输入标准编号', trigger: 'blur' }],
  stdType: [{ required: true, message: '请选择标准类型', trigger: 'change' }],
  stdSrc: [{ required: true, message: '请选择标准来源', trigger: 'change' }],
  dataClas: [{ required: true, message: '请选择数据类别', trigger: 'change' }],
  bussDeptId: [{ required: true, message: '请选择业务认责部门', trigger: 'blur' }],
  techDeptId: [{ required: true, message: '请选择技术认责部门', trigger: 'blur' }],
  bussUser: [{ required: true, message: '请输入业务认责人', trigger: 'blur' }],
  techUser: [{ required: true, message: '请输入技术认责人', trigger: 'blur' }],
});
const codeCancel = () => {
  codeVisible.value = false;
};
const codeSave = () => {
  const child = proxy.$refs.showCodeDialog;
 const mapList=child.selections
 if(mapList.length!=1){
  proxy.$modal.msgWarning("请选择一条代码进行映射");

 }else{
  const mapCodeItem=child.selections[0]

formData.value.codeNum=mapCodeItem.codeNum
formData.value.codeId=mapCodeItem.id

      codeVisible.value = false; 

      proxy.$modal.msgSuccess("代码引用成功");

}};

const showSys = ref(false);
const codeVisible = ref(false);
const emit = defineEmits(['update:visible', 'refresh']);
const userList = ref([]);
const formData = ref({ ...props.data });
const visible = ref(props.visible);  // 使用 prop 传入的 visible
function dataChange(data) {
  // 从 dbResourceOldList 中查找对应的 name
  const selectedItem = props.dbResourceOldList.find(item => item.id === data);
  if (selectedItem) {
    // 如果找到对应的项，将 name 赋值给 formData.value.dbRName
    formData.value.sysName = selectedItem.name;
  } else {
    // 如果未找到，清空 formData.value.dbRName
    formData.value.sysName = '';
  }
}
// 监听 props.visible 的变化，确保同步到 local visible
watch(() => props.visible, (newVal) => {
  visible.value = newVal;
  formData.value = { ...props.data }
});

function getList() {
  listUser({pageSize:1000,pageNum:1}).then(res => {
    userList.value = res.rows;
  });
};
const handleClose = () => {
  emit('update:visible', false);  // 关闭弹框
};
const deptOptions = ref(undefined);

function getDeptTree() {
  deptTreeSelect().then(response => {
    deptOptions.value = response.data;
  });
};
function changeCodeType(data) {
  if (data != "company") {
    showSys.value = true;
    formData.value.sysName = "";
    formData.value.sysId = undefined;
  } else {
    showSys.value = false;
    formData.value.sysName = "公司级";
    formData.value.sysId = 10000;
  }
}
getDeptTree();
getList();
const handleSubmit = () => {
  const formRef = proxy.$refs.formRef;
  formRef.validate((valid) => {
    if (valid) {
      const apiCall = props.isEdit ? updateStdMain(formData.value) : addStdMain(formData.value);
      apiCall
        .then((response) => {
          if (response.success) {
            emit('refresh');
            handleClose();
          } else {
            proxy.$message.error(response.data || '操作失败，请稍后重试');
          }
        })
    } else {
      console.log('表单验证失败');
      return false;
    }
  });
};
</script>