系统管理页面弹窗

components.d.ts

@@ -32,6 +32,7 @@ declare module 'vue' {
     TIcon: typeof import('tdesign-vue-next')['Icon']
     TInput: typeof import('tdesign-vue-next')['Input']
     TInputNumber: typeof import('tdesign-vue-next')['InputNumber']
+    TInputNunber: typeof import('tdesign-vue-next')['InputNunber']
     TLayout: typeof import('tdesign-vue-next')['Layout']
     TLink: typeof import('tdesign-vue-next')['Link']
     TMenu: typeof import('tdesign-vue-next')['Menu']
@@ -43,6 +44,7 @@ declare module 'vue' {
     TRow: typeof import('tdesign-vue-next')['Row']
     TSelect: typeof import('tdesign-vue-next')['Select']
     TSubmenu: typeof import('tdesign-vue-next')['Submenu']
+    TSwitch: typeof import('tdesign-vue-next')['Switch']
     TTable: typeof import('tdesign-vue-next')['Table']
     TTabPanel: typeof import('tdesign-vue-next')['TabPanel']
     TTabs: typeof import('tdesign-vue-next')['Tabs']

src/api/system.js

@@ -0,0 +1,9 @@
+import { request } from '@/utils/request.js';
+
+// customer-manage
+export const customerListApi = (data) =>
+  request({
+    url: '/api/system/customer/list',
+    method: 'post',
+    data,
+  });

src/config/constants.js

@@ -3,3 +3,14 @@ export const NOTICE_TYPE = {
   SERVICE_UNIT: '服务单元通知',
   SUPPLIER: '供应商通知',
 };
+
+export const CUSTOMER_TYPE = {
+  TEACH: '高校教务处',
+  GRADUATE: '研究生',
+};
+
+export const RUNNING_STATUS = {
+  NORMAL: '正常',
+  ERROR: '故障',
+  DEAD: '销毁',
+};

src/hooks/useClearDialog.js

@@ -11,6 +11,7 @@ export default function useClearDialog(data, props, getDetail) {
         formData.value = cloneDeep(data);
         isEdit.value = false;
       } else {
+        formData.value = cloneDeep(val);
         isEdit.value = true;
       }
     }

src/mock/index.js

@@ -1,5 +1,7 @@
 import Mock from 'mockjs';
 
+import './system';
+
 const menusList = [
   {
     id: 1,

src/mock/system.js

@@ -0,0 +1,30 @@
+import Mock from 'mockjs';
+
+// system customer manage
+export const customerListApi = Mock.mock(
+  '/api/system/customer/list',
+  'post',
+  (data) => {
+    return {
+      // list: [],
+      list: [
+        {
+          id: '1',
+          name: '1122',
+          type: '333',
+          province: '4',
+          city: '5',
+          area: '6',
+          address: '7',
+          manager: '8',
+          serviceName: '9',
+          roles: '10',
+          k: 12,
+          l: '12',
+          m: '13',
+        },
+      ],
+      total: 70,
+    };
+  }
+);

src/views/system/config-manage/checkin-manage/edit-checkin-dialog.vue

@@ -0,0 +1,208 @@
+<template>
+  <my-dialog
+    :visible="visible"
+    :header="title"
+    :width="900"
+    attach="body"
+    :closeOnOverlayClick="false"
+    @close="emit('update:visible', false)"
+  >
+    <t-form ref="formRef" :data="formData" :rules="rules" :labelWidth="120">
+      <t-row :gutter="[0, 20]">
+        <t-col :span="6">
+          <t-form-item label="考勤组名称" name="name">
+            <t-input v-model="formData.name" clearable />
+          </t-form-item>
+        </t-col>
+        <t-col :span="6">
+          <t-form-item label="服务单元" name="unit">
+            <t-select v-model="formData.unit">
+              <t-option
+                v-for="(val, key) in CUSTOMER_TYPE"
+                :key="key"
+                :label="val"
+                :value="key"
+              />
+            </t-select>
+          </t-form-item>
+        </t-col>
+        <t-col :span="6">
+          <t-form-item label="适用考勤对象" name="to">
+            <t-select v-model="formData.to">
+              <t-option
+                v-for="(val, key) in CUSTOMER_TYPE"
+                :key="key"
+                :label="val"
+                :value="key"
+              />
+            </t-select>
+          </t-form-item>
+        </t-col>
+        <t-col :span="6">
+          <t-form-item label="适用供应商" name="supplier">
+            <t-select v-model="formData.supplier">
+              <t-option
+                v-for="(val, key) in CUSTOMER_TYPE"
+                :key="key"
+                :label="val"
+                :value="key"
+              />
+            </t-select>
+          </t-form-item>
+        </t-col>
+        <t-col :span="12">
+          <t-form-item label="签到时段" name="checkinTime">
+            <t-time-range-picker
+              v-model="formData.checkinTime"
+              format="HH:mm:ss"
+            />
+          </t-form-item>
+        </t-col>
+        <t-col :span="12">
+          <t-form-item label="签退时段" name="checkoutTime">
+            <t-time-range-picker
+              v-model="formData.checkoutTime"
+              format="HH:mm:ss"
+            />
+          </t-form-item>
+        </t-col>
+        <t-col :span="12">
+          <t-form-item label="审核角色" name="auditRoles">
+            <t-select v-model="formData.auditRoles">
+              <t-option
+                v-for="(val, key) in CUSTOMER_TYPE"
+                :key="key"
+                :label="val"
+                :value="key"
+              />
+            </t-select>
+          </t-form-item>
+        </t-col>
+        <t-col :span="6">
+          <t-form-item label="是否开启人脸" name="openFace">
+            <t-switch v-model="formData.openFace" />
+          </t-form-item>
+        </t-col>
+        <t-col :span="6">
+          <t-form-item label="允许补卡次数" name="backupCount">
+            <t-input-number
+              v-model="formData.backupCount"
+              :decimalPlaces="0"
+              :min="1"
+            />
+          </t-form-item>
+        </t-col>
+      </t-row>
+    </t-form>
+    <template #foot>
+      <t-button theme="default" @click="emit('update:visible', false)"
+        >取消</t-button
+      >
+      <t-button theme="primary" @click="save">保存</t-button>
+    </template>
+  </my-dialog>
+</template>
+<script setup name="EditCheckinDialog">
+import { ref, computed } from 'vue';
+import useClearDialog from '@/hooks/useClearDialog';
+import { CUSTOMER_TYPE } from '@/config/constants';
+const emit = defineEmits(['update:visible', 'success']);
+const formRef = ref(null);
+
+const props = defineProps({
+  visible: Boolean,
+  curRow: Object,
+});
+
+const title = computed(() => {
+  return (isEdit.value ? '编辑' : '新增') + '考勤组';
+});
+
+const { formData, isEdit } = useClearDialog(
+  {
+    unit: '',
+    status: '',
+    name: '',
+    to: [],
+    supplier: '',
+    checkinTime: [],
+    checkoutTime: [],
+    auditRoles: [],
+    openFace: false,
+    backupCount: 2,
+  },
+  props,
+  null
+);
+const rules = {
+  name: [
+    { required: true, message: '名称必填', type: 'error', trigger: 'change' },
+    {
+      min: 2,
+      message: '至少需要2个字',
+      type: 'error',
+      trigger: 'change',
+    },
+    {
+      max: 50,
+      message: '至多需要50个字',
+      type: 'error',
+      trigger: 'change',
+    },
+  ],
+  unit: [
+    {
+      required: true,
+      message: '服务单元必选',
+      type: 'error',
+      trigger: 'change',
+    },
+  ],
+  to: [
+    {
+      required: true,
+      message: '适用考勤对象必选',
+      type: 'error',
+      trigger: 'change',
+    },
+  ],
+  supplier: [
+    {
+      required: true,
+      message: '适用供应商必选',
+      type: 'error',
+      trigger: 'change',
+    },
+  ],
+  checkinTime: [
+    {
+      required: true,
+      message: '签到时段必选',
+      type: 'error',
+      trigger: 'change',
+    },
+  ],
+  checkoutTime: [
+    {
+      required: true,
+      message: '签退时段必选',
+      type: 'error',
+      trigger: 'change',
+    },
+  ],
+  auditRoles: [
+    {
+      required: true,
+      message: '审核角色必选',
+      type: 'error',
+      trigger: 'change',
+    },
+  ],
+};
+const save = async () => {
+  const valid = await formRef.value.validate();
+  if (valid !== true) return;
+  //ajax...
+  emit('success');
+};
+</script>

src/views/system/config-manage/checkin-manage/index.vue

@@ -20,6 +20,12 @@
       >
       </t-table>
     </div>
+
+    <edit-checkin-dialog
+      v-model:visible="showEditCheckinDialog"
+      :curRow="curRow"
+      @success="fetchData"
+    ></edit-checkin-dialog>
   </div>
 </template>
 
@@ -27,20 +33,23 @@
 import { ref, reactive } from 'vue';
 import { getTableData } from '@/api/test';
 import useFetchTable from '@/hooks/useFetchTable';
+import EditCheckinDialog from './edit-checkin-dialog.vue';
+const showEditCheckinDialog = ref(false);
+const curRow = ref(null);
 
 const columns = [
-  { colKey: 'a', title: '服务单元' },
-  { colKey: 'b', title: '发布状态' },
-  { colKey: 'c', title: '考勤组名称' },
-  { colKey: 'd', title: '适用考勤对象' },
-  { colKey: 'e', title: '适用供应商' },
-  { colKey: 'f', title: '签到时段' },
-  { colKey: 'g', title: '签退时段' },
-  { colKey: 'h', title: '审核角色' },
-  { colKey: 'i', title: '是否开启人脸' },
-  { colKey: 'j', title: '允许补卡次数' },
-  { colKey: 'k', title: '创建人' },
-  { colKey: 'l', title: '创建时间' },
+  { colKey: 'unit', title: '服务单元' },
+  { colKey: 'status', title: '发布状态' },
+  { colKey: 'name', title: '考勤组名称' },
+  { colKey: 'to', title: '适用考勤对象' },
+  { colKey: 'supplier', title: '适用供应商' },
+  { colKey: 'checkinTime', title: '签到时段' },
+  { colKey: 'checkoutTime', title: '签退时段' },
+  { colKey: 'auditRoles', title: '审核角色' },
+  { colKey: 'openFace', title: '是否开启人脸' },
+  { colKey: 'backupCount', title: '允许补卡次数' },
+  { colKey: 'creator', title: '创建人' },
+  { colKey: 'createdTime', title: '创建时间' },
   {
     title: '管理',
     colKey: 'operate',
@@ -113,10 +122,12 @@ const params = reactive({
 });
 
 const handleAdd = () => {
-  console.log('add');
+  curRow.value = null;
+  showEditCheckinDialog.value = true;
 };
 const handleEdit = (row) => {
-  console.log(row);
+  curRow.value = row;
+  showEditCheckinDialog.value = true;
 };
 const handleDelete = (row) => {
   console.log(row);

src/views/system/config-manage/customer-manage/edit-customer-dialog.vue

@@ -0,0 +1,152 @@
+<template>
+  <my-dialog
+    :visible="visible"
+    :header="title"
+    :width="800"
+    attach="body"
+    :closeOnOverlayClick="false"
+    @close="emit('update:visible', false)"
+  >
+    <t-form ref="formRef" :data="formData" :rules="rules" :labelWidth="100">
+      <t-row :gutter="[0, 20]">
+        <t-col :span="6">
+          <t-form-item label="客户ID" name="id">
+            <t-input v-model="formData.id" clearable />
+          </t-form-item>
+        </t-col>
+        <t-col :span="6">
+          <t-form-item label="客户名称" name="name">
+            <t-input v-model="formData.name" clearable />
+          </t-form-item>
+        </t-col>
+        <t-col :span="6">
+          <t-form-item label="客户类型" name="type">
+            <t-select v-model="formData.type">
+              <t-option
+                v-for="(val, key) in CUSTOMER_TYPE"
+                :key="key"
+                :label="val"
+                :value="key"
+              />
+            </t-select>
+          </t-form-item>
+        </t-col>
+        <t-col :span="6">
+          <t-form-item label="客户地址" name="address">
+            <t-input v-model="formData.address" clearable />
+          </t-form-item>
+        </t-col>
+        <t-col :span="6">
+          <t-form-item label="客户经理" name="manager">
+            <t-select v-model="formData.manager">
+              <t-option
+                v-for="(val, key) in CUSTOMER_TYPE"
+                :key="key"
+                :label="val"
+                :value="key"
+              />
+            </t-select>
+          </t-form-item>
+        </t-col>
+        <t-col :span="6">
+          <t-form-item label="服务档位">
+            <t-select v-model="formData.level">
+              <t-option
+                v-for="(val, key) in CUSTOMER_TYPE"
+                :key="key"
+                :label="val"
+                :value="key"
+              />
+            </t-select>
+          </t-form-item>
+        </t-col>
+        <t-col :span="6">
+          <t-form-item label="标准人天">
+            <t-input-number
+              v-model="formData.dayCount"
+              :decimalPlaces="0"
+              :min="1"
+            />
+          </t-form-item>
+        </t-col>
+      </t-row>
+    </t-form>
+    <template #foot>
+      <t-button theme="default" @click="emit('update:visible', false)"
+        >取消</t-button
+      >
+      <t-button theme="primary" @click="save">保存</t-button>
+    </template>
+  </my-dialog>
+</template>
+<script setup name="EditCustomerDialog">
+import { ref, computed } from 'vue';
+import useClearDialog from '@/hooks/useClearDialog';
+import { CUSTOMER_TYPE } from '@/config/constants';
+const emit = defineEmits(['update:visible', 'success']);
+const formRef = ref(null);
+
+const props = defineProps({
+  visible: Boolean,
+  curRow: Object,
+});
+
+const title = computed(() => {
+  return (isEdit.value ? '编辑' : '新增') + '客户';
+});
+
+const { formData, isEdit } = useClearDialog(
+  {
+    id: '',
+    name: '',
+    type: '',
+    address: '',
+    manager: '',
+    level: '',
+    dayCount: '',
+  },
+  props,
+  null
+);
+
+const rules = {
+  id: [{ required: true, message: 'ID必填', type: 'error', trigger: 'change' }],
+  name: [
+    { required: true, message: '姓名必填', type: 'error', trigger: 'change' },
+    {
+      min: 2,
+      message: '至少需要2个字',
+      type: 'error',
+      trigger: 'change',
+    },
+    {
+      max: 50,
+      message: '至多需要50个字',
+      type: 'error',
+      trigger: 'change',
+    },
+  ],
+  type: [
+    { required: true, message: '类型必选', type: 'error', trigger: 'change' },
+  ],
+  address: [
+    { required: true, message: '地址必填', type: 'error', trigger: 'change' },
+    {
+      max: 100,
+      message: '至多需要100个字',
+      type: 'error',
+      trigger: 'change',
+    },
+  ],
+  manager: [
+    { required: true, message: '经理必选', type: 'error', trigger: 'change' },
+  ],
+};
+
+const save = async () => {
+  const valid = await formRef.value.validate();
+  if (valid !== true) return;
+  //ajax...
+  emit('success');
+};
+</script>

src/views/system/config-manage/customer-manage/index.vue

@@ -21,25 +21,34 @@
       >
       </t-table>
     </div>
+
+    <edit-customer-dialog
+      v-model:visible="showEditCustomerDialog"
+      :curRow="curRow"
+      @success="fetchData"
+    ></edit-customer-dialog>
   </div>
 </template>
 
 <script setup lang="jsx" name="CustomerManage">
 import { ref, reactive } from 'vue';
-import { getTableData } from '@/api/test';
 import useFetchTable from '@/hooks/useFetchTable';
+import EditCustomerDialog from './edit-customer-dialog.vue';
+import { customerListApi } from '@/api/system';
+const showEditCustomerDialog = ref(false);
+const curRow = ref(null);
 
 const columns = [
-  { colKey: 'a', title: '客户ID' },
-  { colKey: 'b', title: '客户名称' },
-  { colKey: 'c', title: '客户类型' },
-  { colKey: 'd', title: '省份' },
-  { colKey: 'e', title: '城市' },
-  { colKey: 'f', title: '县区' },
-  { colKey: 'g', title: '地址' },
-  { colKey: 'h', title: '客户经理' },
-  { colKey: 'i', title: '服务档位名称' },
-  { colKey: 'j', title: '项目角色配置' },
+  { colKey: 'id', title: '客户ID' },
+  { colKey: 'name', title: '客户名称' },
+  { colKey: 'type', title: '客户类型' },
+  { colKey: 'province', title: '省份' },
+  { colKey: 'city', title: '城市' },
+  { colKey: 'area', title: '县区' },
+  { colKey: 'address', title: '地址' },
+  { colKey: 'manager', title: '客户经理' },
+  { colKey: 'serviceName', title: '服务档位名称' },
+  { colKey: 'roles', title: '项目角色配置' },
   { colKey: 'k', title: '标准人天' },
   { colKey: 'l', title: '创建人' },
   { colKey: 'm', title: '创建时间' },
@@ -83,7 +92,7 @@ const {
   tableData,
   fetchData,
   onChange,
-} = useFetchTable(getTableData);
+} = useFetchTable(customerListApi);
 
 const refresh = async () => {};
 
@@ -144,7 +153,8 @@ const params = reactive({
 });
 
 const handleAdd = () => {
-  console.log('add');
+  curRow.value = null;
+  showEditCustomerDialog.value = true;
 };
 const handleImport = () => {
   console.log('import');
@@ -154,6 +164,8 @@ const handleDelete = (row) => {
 };
 const handleEdit = (row) => {
   console.log(row);
+  curRow.value = row;
+  showEditCustomerDialog.value = true;
 };
 </script>
 

src/views/system/config-manage/device-manage/edit-device-dialog.vue

@@ -0,0 +1,168 @@
+<template>
+  <my-dialog
+    :visible="visible"
+    :header="title"
+    :width="800"
+    attach="body"
+    :closeOnOverlayClick="false"
+    @close="emit('update:visible', false)"
+  >
+    <t-form ref="formRef" :data="formData" :rules="rules" :labelWidth="100">
+      <t-row :gutter="[0, 20]">
+        <t-col :span="6">
+          <t-form-item label="设备编号" name="code">
+            <t-input v-model="formData.code" clearable />
+          </t-form-item>
+        </t-col>
+        <t-col :span="6">
+          <t-form-item label="品牌" name="brand">
+            <t-input v-model="formData.brand" clearable />
+          </t-form-item>
+        </t-col>
+        <t-col :span="6">
+          <t-form-item label="购买时间" name="buyTime">
+            <t-date-picker
+              v-model="formData.buyTime"
+              mode="date"
+              value-format="YYYY-MM-DD"
+              type="date"
+            />
+          </t-form-item>
+        </t-col>
+        <t-col :span="6">
+          <t-form-item label="供应商" name="supllier">
+            <t-select v-model="formData.supllier">
+              <t-option
+                v-for="(val, key) in RUNNING_STATUS"
+                :key="key"
+                :label="val"
+                :value="key"
+              />
+            </t-select>
+          </t-form-item>
+        </t-col>
+        <t-col :span="6">
+          <t-form-item label="运行状态" name="status">
+            <t-select v-model="formData.status">
+              <t-option
+                v-for="(val, key) in RUNNING_STATUS"
+                :key="key"
+                :label="val"
+                :value="key"
+              />
+            </t-select>
+          </t-form-item>
+        </t-col>
+        <t-col :span="6">
+          <t-form-item label="总扫描量">
+            <t-input-number
+              v-model="formData.scanCount"
+              :decimalPlaces="0"
+              :min="1"
+            />
+          </t-form-item>
+        </t-col>
+        <t-col :span="12">
+          <t-form-item label="当前所在地">
+            <t-input v-model="formData.location" clearable />
+          </t-form-item>
+        </t-col>
+      </t-row>
+    </t-form>
+    <template #foot>
+      <t-button theme="default" @click="emit('update:visible', false)"
+        >取消</t-button
+      >
+      <t-button theme="primary" @click="save">保存</t-button>
+    </template>
+  </my-dialog>
+</template>
+<script setup name="EditDeviceDialog">
+import { ref, computed } from 'vue';
+import useClearDialog from '@/hooks/useClearDialog';
+import { RUNNING_STATUS } from '@/config/constants';
+const emit = defineEmits(['update:visible', 'success']);
+const formRef = ref(null);
+
+const props = defineProps({
+  visible: Boolean,
+  curRow: Object,
+});
+
+const title = computed(() => {
+  return (isEdit.value ? '编辑' : '新增') + '设备';
+});
+
+const { formData, isEdit } = useClearDialog(
+  {
+    code: '',
+    serialNo: '',
+    brand: '',
+    buyTime: '',
+    supllier: '',
+    status: '',
+    location: '',
+    scanCount: '',
+  },
+  props,
+  null
+);
+const rules = {
+  code: [
+    {
+      required: true,
+      message: '设备编号必填',
+      type: 'error',
+      trigger: 'change',
+    },
+    {
+      max: 50,
+      message: '至多需要50个字',
+      type: 'error',
+      trigger: 'change',
+    },
+  ],
+  brand: [
+    { required: true, message: '品牌必填', type: 'error', trigger: 'change' },
+    {
+      max: 50,
+      message: '至多需要50个字',
+      type: 'error',
+      trigger: 'change',
+    },
+  ],
+  buyTime: [
+    {
+      required: true,
+      message: '购买时间必填',
+      type: 'error',
+      trigger: 'change',
+    },
+  ],
+  supllier: [
+    { required: true, message: '供应商必选', type: 'error', trigger: 'change' },
+  ],
+  status: [
+    {
+      required: true,
+      message: '运行状态必选',
+      type: 'error',
+      trigger: 'change',
+    },
+  ],
+  location: [
+    {
+      required: true,
+      message: '当前所在地必填',
+      type: 'error',
+      trigger: 'change',
+    },
+  ],
+};
+const save = async () => {
+  const valid = await formRef.value.validate();
+  if (valid !== true) return;
+  //ajax...
+  emit('success');
+};
+</script>

src/views/system/config-manage/device-manage/index.vue

@@ -20,23 +20,32 @@
       >
       </t-table>
     </div>
+
+    <edit-device-dialog
+      v-model:visible="showEditDeviceDialog"
+      :curRow="curRow"
+      @success="fetchData"
+    ></edit-device-dialog>
   </div>
 </template>
 
 <script setup lang="jsx" name="DeviceManage">
-// import { ref, reactive } from 'vue';
+import { ref } from 'vue';
 import { getTableData } from '@/api/test';
 import useFetchTable from '@/hooks/useFetchTable';
+import EditDeviceDialog from './edit-device-dialog.vue';
+const showEditDeviceDialog = ref(false);
+const curRow = ref(null);
 
 const columns = [
-  { colKey: 'a', title: '设别编号' },
-  { colKey: 'b', title: '序列号' },
-  { colKey: 'c', title: '品牌' },
-  { colKey: 'e', title: '购买时间' },
-  { colKey: 'f', title: '供应商' },
-  { colKey: 'g', title: '运行状态' },
-  { colKey: 'h', title: '当前所在地' },
-  { colKey: 'i', title: '总扫描量' },
+  { colKey: 'code', title: '设备编号' },
+  { colKey: 'serialNo', title: '序列号' },
+  { colKey: 'brand', title: '品牌' },
+  { colKey: 'buyTime', title: '购买时间' },
+  { colKey: 'supllier', title: '供应商' },
+  { colKey: 'status', title: '运行状态' },
+  { colKey: 'location', title: '当前所在地' },
+  { colKey: 'scanCount', title: '总扫描量' },
   {
     title: '操作',
     colKey: 'operate',
@@ -72,13 +81,15 @@ const {
 const refresh = async () => {};
 
 const handleAdd = () => {
-  console.log('add');
+  curRow.value = null;
+  showEditDeviceDialog.value = true;
 };
 const handleDelete = () => {
   console.log('delete');
 };
 const handleEdit = (row) => {
-  console.log(row);
+  curRow.value = row;
+  showEditDeviceDialog.value = true;
 };
 </script>
 

src/views/system/config-manage/service-level-manage/edit-service-level-dialog.vue

@@ -0,0 +1,121 @@
+<template>
+  <my-dialog
+    :visible="visible"
+    :header="title"
+    :width="800"
+    attach="body"
+    :closeOnOverlayClick="false"
+    @close="emit('update:visible', false)"
+  >
+    <t-form ref="formRef" :data="formData" :rules="rules" :labelWidth="100">
+      <t-row :gutter="[0, 20]">
+        <t-col :span="6">
+          <t-form-item label="服务档位名称" name="name">
+            <t-input v-model="formData.name" clearable />
+          </t-form-item>
+        </t-col>
+        <t-col :span="6">
+          <t-form-item label="业务类型" name="businessType">
+            <t-select v-model="formData.businessType">
+              <t-option
+                v-for="(val, key) in CUSTOMER_TYPE"
+                :key="key"
+                :label="val"
+                :value="key"
+              />
+            </t-select>
+          </t-form-item>
+        </t-col>
+        <t-col :span="12">
+          <t-form-item label="项目角色配置" name="roles">
+            <t-select v-model="formData.roles">
+              <t-option
+                v-for="(val, key) in CUSTOMER_TYPE"
+                :key="key"
+                :label="val"
+                :value="key"
+              />
+            </t-select>
+          </t-form-item>
+        </t-col>
+      </t-row>
+    </t-form>
+    <template #foot>
+      <t-button theme="default" @click="emit('update:visible', false)"
+        >取消</t-button
+      >
+      <t-button theme="primary" @click="save">保存</t-button>
+    </template>
+  </my-dialog>
+</template>
+<script setup name="EditServiceLevelDialog">
+import { ref, computed } from 'vue';
+import useClearDialog from '@/hooks/useClearDialog';
+import { CUSTOMER_TYPE } from '@/config/constants';
+const emit = defineEmits(['update:visible', 'success']);
+const formRef = ref(null);
+
+const props = defineProps({
+  visible: Boolean,
+  curRow: Object,
+});
+
+const title = computed(() => {
+  return (isEdit.value ? '编辑' : '新增') + '考勤组';
+});
+
+const { formData, isEdit } = useClearDialog(
+  {
+    unit: '',
+    name: '',
+    to: [],
+    supplier: '',
+    checkinTime: [],
+    checkoutTime: [],
+    auditRoles: [],
+    openFace: false,
+    backupCount: 2,
+  },
+  props,
+  null
+);
+const rules = {
+  name: [
+    { required: true, message: '名称必填', type: 'error', trigger: 'change' },
+    {
+      min: 2,
+      message: '至少需要2个字',
+      type: 'error',
+      trigger: 'change',
+    },
+    {
+      max: 50,
+      message: '至多需要50个字',
+      type: 'error',
+      trigger: 'change',
+    },
+  ],
+  businessType: [
+    {
+      required: true,
+      message: '业务类型必选',
+      type: 'error',
+      trigger: 'change',
+    },
+  ],
+  roles: [
+    {
+      required: true,
+      message: '项目角色必须配置',
+      type: 'error',
+      trigger: 'change',
+    },
+  ],
+};
+const save = async () => {
+  const valid = await formRef.value.validate();
+  if (valid !== true) return;
+  //ajax...
+  emit('success');
+};
+</script>

src/views/system/config-manage/service-level-manage/index.vue

@@ -19,20 +19,29 @@
       >
       </t-table>
     </div>
+
+    <edit-service-level-dialog
+      v-model:visible="showEditServiceLevelDialog"
+      :curRow="curRow"
+      @success="fetchData"
+    ></edit-service-level-dialog>
   </div>
 </template>
 
 <script setup lang="jsx" name="ServiceLevelManage">
-// import { ref, reactive } from 'vue';
+import { ref } from 'vue';
 import { getTableData } from '@/api/test';
 import useFetchTable from '@/hooks/useFetchTable';
+import EditServiceLevelDialog from './edit-service-level-dialog.vue';
+const showEditServiceLevelDialog = ref(false);
+const curRow = ref(null);
 
 const columns = [
-  { colKey: 'a', title: '服务档位名称' },
-  { colKey: 'b', title: '业务类型' },
-  { colKey: 'c', title: '项目角色配置' },
-  { colKey: 'd', title: '创建人' },
-  { colKey: 'e', title: '创建时间' },
+  { colKey: 'name', title: '服务档位名称' },
+  { colKey: 'businessType', title: '业务类型' },
+  { colKey: 'roles', title: '项目角色配置' },
+  { colKey: 'creator', title: '创建人' },
+  { colKey: 'createdTime', title: '创建时间' },
   {
     title: '操作',
     colKey: 'operate',
@@ -78,13 +87,16 @@ const {
 const refresh = async () => {};
 
 const handleAdd = () => {
-  console.log('add');
+  curRow.value = null;
+  showEditServiceLevelDialog.value = true;
 };
 const handleEdit = (row) => {
-  console.log(row);
+  curRow.value = row;
+  showEditServiceLevelDialog.value = true;
 };
 const handleDelete = (row) => {
-  console.log(row);
+  curRow.value = row;
+  showEditServiceLevelDialog.value = true;
 };
 </script>
 

src/views/system/config-manage/supplier-manage/edit-supplier-dialog.vue

@@ -0,0 +1,105 @@
+<template>
+  <my-dialog
+    :visible="visible"
+    :header="title"
+    :width="600"
+    attach="body"
+    :closeOnOverlayClick="false"
+    @close="emit('update:visible', false)"
+  >
+    <t-form ref="formRef" :data="formData" :rules="rules" :labelWidth="100">
+      <t-row :gutter="[0, 20]">
+        <t-col :span="12">
+          <t-form-item label="供应商编号" name="code">
+            <t-input v-model="formData.code" clearable />
+          </t-form-item>
+        </t-col>
+        <t-col :span="12">
+          <t-form-item label="供应商名称" name="name">
+            <t-input v-model="formData.name" clearable />
+          </t-form-item>
+        </t-col>
+        <t-col :span="12">
+          <t-form-item label="类型" name="type">
+            <t-select v-model="formData.type">
+              <t-option
+                v-for="(val, key) in NOTICE_TYPE"
+                :key="key"
+                :label="val"
+                :value="key"
+              />
+            </t-select>
+          </t-form-item>
+        </t-col>
+        <t-col :span="12">
+          <t-form-item label="备注">
+            <t-input v-model="formData.remark" clearable />
+          </t-form-item>
+        </t-col>
+      </t-row>
+    </t-form>
+    <template #foot>
+      <t-button theme="default" @click="emit('update:visible', false)"
+        >取消</t-button
+      >
+      <t-button theme="primary" @click="save">保存</t-button>
+    </template>
+  </my-dialog>
+</template>
+<script setup name="EditSupplierDialog">
+import { ref, computed } from 'vue';
+import useClearDialog from '@/hooks/useClearDialog';
+import { NOTICE_TYPE } from '@/config/constants';
+const emit = defineEmits(['update:visible', 'success']);
+const formRef = ref(null);
+
+const props = defineProps({
+  visible: Boolean,
+  curRow: Object,
+});
+
+const title = computed(() => {
+  return (isEdit.value ? '编辑' : '新增') + '供应商';
+});
+
+const { formData, isEdit } = useClearDialog(
+  {
+    code: '',
+    name: '',
+    type: '',
+    remark: '',
+    enable: true,
+  },
+  props,
+  null
+);
+const rules = {
+  name: [
+    { required: true, message: '名称必填', type: 'error', trigger: 'change' },
+    {
+      max: 100,
+      message: '至多需要100个字',
+      type: 'error',
+      trigger: 'change',
+    },
+  ],
+  type: [
+    { required: true, message: '类型必选', type: 'error', trigger: 'change' },
+  ],
+  code: [
+    { required: true, message: '编码必填', type: 'error', trigger: 'change' },
+    {
+      max: 50,
+      message: '至多需要50个字',
+      type: 'error',
+      trigger: 'change',
+    },
+  ],
+};
+const save = async () => {
+  const valid = await formRef.value.validate();
+  if (valid !== true) return;
+  //ajax...
+  emit('success');
+};
+</script>

src/views/system/config-manage/supplier-manage/index.vue

@@ -19,20 +19,30 @@
       >
       </t-table>
     </div>
+
+    <!-- EditSupplierDialog -->
+    <edit-supplier-dialog
+      v-model:visible="showEditSupplierDialog"
+      :curRow="curRow"
+      @success="fetchData"
+    ></edit-supplier-dialog>
   </div>
 </template>
 
 <script setup lang="jsx" name="SupplierManage">
-import { ref, reactive } from 'vue';
+import { ref } from 'vue';
 import { getTableData } from '@/api/test';
 import useFetchTable from '@/hooks/useFetchTable';
+import EditSupplierDialog from './edit-supplier-dialog.vue';
+const showEditSupplierDialog = ref(false);
+const curRow = ref(null);
 
 const columns = [
-  { colKey: 'a', title: '供应商编号' },
-  { colKey: 'b', title: '供应商名称' },
-  { colKey: 'c', title: '类型' },
-  { colKey: 'd', title: '备注' },
-  { colKey: 'e', title: '启用/禁用' },
+  { colKey: 'code', title: '供应商编号' },
+  { colKey: 'name', title: '供应商名称' },
+  { colKey: 'type', title: '类型' },
+  { colKey: 'remark', title: '备注' },
+  { colKey: 'enable', title: '启用/禁用' },
   {
     title: '操作',
     colKey: 'operate',
@@ -78,13 +88,16 @@ const {
 const refresh = async () => {};
 
 const handleAdd = () => {
-  console.log('add');
+  curRow.value = null;
+  showEditSupplierDialog.value = true;
 };
 const handleEdit = (row) => {
-  console.log(row);
+  curRow.value = row;
+  showEditSupplierDialog.value = true;
 };
 const handleDisable = (row) => {
-  console.log(row);
+  curRow.value = row;
+  showEditSupplierDialog.value = true;
 };
 </script>
 

src/views/system/notice-log/notice-manage/edit-notice-dialog.vue

@@ -1,15 +1,16 @@
 <template>
   <my-dialog
     :visible="visible"
-    @close="emit('update:visible', false)"
     :header="title"
     :width="800"
+    attach="body"
     :closeOnOverlayClick="false"
+    @close="emit('update:visible', false)"
   >
-    <t-form ref="formRef" :model="formData" :labelWidth="100">
+    <t-form ref="formRef" :data="formData" :rules="rules" :labelWidth="100">
       <t-row :gutter="[0, 20]">
         <t-col :span="6">
-          <t-form-item label="类型">
+          <t-form-item label="类型" name="type">
             <t-select v-model="formData.type">
               <t-option
                 v-for="(val, key) in NOTICE_TYPE"
@@ -21,7 +22,7 @@
           </t-form-item>
         </t-col>
         <t-col :span="6">
-          <t-form-item label="服务单元">
+          <t-form-item label="服务单元" name="unit">
             <t-select v-model="formData.unit">
               <t-option
                 v-for="(val, key) in NOTICE_TYPE"
@@ -33,12 +34,12 @@
           </t-form-item>
         </t-col>
         <t-col :span="12">
-          <t-form-item label="通知名称">
+          <t-form-item label="通知名称" name="name">
             <t-input v-model="formData.name" clearable />
           </t-form-item>
         </t-col>
         <t-col :span="12">
-          <t-form-item label="通知正文">
+          <t-form-item label="通知正文" name="content">
             <t-textarea
               v-model="formData.content"
               placeholder="请输入通知正文"
@@ -82,7 +83,40 @@ const { formData, isEdit } = useClearDialog(
   props,
   null
 );
-const save = () => {
+const rules = {
+  name: [
+    { required: true, message: '名称必填', type: 'error', trigger: 'change' },
+    {
+      max: 100,
+      message: '至多需要100个字',
+      type: 'error',
+      trigger: 'change',
+    },
+  ],
+  type: [
+    { required: true, message: '类型必选', type: 'error', trigger: 'change' },
+  ],
+  unit: [
+    {
+      required: true,
+      message: '服务单元必选',
+      type: 'error',
+      trigger: 'change',
+    },
+  ],
+  content: [
+    { required: true, message: '正文必填', type: 'error', trigger: 'change' },
+    {
+      max: 9999,
+      message: '至多需要9999个字',
+      type: 'error',
+      trigger: 'change',
+    },
+  ],
+};
+const save = async () => {
+  const valid = await formRef.value.validate();
+  if (valid !== true) return;
   //ajax...
   emit('success');
 };