db-init-web-vue3/src/layout/homeParts/left-1.vue

<template>
  <div class="main">
    <div class="one">
      <el-col :span="24" class="add">
        <el-button type="primary" size="large" @click="toAdd('add')">添加项目</el-button>
      </el-col>
      <el-col :span="24">
        <el-col v-if="data.id">
          <el-button class="button" type="primary" @click="toAdd('edit')">修改项目</el-button>
          <el-button class="button" type="danger" @click="toDelete()">删除项目</el-button>
        </el-col>
        <el-col v-else>
          <el-button class="button" type="primary" disabled>修改项目</el-button>
          <el-button class="button" type="danger" disabled>删除项目</el-button>
        </el-col>
      </el-col>
    </div>
    <el-col :span="24" wrap>
      <div class="two">
        <el-menu class="sidebar-el-menu" :collapse="false" unique-opened>
          <template v-for="item in items" :key="item">
            <el-menu-item class="first" :index="item._id" @click="onMenu(item)">
              <el-col :span="4" class="icon">
                <el-icon :size="20">
                  <Opportunity />
                </el-icon>
              </el-col>
              <el-col :span="18" class="title">
                <span>{{ item.name }}</span>
              </el-col>
            </el-menu-item>
          </template>
        </el-menu>
      </div>
    </el-col>
  </div>
  <el-dialog v-model="data.dialog" title="项目管理" :before-close="handleClose">
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm" :size="formSize" status-icon>
      <el-form-item label="项目名" prop="name">
        <el-input v-model="ruleForm.name" />
      </el-form-item>
      <el-form-item label="描述" prop="desc">
        <el-input v-model="ruleForm.desc" type="textarea" />
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="ruleForm.remark" type="textarea" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)"> 提交 </el-button>
        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue';
import type { Ref } from 'vue';
import _ from 'lodash';
import { useCounterStore as useStore } from '@/stores/counter';
import type { IQueryResult } from '@/util/types.util';
import type { FormInstance, FormRules } from 'element-plus';
import { ElMessageBox } from 'element-plus';
const store = useStore();
const formSize = ref('default');
const ruleFormRef = ref<FormInstance>();

// #region 请求列表
const data = reactive({
  id: '',
  dialog: ref(false),
});
// 请求列表
// ref方式
let items: Ref<any[]> = ref([]);
const search = async () => {
  const res: IQueryResult = await store.projectQuery();
  items.value = res.data as any[];
};
onMounted(() => {
  search();
});
const emit = defineEmits(['onMenu', 'toDelete']);
// 点击菜单
const onMenu = (item: { _id: string; name: string }) => {
  data['id'] = item._id;
  emit('onMenu', item);
};
// #endregion
// #region 表单添加修改
// 表单
let ruleForm: Ref<{ name: String; desc: String; remark: String }> = ref({ name: '', desc: '', remark: '' });
// 验证
const rules = reactive<FormRules>({
  name: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
});
// 添加
const toAdd = async (type: string) => {
  if (type == 'edit') {
    const aee: IQueryResult = await store.projectFetch(data.id);
    ruleForm.value = aee.data as { name: String; desc: String; remark: String };
  } else if (type == 'add') {
    ruleForm.value = { name: '', desc: '', remark: '' };
  }
  data.dialog = true;
};
// 提交保存
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate(async (valid) => {
    if (valid) {
      if (_.get(ruleForm.value, '_id')) {
        const res: IQueryResult = await store.projecUpdate(ruleForm.value);
        if (res.errcode == 0) handleClose();
      } else {
        const res: IQueryResult = await store.projectCreate(ruleForm.value);
        if (res.errcode == 0) handleClose();
      }
    }
  });
};
// 重置
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
// 关闭弹窗
const handleClose = () => {
  ruleForm.value = { name: '', desc: '', remark: '' };
  search();
  data.dialog = false;
};
// #endregion
// 删除;
const toDelete = async () => {
  ElMessageBox.confirm('是否确认删除该项目', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    emit('toDelete');
    search();
  });
};
</script>

<style scoped>
.one {
  height: 14vh;
  background: #1b5644;
  padding: 10px 30px 10px 30px;
}
.one .button {
  margin: 0 4px;
}
.one .add {
  margin: 0 0 10px 0;
  text-align: center;
}
.two {
  height: 78vh;
  padding: 0 0 30px 0;
  background: #73ad9b;
  overflow-y: scroll;
}
.sidebar-el-menu {
  background: #73ad9b;
}
.sidebar-el-menu .first span {
  font-size: 16px;
  font-weight: 500;
}
.el-menu {
  border-right: none;
}
.el-menu-item {
  color: #fff;
}
.el-menu-item.is-active {
  color: #fdda13;
  background-color: #78c1aa;
}
.two::-webkit-scrollbar {
  width: 2px;
}
.two::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgba(108, 43, 43, 0.2);
}
.two::-webkit-scrollbar-track {
  border-radius: 0;
  background: rgba(255, 254, 254, 0.1);
}
.two .name {
  height: 50px;
  color: #fff;
  margin: 10px 0;
  padding: 0 0 0 10px;
  display: flex;
}
.two .name:first-child {
  height: 50px;
  color: #fff;
  margin: 0 0 10px 0;
}
.two .name:last-child {
  height: 50px;
  color: #fff;
  margin: 10px 0 0 0;
}
.two .name .icon {
  padding: 15px 0 0 8px;
}
.two .name .title {
  line-height: 50px;
  font-size: 18px;
}
</style>