noob-components/packages/manage/views/user.vue

<template>
    <SearchRow :title="t('user.title')" :del="false" :query="false" @query="query" @add="addUser"></SearchRow>

    <ListTable @query="query" :props="props" :example="example" :page="true" :data="result">
        <template #action="{ row }">
            <TableAction v-if="row.status == 'E'" @modify="modify(row)" @del="delate(row)">
                <el-tooltip effect="dark" :content="t('user.reset.0')" placement="right">
                    <el-button :size="state.size.size" type="success" @click="resetPass(row)" icon="RefreshLeft" circle />
                </el-tooltip>
            </TableAction>
        </template>
    </ListTable>

    <el-dialog :title="t('base.add') + t('user.name')" v-model="flag.modify" :close-on-click-modal="false" top="15vh"
        width="40%" @keydown.enter.native="confirm">
        <ModifyForm ref="form" :param="user" :rules="rules" :items="items" @confirm="confirm" :width="100"
            @cancel="flag.modify = false" :modify="!flag.add">
            <template #userId>
                <NoobInput v-model="user.userId" full :placeholder="t('rule.pleaseEnter') + t('user.prop.0')"
                    :disabled="!flag.add" />
            </template>
            <template #password>
                <NoobInput v-model="user.password" :placeholder="t('rule.pleaseEnter') + t('user.prop.1')" type="password"
                    full v-if="flag.add" />
            </template>
            <template #roles>
                <el-select :size="state.size.size" class="form-item full" v-model="user.roles"
                    :placeholder="t('rule.pleaseSelect') + t('user.prop.2')" clearable multiple>
                    <el-option v-for="item in state.roles" :key="item.key" :value="item.key" :label="item.value" />
                </el-select>
            </template>
        </ModifyForm>
    </el-dialog>
</template>

<script lang="ts" setup>
import { useStore } from "vuex";
import { reactive, onMounted, ref } from "vue";
import { Api, ListTable, SearchRow, NoobInput, TableAction, NoobSelect, NoobButton, ModifyForm, Element, PageResult, PageExample } from "noob-mengyxu";
import md5 from "js-md5";
import { useI18n } from "vue3-i18n";
const { t } = useI18n();

const { state, commit, dispatch } = useStore();
const { list, add, set, del, reset } = Api.user;
const { SimpleRequired, Password, Username, Name, IdCard, Phone, Email } = Element;

const result = ref(new PageResult());
const example = reactive<any>(new PageExample());
const flag = reactive({
    modify: false,
    add: false
})
const form = ref();
const user = ref<any>({});

const props = [
    { i18n: 'user.prop.0', code: 'userId', width: 120 },
    { i18n: 'user.prop.3', code: 'name', width: 120 },
    { i18n: 'user.prop.4', code: 'phone', width: 180 },
    { i18n: 'user.prop.5', code: 'idCard', width: 180 },
    { i18n: 'user.prop.6', code: 'email', width: 180 },
    { i18n: 'user.prop.7', code: 'action', slot: true, width: 180, fixed: 'right' }
]

const rules = {
    userId: [new Username()],
    password: [new Password()],
    roles: [new SimpleRequired('user.prop.2')],
    name: [new SimpleRequired('user.prop.3'), new Name()],
    idCard: [new IdCard()],
    phone: [new Phone()],
    email: [new Email()],
}

const items = [
    { i18n: 'user.prop.0', code: 'userId', slot: true },
    { i18n: 'user.prop.1', code: 'password', type: 'password', noModify: true },
    { i18n: 'user.prop.2', code: 'roles', slot: true },
    { i18n: 'user.prop.3', code: 'name' },
    { i18n: 'user.prop.4', code: 'phone' },
    { i18n: 'user.prop.5', code: 'idCard' },
    { i18n: 'user.prop.6', code: 'email' },
]

const query = () => {
    list(example).then((rsp: any) => result.value = rsp)
}

const addUser = () => {
    user.value = {};
    form.value?.clearValidate();
    flag.add = true;
    flag.modify = true;
}

const modify = row => {
    user.value = JSON.parse(JSON.stringify(row))
    form.value?.clearValidate();
    flag.add = false;
    flag.modify = true;
}

const delate = row => {
    Element.confirm(t('user.delete.0'), t('user.delete.1')).then(() => {
        del(row).then(query);
    })
}

const resetPass = row => {
    Element.confirm(t('user.reset.1'), t('user.reset.2')).then(() => {
        reset(row);
    })
}

const confirm = () => {
    const api = flag.add ? add : set;
    user.value.password && (user.value.password = md5(user.value.password));
    api(user.value).then(rsp => {
        if (rsp) {
            query();
            flag.modify = false;
        }
    })
}

onMounted(() => {
    query();
    dispatch("getRoleMap");
});
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
</style>