mirrors2/naive-ui-admin
1
0
Fork 0
mirror of https://github.com/jekip/naive-ui-admin.git synced 2026-02-13 17:52:28 +08:00
Code Issues Packages Projects Releases Wiki Activity

1.7.0

Browse Source
This commit is contained in:
xiaoma
2022-02-14 15:12:32 +08:00
parent caaca83f78
commit a53c86e41b
10 changed files with 7646 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/components/Table/src/components/editable/EditableCell.vue
View File

@@ -11,7 +11,6 @@
<CellComponent
v-bind="getComponentProps"
:component="getComponent"
:style="getWrapperStyle"
:popoverVisible="getRuleVisible"
:ruleMessage="ruleMessage"
:rule="getRule"
@@ -33,7 +32,7 @@
</div>
</template>
<script lang="ts">
import type { CSSProperties, PropType } from 'vue';
import type { PropType } from 'vue';
import type { BasicColumn } from '../../types/table';
import type { EditRecordRow } from './index';
@@ -51,7 +50,8 @@
import { set, omit } from 'lodash-es';
import { EventEnum } from '@/components/Table/src/componentMap';
import { milliseconds, format } from 'date-fns';
import { parseISO, format } from 'date-fns';
import { Fn, LabelValueOptions } from '/#/index';
export default defineComponent({
name: 'EditableCell',
@@ -105,16 +105,28 @@
const isCheckValue = unref(getIsCheckComp);
const valueField = isCheckValue ? 'checked' : 'value';
let valueField = isCheckValue ? 'checked' : 'value';
const val = unref(currentValueRef);
let value = isCheckValue ? (isNumber(val) && isBoolean(val) ? val : !!val) : val;
if (isString(value) && component === 'NDatePicker') {
value = milliseconds(value as Duration);
} else if (isArray(value) && component === 'NDatePicker') {
value = value.map((item) => milliseconds(item));
//TODO 特殊处理 NDatePicker 可能要根据项目 规范自行调整代码
if (component === 'NDatePicker') {
if (isString(value)) {
if (compProps.valueFormat) {
valueField = 'formatted-value';
} else {
value = parseISO(value as any).getTime();
}
} else if (isArray(value)) {
if (compProps.valueFormat) {
valueField = 'formatted-value';
} else {
value = value.map((item) => parseISO(item).getTime());
}
}
}
const onEvent: any = editComponent ? EventEnum[editComponent] : undefined;
return {
@@ -146,15 +158,6 @@
return option?.label ?? value;
});
const getWrapperStyle = computed((): CSSProperties => {
// if (unref(getIsCheckComp) || unref(getRowEditable)) {
// return {};
// }
return {
width: 'calc(100% - 48px)',
};
});
const getWrapperClass = computed(() => {
const { align = 'center' } = props.column;
return `edit-cell-align-${align}`;
@@ -188,6 +191,7 @@
async function handleChange(e: any) {
const component = unref(getComponent);
const compProps = props.column?.editComponentProps ?? {};
if (!e) {
currentValueRef.value = e;
} else if (e?.target && Reflect.has(e.target, 'value')) {
@@ -198,10 +202,20 @@
currentValueRef.value = e;
}
//TODO 根据组件格式化值
// if (component === 'NDatePicker') {
// currentValueRef.value = format(currentValueRef.value,'yyyy-MM-dd HH:mm:ss');
// }
//TODO 特殊处理 NDatePicker 可能要根据项目 规范自行调整代码
if (component === 'NDatePicker') {
if (isNumber(currentValueRef.value)) {
if (compProps.valueFormat) {
currentValueRef.value = format(currentValueRef.value, compProps.valueFormat);
}
} else if (isArray(currentValueRef.value)) {
if (compProps.valueFormat) {
currentValueRef.value = currentValueRef.value.map((item) => {
format(item, compProps.valueFormat);
});
}
}
}
const onChange = props.column?.editComponentProps?.onChange;
if (onChange && isFunction(onChange)) onChange(...arguments);
@@ -355,7 +369,6 @@
getRuleVisible,
getComponentProps,
handleOptionsChange,
getWrapperStyle,
getWrapperClass,
getRowEditable,
getValues,

21
src/components/Upload/src/BasicUpload.vue
View File

@@ -14,10 +14,10 @@
<img :src="item" />
</div>
<div class="img-box-actions">
<n-icon size="18" class="action-icon mx-2" @click="preview(item)">
<n-icon size="18" class="mx-2 action-icon" @click="preview(item)">
<EyeOutlined />
</n-icon>
<n-icon size="18" class="action-icon mx-2" @click="remove(index)">
<n-icon size="18" class="mx-2 action-icon" @click="remove(index)">
<DeleteOutlined />
</n-icon>
</div>
@@ -36,7 +36,7 @@
@before-upload="beforeUpload"
@finish="finish"
>
<div class="flex justify-center flex-col">
<div class="flex flex-col justify-center">
<n-icon size="18" class="m-auto">
<PlusOutlined />
</n-icon>
@@ -68,7 +68,7 @@
</template>
<script lang="ts">
import { defineComponent, toRefs, reactive, computed } from 'vue';
import { defineComponent, toRefs, reactive, computed, watch } from 'vue';
import { EyeOutlined, DeleteOutlined, PlusOutlined } from '@vicons/antd';
import { basicProps } from './props';
import { useMessage, useDialog } from 'naive-ui';
@@ -106,11 +106,14 @@
});
//赋值默认图片显示
if (props.value.length) {
state.imgList = props.value.map((item) => {
return getImgUrl(item);
});
}
watch(
() => props.value,
() => {
imgList.value = props.value.map((item) => {
return getImgUrl(item);
});
}
);
//预览
function preview(url: string) {

4
src/main.ts
View File

@@ -3,8 +3,6 @@ import { createApp } from 'vue';
import App from './App.vue';
import router, { setupRouter } from './router';
import { setupStore } from '@/store';
import MakeitCaptcha from 'makeit-captcha';
import 'makeit-captcha/dist/captcha.min.css';
import { setupNaive, setupDirectives } from '@/plugins';
import { AppProvider } from '@/components/Application';
@@ -13,8 +11,6 @@ async function bootstrap() {
const app = createApp(App);
app.use(MakeitCaptcha);
// 注册全局常用的 naive-ui 组件
setupNaive(app);

1
src/views/comp/table/CellColumns.ts
View File

@@ -61,6 +61,7 @@ export const columns = [
editComponentProps: {
type: 'datetime',
format: 'yyyy-MM-dd HH:mm:ss',
valueFormat: 'yyyy-MM-dd HH:mm:ss',
},
ellipsis: false,
},

1
src/views/comp/table/rowColumns.ts
View File

@@ -64,6 +64,7 @@ export const columns = [
editComponentProps: {
type: 'datetime',
format: 'yyyy-MM-dd HH:mm:ss',
valueFormat: 'yyyy-MM-dd HH:mm:ss',
},
ellipsis: false,
},

45
src/views/login/index.vue
View File

@@ -39,11 +39,6 @@
</template>
</n-input>
</n-form-item>
<n-form-item path="isCaptcha">
<div class="w-full">
<mi-captcha width="384" theme-color="#2d8cf0" :logo="logo" @success="onAuthCode" />
</div>
</n-form-item>
<n-form-item class="default-color">
<div class="flex justify-between">
<div class="flex-initial">
@@ -95,8 +90,8 @@
import { useUserStore } from '@/store/modules/user';
import { useMessage } from 'naive-ui';
import { ResultEnum } from '@/enums/httpEnum';
import logo from '@/assets/images/logo.png';
import { PersonOutline, LockClosedOutline, LogoGithub, LogoFacebook } from '@vicons/ionicons5';
import { PageEnum } from '@/enums/pageEnum';
interface FormState {
username: string;
@@ -107,23 +102,17 @@
const message = useMessage();
const loading = ref(false);
const autoLogin = ref(true);
const LOGIN_NAME = PageEnum.BASE_LOGIN_NAME;
const formInline = reactive({
username: 'admin',
password: '123456',
isCaptcha: false,
isCaptcha: true,
});
const rules = {
username: { required: true, message: '请输入用户名', trigger: 'blur' },
password: { required: true, message: '请输入密码', trigger: 'blur' },
isCaptcha: {
required: true,
type: 'boolean',
trigger: 'change',
message: '请点击按钮进行验证码校验',
validator: (_, value) => value === true,
},
};
const userStore = useUserStore();
@@ -144,28 +133,26 @@
password,
};
const { code, message: msg } = await userStore.login(params);
if (code == ResultEnum.SUCCESS) {
const toPath = decodeURIComponent((route.query?.redirect || '/') as string);
message.success('登录成功！');
router.replace(toPath).then((_) => {
if (route.name == 'login') {
try {
const { code, message: msg } = await userStore.login(params);
message.destroyAll();
if (code == ResultEnum.SUCCESS) {
const toPath = decodeURIComponent((route.query?.redirect || '/') as string);
message.success('登录成功，即将进入系统');
if (route.name === LOGIN_NAME) {
router.replace('/');
}
});
} else {
message.info(msg || '登录失败');
} else router.replace(toPath);
} else {
message.info(msg || '登录失败');
}
} finally {
loading.value = false;
}
} else {
message.error('请填写完整信息，并且进行验证码校验');
}
});
};
const onAuthCode = () => {
formInline.isCaptcha = true;
}
</script>
<style lang="less" scoped>