更新

2023-07-10 17:30:13 +08:00 · 2023-07-10 17:30:13 +08:00 · e085a5f230
parent 8750255b39
commit e085a5f230
6 changed files with 263 additions and 206 deletions
--- a/src/components/FormDialog/FormDialog.vue
+++ b/src/components/FormDialog/FormDialog.vue
@ -27,12 +27,13 @@

                <!-- date  -->
                <el-date-picker v-if="item.type == 'date'" :disabled="Boolean(item.disabled)" v-model="form[item.model]"
-                  :type="item.dateType || date" :value-format="item.format || 'YYYY-MM-DD'"
+                  :type="item.dateType || 'date'" :value-format="item.format || 'YYYY-MM-DD'"
                  :placeholder="item.placeholder" />

                <!-- tree-select -->
-                <el-tree-select v-if="item.type == 'tree-select'" v-model="form[item.model]" :data="item.options"
-                  check-strictly :render-after-expand="false" :disabled="Boolean(item.disabled)" />
+                <el-tree-select v-if="item.type == 'tree-select'" :placeholder="item.placeholder"
+                  v-model="form[item.model]" :data="item.options" check-strictly :render-after-expand="false"
+                  :disabled="Boolean(item.disabled)" />

              </el-form-item>
            </el-col>
@ -52,7 +53,7 @@
 </template>

 <script setup>
-import { ref, reactive, toRefs, onMounted, onBeforeMount, watch, watchEffect, computed, getCurrentInstance } from 'vue'
+import { ref, reactive, toRefs, onMounted, onBeforeMount, watch, watchEffect, computed, getCurrentInstance, nextTick } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import cloneDeep from "lodash.clonedeep";

@ -91,10 +92,18 @@ const props = defineProps({
    type: Array,
    default: () => []
  },
+  // 表单禁用
  formJosnDisabled: {
    type: Boolean,
    default: false
  },
+  // 表单数据
+  formJsonData: {
+    type: Object,
+    default: () => {
+      return {}
+    }
+  },
  // 表单校验规则
  modelValue: {}
 })
@ -121,6 +130,7 @@ const handleSubmit = async () => {
      }
    })
  } else {
+    console.log(12)
    emit('handleSubmit', form.value)
  }
 }
@ -130,10 +140,15 @@ watch(() => props.modelValue, (newValue) => {
  dialogVisible.value = props.modelValue
  if (props.formType == 'json' && newValue) {
    nextTick(() => {
-      ruleFormRef.value.clearValidate() // 清除表单校验信息
-      formData.value = cloneDeep(props.formJsonData) // 表单赋值
+      formRef.value.clearValidate() // 清除表单校验信息
+      form.value = cloneDeep(props.formJsonData) // 表单赋值
    })
  }
 })
 </script>
-<style lang='scss' scoped></style>
+<style lang='scss' scoped>
+:deep(.el-select),
+:deep(.el-date-editor).el-input {
+  width: 100% !important;
+}
+</style>
--- a/src/components/FormDialog/example.vue
+++ b/src/components/FormDialog/example.vue
@ -45,7 +45,7 @@ const FormDialogData = reactive({
  formJosnElement: [
    {
      type: 'input', // 元素类型
-      cloSpan: '24', // 栅格布局所占份数 （默认24）
+      cloSpan: 24, // 栅格布局所占份数 （默认24）
      disabled: false, // 元素是否禁用（默认为false）
      label: '姓名', // 元素的 label
      placeholder: '请填写姓名', // 元素的 placeholder
--- a/src/components/TableBody/TableHeader.vue
+++ b/src/components/TableBody/TableHeader.vue
@ -17,7 +17,7 @@
          </span>

          <el-button type="primary" icon="Connection" :disabled="singleDisabledIf" v-if="item === 'detail'"
-            v-permission="tableHeader[2]?.edit" @click="emit('handle', 'detail ')" :key="index">详情</el-button>
+            v-permission="tableHeader[2]?.detail" @click="emit('handle', 'detail ')" :key="index">详情</el-button>

          <template v-if="Object.prototype.toString.call(item) === '[object Object]'">
            <el-button type="primary" :disabled="customDisabled(item)" :icon="item.icon" v-permission="item.permission"
--- a/src/components/TableBody/example.vue
+++ b/src/components/TableBody/example.vue
@ -104,6 +104,7 @@ const data = reactive({
    {
      create: undefined,
      edit: false,
+      detail: false,
      delete: false,
      search: false,
      advanced: false,
--- a/src/views/projectManage/index.vue
+++ b/src/views/projectManage/index.vue
@ -1,15 +1,13 @@
 <template>
  <div class="example">
    <TableBody v-bind="data" @handleTableHeader="handleTableHeader" @handleTablePagination="handleTablePagination"
-      @handleTableSort="handleTableSort" ref="TableBodyRef">
-      <!-- 左侧顶部插槽 -->
-      <template #TableHeaderLeft="{ selectData }">
-        <el-button @click="handleSlot(selectData)">插槽</el-button>
-      </template>
+      ref="TableBodyRef">

      <!-- 右侧顶部插槽 -->
      <template #TableHeaderRight="{ selectData }">
-        <el-button @click="handleSlot(selectData)">插槽</el-button>
+        <el-select v-model="reqParams.deptId" placeholder="请选择部门" @change="init" clearable class="status-select">
+          <el-option v-for="item in bmOptions" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
      </template>

      <!-- 表格插槽使用 -->
@ -19,39 +17,18 @@
    </TableBody>

    <FormDialog v-model="formDialog" v-bind="FormDialogData" @handleSubmit="handleSubmit">
-      <template #default>
-        <el-form :model="form" label-width="120px">
-          <el-form-item label="Activity name">
-            <el-input v-model="form.name" />
-          </el-form-item>
-          <el-form-item label="Activity zone">
-            <el-select v-model="form.region" placeholder="please select your zone">
-              <el-option label="Zone one" value="shanghai" />
-              <el-option label="Zone two" value="beijing" />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="Activity time">
-            <el-col :span="11">
-              <el-date-picker v-model="form.date1" type="date" placeholder="Pick a date" style="width: 100%" />
-            </el-col>
-            <el-col :span="2" class="text-center">
-              <span class="text-gray-500">-</span>
-            </el-col>
-            <el-col :span="11">
-              <el-time-picker v-model="form.date2" placeholder="Pick a time" style="width: 100%" />
-            </el-col>
-          </el-form-item>
-        </el-form>
-      </template>
    </FormDialog>
  </div>
 </template>

 <script setup>
-import { ref, reactive } from "vue";
+import { ref, reactive, onMounted } from "vue";
 import TableBody from "@/components/TableBody/TableBody.vue";
 import FormDialog from "@/components/FormDialog/FormDialog.vue";
+import http from "@/utils/request.js";
+import { ElMessage } from "element-plus";

+const bmOptions = ref([])
 const TableBodyRef = ref();
 const data = reactive({
  /**
@ -65,62 +42,11 @@ const data = reactive({
        "edit",
        "delete",
        "detail",
-        {
-          type: "custom", //  // 自定义按钮（支持 custom 默认按钮、popconfirm 气泡确认 ）,
-          name: "customButton", // 为 handleTableHeader 事件的第一个返回值，注意不能重复
-          title: "自定义", // 按钮名称
-          icon: "Message", // 自定义左侧按钮 （ 目前只支持 element 的 icon  ）
-          // 以哪种方式禁用按钮，组件自带两种禁用方式 1.只有选择一条时开启按钮 'single'，2. 有选择任意条数时开启按钮 'Arbitrary '
-          // 3.自定义方法 'custom '，4.默认无条件开启，不设置即可
-          isOpen: "custom",
-          // 设置 isOpen 为 custom 时设置生效（切必须填写该字段），Boolean | 变量 | function
-          // disabled: false,
-          disabled: (selectData) => {
-            console.log(selectData, "selectData121341");
-            if (selectData[0]?.id === 3) {
-              return false;
-            }
-            return true;
-          },
-          permission: undefined, // 按钮权限，不设置，或设置为 undefined、false 默认显示
-        },
      ],
    },
    {
      buttons: [
        "search",
-        "advanced",
-        "refresh",
-        "filter",
-        "bulkDelete",
-        {
-          name: "mixInput", // 混合筛选
-          options: [
-            { label: 1, value: 1 },
-            { label: 1, value: 1 },
-          ],
-          // permission: false, // 权限
-        },
-        {
-          name: "sort", // 排序
-          options: [
-            { label: "按企业名称", value: 1 },
-            { label: "按姓名", value: 2 },
-          ],
-          // permission: false, // 权限
-        },
-        {
-          type: "custom", // 自定义按钮（支持 custom 默认按钮、popconfirm 气泡确认 ）,
-          name: "customButton", // 为 handleTableHeader 事件的第一个返回值，注意不能重复
-          title: "自定义", // 按钮名称
-          icon: "Message", // 自定义左侧按钮 （ 目前只支持 element 的 icon  ）
-          // 以哪种方式禁用按钮，组件自带两种禁用方式 1.只有选择一条时开启按钮 'single'，2. 有选择任意条数时开启按钮 'Arbitrary '
-          // 3.自定义方法 'custom '，4.默认无条件开启，不设置即可
-          isOpen: "custom",
-          // 设置 isOpen 为 custom 时设置生效（切必须填写该字段），Boolean | 变量 | function
-          disabled: false,
-          // permission: false, // 权限
-        },
      ],
    },
    // 基础操作按钮权限（没有配置 permission 的按钮或者其他搜索等）
@ -141,10 +67,10 @@ const data = reactive({
   * @description 表格参数
   */
  tableType: {
-    selection: false, // Boolean 是否多选
+    selection: true, // Boolean 是否多选
    tableLoading: false, // Boolean 表格 loading
    tableIndex: true, // Boolean 是否序号
-    tableTree: true, // Boolean 是否树形显示 （注意：开启后必须每项有不同的 id 字段，树形显示一般关闭多选）
+    tableTree: false, // Boolean 是否树形显示 （注意：开启后必须每项有不同的 id 字段，树形显示一般关闭多选）
    tableTreeName: "children", // String 开启树形显示后才成效，子节点字段名称 （默认值为：'children'）
    isExpand: true, // Boolean 是否默认展开（默认为 false）
    isHiddenPagination: false, // Boolean是否隐藏分页 （默认为 false）
@ -161,20 +87,12 @@ const data = reactive({
      label: "插槽",
      show: true, // 是否显示
      sortable: true, // 排序方式 Boolean | 'custom' (设置为 'custom' 可以选中后端排序，组件需要绑定 handleTableSort 事件)
-      // 排序方法，使用示例 （仅当 sortable 设置为 true 时生效）
-      sortableMethod: (a, b) => {
-        console.log(a.date);
-        // a 和 b 就是表格数据 (a 是第后一条，b 是前一条)
-        // 如果返回值小于 0 那么 a 排在前 b 在之前，等于 0 位置不变， 大于 0 那么 a 排在 b 之后
-        return new Date(a.date).getTime() - new Date(b.date).getTime();
-      },
      width: 100,
    },
    {
      name: "date",
      label: "时间",
      show: true,
-      sortable: "custom",
    },
    {
      name: "name",
@ -207,86 +125,13 @@ const data = reactive({
   * @type {Array}
   * @description 表格数据(模拟数据)
   */
-  tableData: [
-    {
-      id: 1,
-      date: "2016-05-01",
-      name: "Tom",
-      state: "California",
-      city: "Los Angeles",
-      address: "No. 189, Grove St, Los Angeles",
-      zip: "CA 90036",
-      slotName: "插槽",
-      children: [
-        {
-          id: 2,
-          date: "2016-05-01",
-          name: "Tom",
-          state: "California",
-          city: "Los Angeles",
-          address: "No. 189, Grove St, Los Angeles",
-          zip: "CA 90036",
-          slotName: "插槽",
-        },
-        {
-          id: 3,
-          date: "2016-05-01",
-          name: "Tom",
-          state: "California",
-          city: "Los Angeles",
-          address: "No. 189, Grove St, Los Angeles",
-          zip: "CA 90036",
-          slotName: "插槽",
-        },
-      ],
-    },
-    {
-      id: 4,
-      date: "2016-05-02",
-      name: "Tom",
-      state: "California",
-      city: "Los Angeles",
-      address: "No. 189, Grove St, Los Angeles",
-      zip: "CA 90036",
-      slotName: "插槽",
-    },
-    {
-      id: 5,
-      date: "2016-05-03",
-      name: "Tom",
-      state: "California",
-      city: "Los Angeles",
-      address: "No. 189, Grove St, Los Angeles",
-      zip: "CA 90036",
-      slotName: "插槽",
-    },
-    {
-      id: 6,
-      date: "2016-05-04",
-      name: "Tom",
-      state: "California",
-      city: "Los Angeles",
-      address: "No. 189, Grove St, Los Angeles",
-      zip: "CA 90036",
-      slotName: "插槽",
-    },
-    {
-      id: 7,
-      date: "2016-05-05",
-      name: "Tom",
-      state: "California",
-      city: "Los Angeles",
-      address: "No. 189, Grove St, Los Angeles",
-      zip: "CA 90036",
-      slotName: "插槽",
-    },
-  ],
+  tableData: [],
  /**
   * @type {Object}
   * @description 分页数据
   */
  pagination: {
-    pageSize: 10,
+    pageSize: 15,
    current: 1,
    total: 0,
  },
@ -297,10 +142,18 @@ const handleTableHeader = ({ type, data }) => {
  switch (type) {
    case "create":
      handleCreate();
-      console.log(type, data);
      break;
    case "edit":
-      console.log(type, data);
+      handleEdit();
+      break;
+    case "search":
+      handleSearch(data);
+      break;
+    case "delete":
+      handleDelete(data)
+      break;
+    case "detail":
+      handleDetail(data);
      break;
  }
 };
@ -309,60 +162,247 @@ const handleTablePagination = (current) => {
  console.log(current);
 };

-// 表格自定义排序事件
-const handleTableSort = (column, prop, order) => {
-  console.log(column, prop, order);
-};
-
-// 插槽事件
-const handleSlot = (val) => {
-  console.log(val);
+// 搜索
+const handleSearch = (val) => {
+  reqParams.name = val.value;
+  init();
 };

 // 新增
 const handleCreate = () => {
-  console.log(12);
+  formDialogStatus.value = 'create'
+  FormDialogData.formJsonData = {}
  formDialog.value = true
 };

+// 编辑
+const handleEdit = (val) => {
+  formDialogStatus.value = 'edit'
+  
+  // const id = val[0].id
+  // FormDialogData.formJsonData = {}
+
+  // formDialog.value = true
+
+
+};
+
+// 删除
+const handleDelete = (data) => {
+  const ids = data.map(item => {
+    return item.id
+  })
+  // http.post(`/api/config/removeBatch`, { ids }).then(res => {
+  //   if (res.code == 200) {
+  //     ElMessage({
+  //       message: '删除成功',
+  //       type: 'success',
+  //     })
+  //     init()
+  //   }
+  // })
+}
+
+// 详情
+const handleDetail = (val) => {
+  const id = val[0].id
+}
+
 // 清空混合搜索
 // TableBodyRef.value.clearMixInput()

 // 清空搜索
 // TableBodyRef.value.clearSearch()

-
+// 手机号校验
+const validateContactPhone = (rule, value, callback) => {
+  // 判断输入框中是否输入手机号
+  if (!value) {
+    callback(new Error('手机号不能为空'))
+  }
+  //正则表达式进行验证手机号，从1开始，第二位是35789中的任意一位，以9数字结尾
+  if (!/^1[35789]\d{9}$/.test(value)) {
+    callback(new Error('手机号格式不正确'))
+  }
+  callback()
+}
 /* 表单弹框 */
 const formDialog = ref(false)
+const formDialogStatus = ref('')
 const FormDialogData = reactive({
  title: '新增', // String | 必填 | 标题
-  width: '30%', // String | 默认值 30% | 弹框宽度
-  formType: 'slot', // 'slot' 默认为 slot  | 'json' （后台接口返回就配置 json）
+  width: '50%', // String | 默认值 30% | 弹框宽度
+  formType: 'json', // 'slot' 默认为 slot  | 'json' （后台接口返回就配置 json）
  // 注意：以下配置为 json 时才有效
-  formJosnRules: {}, // 默认为{}，表单校验规则
-  formJosnLabelWidth: '120px', // 默认为 120px，表单 label 宽度
+  formJosnRules: {
+    deptId: [
+      { required: true, message: '请选择所属部门', trigger: 'blur' },
+    ],
+    code: [
+      { required: true, message: '请填写系统编码', trigger: 'blur' },
+    ],
+    name: [
+      { required: true, message: '请填写项目名称', trigger: 'blur' },
+    ],
+    projectApproval: [
+      { required: true, message: '请选择立项时间', trigger: 'blur' },
+    ],
+    contactName: [
+      { required: true, message: '请填写负责人', trigger: 'blur' },
+    ],
+    contactPhone: [
+      { required: true, message: '请填写负责人联系电话', trigger: 'blur' },
+      { validator: validateContactPhone, trigger: 'blur' }
+    ],
+    updateFrequency: [
+      { required: true, message: '请填写更新频率', trigger: 'blur' },
+    ],
+    scenario: [
+      { required: true, message: '请填写应用场景', trigger: 'blur' },
+    ],
+    intro: [
+      { required: true, message: '请填写信息摘要', trigger: 'blur' },
+    ],
+    syncType: [
+      { required: true, message: '请填写同步方式', trigger: 'blur' },
+    ],
+  }, // 默认为{}，表单校验规则
+  formJosnLabelWidth: 'auto', // 默认为 120px，表单 label 宽度
  // form 元素
  formJosnElement: [
    {
-      type: 'input', // 元素类型
-      cloSpan: '24', // 栅格布局所占份数 （默认24）
+      type: 'tree-select', // 元素类型
+      cloSpan: 12, // 栅格布局所占份数 （默认24）
      disabled: false, // 元素是否禁用（默认为false）
-      label: '姓名', // 元素的 label
-      placeholder: '请填写姓名', // 元素的 placeholder
+      label: '所属部门', // 元素的 label
+      placeholder: '请选择所属部门', // 元素的 placeholder
+      model: 'deptId', // 元素 form 的 key
+      options: [] // type 为 select 生效 （默认为 [] ）
+    },
+    {
+      type: 'input', // 元素类型
+      cloSpan: 12, // 栅格布局所占份数 （默认24）
+      disabled: false, // 元素是否禁用（默认为false）
+      label: '系统编码', // 元素的 label
+      placeholder: '请填写系统编码', // 元素的 placeholder
+      model: 'code', // 元素 form 的 key
+    },
+    {
+      type: 'input', // 元素类型
+      cloSpan: 12, // 栅格布局所占份数 （默认24）
+      disabled: false, // 元素是否禁用（默认为false）
+      label: '项目名称', // 元素的 label
+      placeholder: '请填写项目名称', // 元素的 placeholder
      model: 'name', // 元素 form 的 key
-
-      // options: [] // type 为 select 生效 （默认为 [] ）
-
-      // dateType: [] // type 为 date 生效 （默认为 date ）
-      // dateValueformat: [] // type 为 date 生效 （默认为 YYYY-MM-DD ）
+    },
+    {
+      type: 'date', // 元素类型
+      cloSpan: 12, // 栅格布局所占份数 （默认24）
+      disabled: false, // 元素是否禁用（默认为false）
+      label: '立项时间', // 元素的 label
+      placeholder: '请选择立项时间', // 元素的 placeholder
+      model: 'projectApproval', // 元素 form 的 key
+    },
+    {
+      type: 'input', // 元素类型
+      cloSpan: 12, // 栅格布局所占份数 （默认24）
+      disabled: false, // 元素是否禁用（默认为false）
+      label: '负责人', // 元素的 label
+      placeholder: '请填写负责人', // 元素的 placeholder
+      model: 'contactName', // 元素 form 的 key
+    },
+    {
+      type: 'input', // 元素类型
+      cloSpan: 12, // 栅格布局所占份数 （默认24）
+      disabled: false, // 元素是否禁用（默认为false）
+      label: '负责人联系电话', // 元素的 label
+      placeholder: '请填写负责人联系电话', // 元素的 placeholder
+      model: 'contactPhone', // 元素 form 的 key
+    },
+    {
+      type: 'input', // 元素类型
+      cloSpan: 12, // 栅格布局所占份数 （默认24）
+      disabled: false, // 元素是否禁用（默认为false）
+      label: '更新频率', // 元素的 label
+      placeholder: '请填写更新频率', // 元素的 placeholder
+      model: 'updateFrequency', // 元素 form 的 key
+    },
+    {
+      type: 'input', // 元素类型
+      cloSpan: 12, // 栅格布局所占份数 （默认24）
+      disabled: false, // 元素是否禁用（默认为false）
+      label: '应用场景', // 元素的 label
+      placeholder: '请填写应用场景', // 元素的 placeholder
+      model: 'scenario', // 元素 form 的 key
+    },
+    {
+      type: 'input', // 元素类型
+      cloSpan: 12, // 栅格布局所占份数 （默认24）
+      disabled: false, // 元素是否禁用（默认为false）
+      label: '信息摘要', // 元素的 label
+      placeholder: '请填写信息摘要', // 元素的 placeholder
+      model: 'intro', // 元素 form 的 key
+    },
+    {
+      type: 'input', // 元素类型
+      cloSpan: 12, // 栅格布局所占份数 （默认24）
+      disabled: false, // 元素是否禁用（默认为false）
+      label: '同步方式', // 元素的 label
+      placeholder: '请填写同步方式', // 元素的 placeholder
+      model: 'syncType', // 元素 form 的 key
    },
  ],
  formJosnDisabled: false, // 表单是否禁用
-  formJsonData: {}, // 新增或者编辑表单值 （编辑必须传）
+  formJsonData: {
+    deptId: '',// 所属部门
+    code: '', // 系统编码
+    name: '', // 项目名称
+    projectApproval: '', // 立项时间
+    contactName: '', // 负责人
+    contactPhone: '', // 负责人联系电话
+    updateFrequency: '', // 更新频率
+    scenario: '', // 应用场景
+    intro: '', // 信息摘要
+    syncType: '',// 同步方式
+  }, // 新增或者编辑表单值 （编辑必须传）
 })
+
+
 const handleSubmit = (formJsonValue) => {
+  console.log(formJsonValue)
  formDialog.value = false
 }
-const form = ref({})
+
+
+/* 请求参数 */
+const reqParams = reactive({
+  current: data.pagination.current,
+  size: data.pagination.pageSize,
+  deptId: undefined,
+  name: undefined
+})
+
+// 请求
+const init = () => {
+  data.tableType.tableLoading = true
+  http.get(`/api/system/project`, reqParams).then(res => {
+    if (res.code == 200) {
+      console.log(res.data)
+      data.tableData = res.data.records
+      data.tableType.tableLoading = false
+      data.pagination.total = res.data.total
+    }
+  }).catch(() => {
+    data.tableType.tableLoading = false
+  })
+}
+
+onMounted(() => {
+  // init()
+})
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.status-select {
+  width: 200px;
+}
+</style>
--- a/vite.config.js
+++ b/vite.config.js
@ -27,8 +27,9 @@ export default defineConfig({
    host: '0.0.0.0', // 解决“vite use `--host` to expose”-- 0.0.0.0 将监听所有地址
    proxy: {
      '/api': { 
-        target: 'http://10.0.0.29:9999',
+        // target: 'http://10.0.0.29:9999',
        // target: 'https://fywz.btdit.cn/',
+        target: 'http://10.0.0.74:7777/', // 刘进
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
        // ws: true,// 开启webSocket