feat: 修改样式

zjk

2026-03-31 767b4344add791d9c0f9cbfb9effbb3001c8c804

feat: 修改样式

 src/views/operations/attendance/address/index.vue

@@ -1,7 +1,7 @@
<script setup lang="tsx">
import type { DataTableColumns } from 'naive-ui'
import { useBoolean } from '@/hooks'
import { NButton, NTag } from 'naive-ui'
import { NButton, NSwitch, NTag } from 'naive-ui'
import { addCheckLocation, deleteCheckLocation, editCheckLocation, getCheckLocationList, updateCheckLocationStatus } from '@/service/api/attendance'
import SearchPanel from '@/components/custom/SearchPanel.vue'
import AddressFormModal from './components/AddressFormModal.vue'
@@ -34,6 +34,28 @@
const formMode = ref<'add' | 'edit'>('add')

const tableScrollX = computed(() => Math.min(1600, 70 + 180 + 360 + 120 + 200))

async function handleSwitchChange(row: any) {
  dialog.warning({
    title: `是否确认${row.status === 1 ? '禁用' : '启用'}打卡地？`,
    content: '',
    positiveText: '确认',
    negativeText: '取消',
    maskClosable: false,
    autoFocus: false,
    onPositiveClick: async () => {
      updateCheckLocationStatus({ id: row.id, status: row.status === 1 ? 0 : 1 }).then((res) => {
        if (res.code === 200) {
          window.$message.success('操作成功')
          getList()
        }
      })
    },
    onNegativeClick: () => {
      getList()
    },
  })
}

const columns = computed<DataTableColumns<any>>(() => [
  {
@@ -103,7 +125,7 @@
          >
            编辑
          </span>
          <span
          {/* <span
            class="cursor-pointer"
            v-permission="70214"
            style={{ color: isEnabled ? '#0068FF' : '#0068FF' }}
@@ -127,7 +149,7 @@
            }}
          >
            {isEnabled ? '禁用' : '启用'}
          </span>
          </span> */}
          <span
            class="cursor-pointer"
            v-permission="70213"
@@ -138,7 +160,7 @@
                content: '确认删除该打卡地址？删除后不可恢复。',
                positiveText: '确认',
                negativeText: '取消',
               maskClosable: false,
                maskClosable: false,
                autoFocus: false,
                onPositiveClick: () => {
                  deleteCheckLocation(row.id!).then((res) => {
@@ -154,6 +176,18 @@
          >
            删除
          </span>
          <NSwitch
            v-permission="70214"
            value={row.status}
            checked-value={1}
            unchecked-value={0}
            onUpdateValue={() => handleSwitchChange(row)}
          >
            {{
              checked: () => '启用',
              unchecked: () => '禁用',
            }}
          </NSwitch>
        </div>
      )
    },
@@ -262,16 +296,20 @@
        </n-flex>
      </template>
      <div class="flex-1 flex flex-col h-full">
        <n-data-table class="flex-1" :columns="columns" :data="listData" :loading="loading" :bordered="false"
          flex-height :scroll-x="tableScrollX" :header-height="18" :row-height="18">
        <n-data-table
          class="flex-1" :columns="columns" :data="listData" :loading="loading" :bordered="false"
          flex-height :scroll-x="tableScrollX" :header-height="18" :row-height="18"
        >
          <template #empty>
            <div class="flex-center">
              <img src="/src/assets/element-img/no-data.png" style="width:123px;height:125px" @error="(e: any) => { e.target.src = 'https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/ab6c7ff4-403a-4a2c-9ebf-310c023dc20f.png' }">
            </div>
          </template>
        </n-data-table>
        <Pagination :count="count" :page="pageParams.pageNum" :page-size="pageParams.pageSize"
          class="robotaxi-pagination mt-12px" @change="changePage" />
        <Pagination
          :count="count" :page="pageParams.pageNum" :page-size="pageParams.pageSize"
          class="robotaxi-pagination mt-12px" @change="changePage"
        />
      </div>

      <AddressFormModal ref="modalRef" v-model:show="showFormModal" :mode="formMode" @confirm="handleConfirmForm" />

 src/views/operations/attendance/plan/components/CopyScheduleModal.vue

@@ -1,13 +1,7 @@
<script setup lang="ts">
import { ref, computed } from 'vue'
import { computed, ref } from 'vue'
import { useRouter } from 'vue-router'
import type { FormInst, FormRules } from 'naive-ui'

const router = useRouter()

interface FormModel {
  month: number | null
}

const props = defineProps<{
  show: boolean
@@ -15,31 +9,37 @@

const emit = defineEmits<{
  'update:show': [value: boolean]
  confirm: [data: FormModel]
  'confirm': [data: FormModel]
}>()

const router = useRouter()

interface FormModel {
  month: number | null
}

const show = computed({
  get: () => props.show,
  set: (value) => emit('update:show', value)
  set: value => emit('update:show', value),
})

const formRef = ref<FormInst | null>(null)
const formModel = ref<FormModel>({
  month: null
  month: null,
})

const rules: FormRules = {
  month: [
    { required: true, type: 'number', message: '请选择排班月份', trigger: 'change' }
  ]
    { required: true, type: 'number', message: '请选择排班月份', trigger: 'change' },
  ],
}

const handleCancel = () => {
function handleCancel() {
  show.value = false
  resetForm()
}

const handleConfirm = async () => {
async function handleConfirm() {
  try {
    await formRef.value?.validate()
    if (formModel.value.month) {
@@ -50,18 +50,19 @@
        path: '/operations/attendance/plan/copy',
        query: {
          month: String(formModel.value.month),
        }
        },
      })
      resetForm()
    }
  } catch (error) {
  }
  catch (error) {
    console.log('验证失败', error)
  }
}

const resetForm = () => {
function resetForm() {
  formModel.value = {
    month: null
    month: null,
  }
}
</script>
@@ -76,7 +77,8 @@
    :segmented="{
      content: true,
      action: true,
    }">
    }"
  >
    <n-form
      ref="formRef"
      :model="formModel"
@@ -92,14 +94,19 @@
          placeholder="请选择月份"
          style="width: 100%"
          format="yyyy/MM"
          :actions="[]"
        />
      </n-form-item>
    </n-form>

    <template #action>
      <n-space justify="end">
        <n-button @click="handleCancel">取消</n-button>
        <n-button type="primary" @click="handleConfirm">确定</n-button>
        <n-button @click="handleCancel">
          取消
        </n-button>
        <n-button type="primary" @click="handleConfirm">
          确定
        </n-button>
      </n-space>
    </template>
  </n-modal>

 src/views/operations/attendance/plan/components/EditMonthModal.vue

@@ -1,13 +1,7 @@
<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { computed, ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import type { FormInst, FormRules } from 'naive-ui'

const router = useRouter()

interface FormModel {
  month: number | null
}

const props = defineProps<{
  show: boolean
@@ -16,17 +10,23 @@

const emit = defineEmits<{
  'update:show': [value: boolean]
  confirm: [month: number]
  'confirm': [month: number]
}>()

const router = useRouter()

interface FormModel {
  month: number | null
}

const show = computed({
  get: () => props.show,
  set: (value) => emit('update:show', value)
  set: value => emit('update:show', value),
})

const formRef = ref<FormInst | null>(null)
const formModel = ref<FormModel>({
  month: null
  month: null,
})

const rules: FormRules = {
@@ -35,9 +35,9 @@
      required: true,
      type: 'number',
      message: '请选择排班月份',
      trigger: 'change'
    }
  ]
      trigger: 'change',
    },
  ],
}

watch(() => props.show, (newVal) => {
@@ -46,12 +46,12 @@
  }
})

const handleCancel = () => {
function handleCancel() {
  show.value = false
  resetForm()
}

const handleConfirm = async () => {
async function handleConfirm() {
  try {
    await formRef.value?.validate()
    if (formModel.value.month) {
@@ -60,18 +60,19 @@
      // 跳转到编辑页面，携带月份参数
      router.push({
        path: '/operations/attendance/plan/edit',
        query: { month: String(formModel.value.month) }
        query: { month: String(formModel.value.month) },
      })
      resetForm()
    }
  } catch (error) {
  }
  catch (error) {
    console.log('验证失败', error)
  }
}

const resetForm = () => {
function resetForm() {
  formModel.value = {
    month: null
    month: null,
  }
}
</script>
@@ -86,7 +87,8 @@
    :segmented="{
      content: true,
      action: true,
    }">
    }"
  >
    <n-form
      ref="formRef"
      :model="formModel"
@@ -102,14 +104,19 @@
          placeholder="请选择月份"
          style="width: 100%"
          format="yyyy/MM"
          :actions="[]"
        />
      </n-form-item>
    </n-form>

    <template #action>
      <n-space justify="end">
        <n-button @click="handleCancel">取消</n-button>
        <n-button type="primary" @click="handleConfirm">确定</n-button>
        <n-button @click="handleCancel">
          取消
        </n-button>
        <n-button type="primary" @click="handleConfirm">
          确定
        </n-button>
      </n-space>
    </template>
  </n-modal>

 src/views/operations/attendance/shift/index.vue

@@ -96,7 +96,7 @@
    resizable: true,
  },
  {
    title: '状态',
    title: '班次',
    key: 'shiftName',
    width: 160,
    align: 'left',
@@ -163,7 +163,7 @@
              positiveText: '确认',
              negativeText: '取消',
              maskClosable: false,
                autoFocus: false,
              autoFocus: false,
              onPositiveClick: () => {
                deleteShift(row.id!).then((res) => {
                  if (res.code === 200) {

 src/views/operations/personnel/personnelManagement/components/PersonnelFormModal.vue

@@ -238,7 +238,8 @@
    :segmented="{
      content: true,
      action: true,
    }">
    }"
  >
    <n-form
      ref="formRef"
      :model="formModel"
@@ -250,11 +251,11 @@
      <div class="form-two-col">
        <div class="form-col">
          <n-form-item label="用户名称" path="nickName">
            <n-input v-model:value="formModel.nickName" placeholder="请输入" clearable maxlength="20"/>
            <n-input v-model:value="formModel.nickName" placeholder="请输入" clearable maxlength="20" />
          </n-form-item>

          <n-form-item v-if="mode === 'add'" label="初始密码" path="password">
            <n-input v-model:value="formModel.password" type="password" placeholder="请输入" clearable show-password-on="click" />
            <n-input v-model:value="formModel.password" placeholder="请输入" clearable show-password-on="click" />
          </n-form-item>

          <n-form-item label="头像" path="avatar">
@@ -263,6 +264,7 @@
                ref="uploadRef"
                v-model:file-list="fileList"
                :max="1"
                accept="image/*"
                list-type="image-card"
                class="avatar-uploader-hidden"
                :custom-request="handleCustomUpload"
@@ -283,15 +285,19 @@

          <n-form-item label="性别" path="sex" label-placement="left">
            <n-radio-group v-model:value="formModel.sex">
              <n-radio :value="1">男</n-radio>
              <n-radio :value="2">女</n-radio>
              <n-radio :value="1">
                男
              </n-radio>
              <n-radio :value="2">
                女
              </n-radio>
            </n-radio-group>
          </n-form-item>
        </div>

        <div class="form-col">
          <n-form-item label="编号" path="uniqueNumber">
            <n-input v-model:value="formModel.uniqueNumber" placeholder="请输入" clearable maxlength="20"/>
            <n-input v-model:value="formModel.uniqueNumber" placeholder="请输入" clearable maxlength="20" />
          </n-form-item>

          <n-form-item label="联系电话" path="phoneNumber">
@@ -331,8 +337,12 @@

    <template #action>
      <n-space justify="end">
        <n-button @click="handleCancel">取消</n-button>
        <n-button type="primary" @click="handleConfirm">保存</n-button>
        <n-button @click="handleCancel">
          取消
        </n-button>
        <n-button type="primary" @click="handleConfirm">
          保存
        </n-button>
      </n-space>
    </template>
  </n-modal>
@@ -413,5 +423,4 @@
  height: 13px;
  cursor: pointer;
}

</style>

 src/views/operations/personnel/personnelManagement/detail.vue

@@ -45,6 +45,7 @@
  const res = await getOperationsUserDetail(route.params.id)
  if (res.code === 200) {
    personnelInfo.value = normalizePersonnel(res.data)
    console.log(personnelInfo.value)
  }
}

@@ -81,12 +82,12 @@

<template>
  <div v-if="personnelInfo?.nickName" class="h-full flex flex-col overflow-y-auto">
    <n-card :bordered="false" class="rounded-6px h-full" content-style="padding: 24px">
    <n-card :bordered="false" class="rounded-6px h-full" content-style="padding: 20px 24px">
      <div class="flex items-center justify-between mb-24px">
        <div class="head">
          员工详情
        </div>
        <n-button type="primary" ghost class="w-84px h-32px" @click="handleEdit">
        <n-button type="primary" secondary style="border: 1px solid #7ABDFF;" class="w-84px h-32px" @click="handleEdit">
          编辑
        </n-button>
      </div>
@@ -97,9 +98,10 @@
            round
            :size="40"
            :src="personnelInfo.avatarUrl"
            fallback-src="https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/ab6c7ff4-403a-4a2c-9ebf-310c023dc20f.png"
          />
          <img v-else-if="!personnelInfo.avatarUrl && personnelInfo.sex === 1" src="/src/assets/element-img/avatar.png" style="width:40px;height:40px">
          <img v-else src="/src/assets/element-img/acatar-woman.png" style="width:40px;height:40px">
          <img v-else-if="!personnelInfo.avatarUrl && personnelInfo.sex === 1" src="https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/7993ddfc-0743-4b4e-8ecc-776aaf1307cc.png" style="width:40px;height:40px">
          <img v-else src="https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/b8e18e26-9727-4a00-8fdf-0a3cd79b0a2c.png" style="width:40px;height:40px">
          <img v-if="personnelInfo.sex === 1" src="/src/assets/element-img/man.png" class="sex-icon">
          <img v-else src="/src/assets/element-img/woman.png" class="sex-icon">
        </div>
@@ -142,6 +144,7 @@
            fallback-src="https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/ab6c7ff4-403a-4a2c-9ebf-310c023dc20f.png"
          />
          <n-image
            v-if="personnelInfo.idCardBackUrl"
            width="213"
            height="120"
            :src="personnelInfo.idCardBackUrl"
@@ -157,6 +160,7 @@
          驾驶证：
        </div>
        <n-image
          v-if="personnelInfo.driverLicenseUrl"
          width="213"
          height="120"
          :src="personnelInfo.driverLicenseUrl"
@@ -171,9 +175,10 @@
          无犯罪记录证明：
        </div>
        <n-image
          v-if="personnelInfo.certificateOfNoCriminalRecordUrl"
          width="213"
          height="120"
          :src="personnelInfo.noCriminalRecordUrl"
          :src="personnelInfo.certificateOfNoCriminalRecordUrl"
          object-fit="cover"
          class="rounded-4px border border-[#E5E5E5]"
          fallback-src="https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/ab6c7ff4-403a-4a2c-9ebf-310c023dc20f.png"

 src/views/operations/personnel/personnelManagement/index.vue

@@ -272,10 +272,10 @@
              )
            : row.sex === 1
              ? (
                  <img src="/src/assets/element-img/avatar.png" class="w-24px h-24px rounded-full" alt="默认男头像" />
                  <img src="https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/7993ddfc-0743-4b4e-8ecc-776aaf1307cc.png" class="w-24px h-24px rounded-full" alt="默认男头像" />
                )
              : (
                  <img src="/src/assets/element-img/acatar-woman.png" class="w-24px h-24px rounded-full" alt="默认女头像" />
                  <img src="https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/b8e18e26-9727-4a00-8fdf-0a3cd79b0a2c.png" class="w-24px h-24px rounded-full" alt="默认女头像" />
                )}
          <NTooltip trigger="hover" placement="top" max-width="500px">
            {{