web/src/components/inventory/goods/Cate.vue

<template>
  <Mask :width="400" :height="600" :top="100" :is-show="isShow" @close="isShow=false" :show-fotter="true" title="药品列表">
    <el-table
        :data="cateList"
        style="width: 100%"
    >
      <el-table-column
          width="200">
        <template #default="scope">
          <el-input v-model="scope.row.name" v-if="scope.row.isEdit"></el-input>
          <span v-else>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column
          width="120">
        <template #default="scope">
          <div>
            <div v-if="scope.row.isAdd" style="display: flex;">
              <el-button type="primary" size="small" @click="saveDo" class="btn">确定</el-button>
              <el-button size="small" @click="cancelAdd" class="btn">取消</el-button>
            </div>
            <div v-else>
              <span @click="move(-1,scope.row)" class="btn"><el-icon><ArrowUpBold/></el-icon></span>
              <span @click="move(1,scope.row)" class="btn"><el-icon><ArrowDownBold/></el-icon></span>
              <span @click="scope.row.isEdit=true" class="btn" id="edit"><el-icon><Edit/></el-icon></span>
              <span @click="getCountByCateId(scope.row.id)" class="btn"> <el-icon><Delete/></el-icon></span>
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <template #footer>
      <div class="bottom">
        <el-button type="primary" @click="add" id="add">添加</el-button>
        <el-button type="primary" @click="save">保存</el-button>
      </div>
    </template>
  </Mask>

</template>
<script setup lang="ts">
import {onMounted, onUnmounted, ref} from "vue";
import {post} from "@/utils/request.ts";
import {ElMessageBox} from "element-plus";
import Mask from "@/components/common/Mask.vue";
import {ArrowUpBold, ArrowDownBold, Delete, Edit} from "@element-plus/icons-vue";

const props = defineProps({
  type: {
    type: Number,
  },
})

interface CateItem {
  id?: number;
  name: string;
  type: number | undefined;
  isEdit: boolean;
  isAdd: boolean;
  sort: number;
}

const cateList = ref<CateItem[]>([]);
const getCateList = () => {
  post("goods/cate/list", {type: props.type}).then((res: any) => {
    cateList.value = res
  })
}
onMounted(() => {
  getCateList()
  document.addEventListener("click", handleClickOutside);
})
onUnmounted(() => {
  document.removeEventListener("click", handleClickOutside);
})
const handleClickOutside = (event: MouseEvent) => {
  const target = event.target as HTMLElement;
  if (!target.closest('.el-input') && !target.closest('#edit') && !target.closest('#add')) {
    cateList.value.forEach(item => {
      item.isEdit = false;
    });
  }
};
const emit = defineEmits(['close'])
const close = () => {
  isShow.value = false
  emit('close')
}
const isShow = ref<any>(false)
const getCountByCateId = (cateId: any) => {
  let count = 0;
  post("goods/goods/getByCateId", {cateId: cateId}).then((res: any) => {
    count = res
    ElMessageBox.confirm(
        `有${count}个西药属于该二级分类，删除后将一同清空西药的分类。是否确定删除？`,
        'Warning',
        {
          confirmButtonText: '确认删除',
          cancelButtonText: '取消',
          type: 'warning',
        }
    ).then(() => {
      del(cateId)
    })
  })


}
const del = async (id: any) => {
  await post("goods/cate/del", {id})
  getCateList()
}
const saveDo = async () => {
  cateList.value.forEach((item, index) => {
    item.sort = index + 1
    if (item.name === '') {
      removeItemByIndex(index)
    }

  })
  await post("goods/cate/save", {cateList: cateList.value})
  getCateList()


}
const save = () => {
  saveDo()
  close()
}
const removeItemByIndex = (index: number) => {
  if (index >= 0 && index < cateList.value.length) {
    cateList.value.splice(index, 1);
  }
}
// const save = async ()=>{
//   await post("goods/cate/save",cateList.value)
//   getCateList()
// }

const add = () => {
  const newCate: CateItem = {
    name: '',
    type: props.type,
    isEdit: true,
    isAdd: true,
    sort: cateList.value.length + 1
  }
  cateList.value.push(newCate)
}
//移动 -1上移 1下移
const move = (direction: number, row: any) => {
  const index = cateList.value.findIndex(item => item.id === row.id);
  if (index === -1) return;
  const targetIndex = index + direction;
  if (targetIndex < 0 || targetIndex >= cateList.value.length) return;
  // 交换元素位置
  [cateList.value[index], cateList.value[targetIndex]] = [cateList.value[targetIndex], cateList.value[index]];
  console.log(cateList)

}
const cancelAdd = () => {
  cateList.value.pop()
}
</script>
<style scoped lang="scss">
.close {
  cursor: pointer;
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  z-index: 1999;
}

.btn {
  margin-left: 10px;
  cursor: pointer;
}

.bottom {
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 24px;
}
</style>