JG-ADMIN-TEMP/src/views/system/post/components/post-skill.vue

<template>
  <div class="mainContentBox">
    <!--{{dataDetail}}-->
    <!--{{dicts}}-->
    <avue-crud
      ref="crudRef"
      v-model:search="search"
      v-model="form"
      :data="data"
      :option="option"
      @row-update="updateRow"
      @row-del="deleteRow"
      @search-change="searchChange"
      @search-reset="resetChange"
      @selection-change="selectionChange"
    >
      <template #menu-left="{ size }">
        <el-button
          type="primary"
          icon="el-icon-plus"
          circle
          @click="addSkill"
        ></el-button
        ></template>

      <template #footer>
        <div class="detail-footer">
          <el-button type="primary" @click="addList"> 保存 </el-button>
          <el-button @click="cancel">取消</el-button>

        </div>
      </template>
    </avue-crud>

  </div>
</template>
<script setup lang="ts">
  import { ref, getCurrentInstance } from "vue";
  import { useCrud } from "@/hooks/userCrud";
  import ButtonPermKeys from "@/common/configs/buttonPermission";
  import { useCommonStoreHook, useDictionaryStoreHook } from "@/store/index";
  import {addPostSkill} from "../../../../api/system/skill";
  const { isShowTable, tableType } = toRefs(useCommonStoreHook());
  // 数据字典相关
  const { dicts } = useDictionaryStoreHook();
  const router = useRouter();
  const route = useRoute();

  const dataDetail=ref({});
  const test = () => {
    isShowTable.value = true;
    tableType.value = tableType.value == 1 ? 2 : 1;
  };

  const formData=ref({});
  const dataBomLists=()=>{
    search.value.materialCode=route.value.materialCode;
    dataNoPageList();
  }


  const dialog=ref(null);



  const addList=()=>{
    for(var i=0;i<data.value.length;i++){
      if(data.value[i].skillDictValue==="0"||data.value[i].skillDictValue ===null){
        ElMessage({
          message:"技能选项存在空值",
          type: "error",
        });
        return;
      }
    }
    if(data.value.length===0){
      ElMessage({
        message: "没有添加记录!",
        type: "error",
      });
      return;
    }
    addPostSkill(data.value).then(
      (data: any)=>{
        if(data.code==="200") {
          ElMessage({
            message: data.msg,
            type: "success",
          });
        }
        else {
          ElMessage({
            message: data.msg,
            type: "error",
          });
        }
        props.dialog.visible=false;
      }
    );
  }
  // 传入一个url，后面不带/
  const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
    useCrud({
      src: "/api/v1/sys/postSkill",
    });
  const { dataNoPageList,createRow, updateRow, deleteRow, searchChange, resetChange } =
    Methords; //增删改查
  const { selectionChange, multipleDelete } = Methords; //选中和批量删除事件
  const { checkBtnPerm, downloadTemplate, exportData } = Utils; //按钮权限等工具
  // checkBtnPerm(ButtonPermKeys.PLAN.BTNS.order_add) :permission="permission"
  // const permission = reactive({
  //   delBtn: checkPerm(buttonPermission.PLAN.BTNS.order_del),
  //   addBtn: checkPerm(buttonPermission.PLAN.BTNS.order_add),
  //   editBtn: checkPerm(buttonPermission.PLAN.BTNS.order_edit),
  //   menu: true,
  // });

  const crudRef = ref(null); //crudRef.value 获取avue-crud对象
  const props = defineProps({
    postId: {
      type: Number,
      default: () => {
        return 0;
      }
    },
    dialog:{
      type:Object,
      default:()=>{
        return {};
      }
    }
  })
  onMounted(() => {
    // console.log("crudRef", crudRef)
    search.value.postId=props.postId;
    dataNoPageList();

  });
   const cancel=()=>{
     props.dialog.visible=false;
   }
  /**
   * 上传excel相关
   */
  const uploadRef = ref(null);
  const uploadFinished = () => {
    // 上传完成后的刷新操作
    dataNoPageList();
  };
  const importExcelData = () => {
    if (uploadRef.value) {
      uploadRef.value.show("/api/v1/plan/order/import");
    }
  };

  // 设置表格列或者其他自定义的option
  option.value = Object.assign(option.value, {
    selection: false,
    addBtn: false,
    viewBtn: false,
    editBtn:false,
    saveBtn:false,
    cellBtn: true,
    column: [{
      label: "技能",
      prop: "skillDictValue",
      align: 'center',
      headerAlign: 'center',
      cell: true,
      span:24,
      type: 'select',
      dicData:dicts.skill_type,
      props: {
        label: "dictLabel", // 下拉菜单显示的字段
        value: "dictValue" // 下拉菜单值的字
      },
    },],
  });
  const routeBack =()=>{
    router.back();
  }
  const addSkill = () => {
    const bom=ref({
      postId:props.postId,
      $cellEdit:true,
    });
    data.value.push(bom.value);
  };

</script>
<style type="text/css">
  .title-detail{
    width: 30%;
    height: 50px;
    line-height: 50px;
    margin: 25px 20px 25px 0;
    float: left;
  }
  .detail{
    margin: 0 auto;
    width: 100%;
  }
  .avue-crud{
    float: left;
  }
  .detail-footer{
    float: right;
    margin-top:15px;
  }
  .el-select__selection{
    width: 400px;
  }

</style>