添加 前端 使用

dev
张同海 2 years ago
parent ea3bd4242d
commit 19027d33a1

@ -48,6 +48,12 @@
<a-form-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-textarea :rows="4" placeholder="请输入备注" v-decorator="['remark']"></a-textarea>
</a-form-item>
<a-form-item label="前端使用" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-radio-group direction="vertical" v-model="Data.isFront">
<a-radio :value="true"></a-radio>
<a-radio :value="false"></a-radio>
</a-radio-group>
</a-form-item>
</a-form>
</a-spin>
</a-modal>
@ -61,17 +67,20 @@ export default {
return {
labelCol: {
xs: { span: 24 },
sm: { span: 5 },
sm: { span: 5 }
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 15 },
sm: { span: 15 }
},
visible: false,
confirmLoading: false,
form: this.$form.createForm(this),
enumTypeList: [],
dictDataList:[]
dictDataList: [],
Data: {
isFront: true
}
}
},
methods: {
@ -83,14 +92,15 @@ export default {
handleSubmit() {
const {
form: { validateFields },
form: { validateFields }
} = this
this.confirmLoading = true
validateFields((errors, values) => {
if (!errors) {
values["dictDataList"]=this.dictDataList;
values['dictDataList'] = this.dictDataList
values = { ...values, ...this.Data }
sysDictTypeAdd(values)
.then((res) => {
.then(res => {
if (res.success) {
this.$message.success('新增成功')
this.visible = false
@ -101,7 +111,7 @@ export default {
this.$message.error('新增失败:' + res.message)
}
})
.finally((res) => {
.finally(res => {
this.confirmLoading = false
})
} else {
@ -114,7 +124,7 @@ export default {
this.visible = false
},
getEnumTypeList() {
getEnumTypeList().then((res) => {
getEnumTypeList().then(res => {
if (res.success) {
this.enumTypeList = res.data
} else {
@ -123,28 +133,28 @@ export default {
})
},
getEnumDataList(enumType) {
this.dictDataList=[];
this.form.setFieldsValue({
this.dictDataList = []
this.form.setFieldsValue({
name: enumType.name,
code:enumType.code,
remark:enumType.remark
code: enumType.code,
remark: enumType.remark
})
sysEnumDataList({enumName:enumType.code}).then((res) => {
sysEnumDataList({ enumName: enumType.code }).then(res => {
if (res.success) {
console.log(res.data)
let sort=0
let sort = 0
res.data.forEach(item => {
item.code=item.code+'';
item.remark=item.value;
item.sort=sort++;
});
this.dictDataList=res.data;
console.log(this.dictDataList)
item.code = item.code + ''
item.remark = item.value
item.sort = sort++
})
this.dictDataList = res.data
console.log(this.dictDataList)
} else {
this.$message.error('获取枚举数据失败:' + res.message)
}
})
},
},
}
}
}
</script>

@ -9,99 +9,95 @@
>
<a-spin :spinning="confirmLoading">
<a-form :form="form">
<a-form-item
style="display: none;"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
has-feedback
>
<a-form-item style="display: none;" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input v-decorator="['id']" />
</a-form-item>
<a-form-item
label="类型名称"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
has-feedback
>
<a-input placeholder="请输入类型名称" v-decorator="['name', {rules: [{required: true, message: ''}]}]" />
<a-form-item label="类型名称" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入类型名称"
v-decorator="['name', { rules: [{ required: true, message: '请输入类型名称!' }] }]"
/>
</a-form-item>
<a-form-item
label="唯一编码"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
has-feedback
>
<a-input placeholder="请输入唯一编码" v-decorator="['code', {rules: [{required: true, message: ''}]}]" />
<a-form-item label="唯一编码" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-input
placeholder="请输入唯一编码"
v-decorator="['code', { rules: [{ required: true, message: '请输入唯一编码!' }] }]"
/>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="排序"
has-feedback
>
<a-input-number style="width: 100%" placeholder="请输入排序" v-decorator="['sort', { initialValue: 100 }]" :min="1" :max="1000" />
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="排序" has-feedback>
<a-input-number
style="width: 100%"
placeholder="请输入排序"
v-decorator="['sort', { initialValue: 100 }]"
:min="1"
:max="1000"
/>
</a-form-item>
<a-form-item
label="备注"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
has-feedback
>
<a-form-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-textarea :rows="4" placeholder="请输入备注" v-decorator="['remark']"></a-textarea>
</a-form-item>
<a-form-item label="前端使用" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
<a-radio-group direction="vertical" v-model="Data.isFront">
<a-radio :value="true"></a-radio>
<a-radio :value="false"></a-radio>
</a-radio-group>
</a-form-item>
</a-form>
</a-spin>
</a-modal>
</template>
<script>
import { sysDictTypeEdit } from '@/api/modular/system/dictManage'
export default {
data () {
return {
labelCol: {
xs: { span: 24 },
sm: { span: 5 }
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 15 }
},
visible: false,
confirmLoading: false,
form: this.$form.createForm(this)
import { sysDictTypeEdit } from '@/api/modular/system/dictManage'
export default {
data() {
return {
labelCol: {
xs: { span: 24 },
sm: { span: 5 }
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 15 }
},
visible: false,
confirmLoading: false,
form: this.$form.createForm(this),
Data: {
isFront: true
}
}
},
methods: {
//
edit(record) {
this.visible = true
setTimeout(() => {
this.Data.isFront = record.isFront
this.form.setFieldsValue({
id: record.id,
name: record.name,
code: record.code,
sort: record.sort,
remark: record.remark
})
}, 100)
},
methods: {
//
edit (record) {
this.visible = true
setTimeout(() => {
this.form.setFieldsValue(
{
id: record.id,
name: record.name,
code: record.code,
sort: record.sort,
remark: record.remark
}
)
}, 100)
},
handleSubmit () {
const { form: { validateFields } } = this
this.confirmLoading = true
validateFields((errors, values) => {
if (!errors) {
sysDictTypeEdit(values).then((res) => {
handleSubmit() {
const {
form: { validateFields }
} = this
this.confirmLoading = true
validateFields((errors, values) => {
if (!errors) {
values = { ...values, ...this.Data }
sysDictTypeEdit(values)
.then(res => {
if (res.success) {
this.$message.success('编辑成功')
this.visible = false
@ -111,18 +107,19 @@
} else {
this.$message.error('编辑失败:' + res.message)
}
}).finally((res) => {
})
.finally(res => {
this.confirmLoading = false
})
} else {
this.confirmLoading = false
}
})
},
handleCancel () {
this.form.resetFields()
this.visible = false
}
} else {
this.confirmLoading = false
}
})
},
handleCancel() {
this.form.resetFields()
this.visible = false
}
}
}
</script>

@ -5,19 +5,22 @@
<a-form layout="inline">
<a-row :gutter="48">
<a-col :md="8" :sm="24">
<a-form-item label="类型名称" >
<a-input v-model="queryParam.name" allow-clear placeholder="请输入类型名称"/>
<a-form-item label="类型名称">
<a-input v-model="queryParam.name" allow-clear placeholder="请输入类型名称" />
</a-form-item>
</a-col>
<a-col :md="8" :sm="24">
<a-form-item label="唯一编码" v-if="hasPerm('sysDictType:page')">
<a-input v-model="queryParam.code" allow-clear placeholder="请输入唯一编码"/>
<a-input v-model="queryParam.code" allow-clear placeholder="请输入唯一编码" />
</a-form-item>
</a-col>
<a-col :md="!advanced && 8 || 24" :sm="24">
<span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
<a-col :md="(!advanced && 8) || 24" :sm="24">
<span
class="table-page-search-submitButtons"
:style="(advanced && { float: 'right', overflow: 'hidden' }) || {}"
>
<a-button type="primary" @click="$refs.table.refresh(true)"></a-button>
<a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
<a-button style="margin-left: 8px" @click="() => (queryParam = {})">重置</a-button>
</span>
</a-col>
</a-row>
@ -30,22 +33,25 @@
:columns="columns"
:data="loadData"
:alert="false"
:rowKey="(record) => record.id"
:rowKey="record => record.id"
:rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
>
<template slot="operator" v-if="hasPerm('sysDictType:add')">
<a-button @click="$refs.addForm.add()" icon="plus" type="primary" v-if="hasPerm('sysDictType:add')"></a-button>
<a-button @click="$refs.addForm.add()" icon="plus" type="primary" v-if="hasPerm('sysDictType:add')"
>新增类型</a-button
>
</template>
<span slot="status" slot-scope="text">
{{ statusFilter(text) }}
</span>
<span slot="isFront" slot-scope="text" :class="text ? 'CsGreen' : 'CsRed'">
{{ isFrontFilter(text) }}
</span>
<span slot="action" slot-scope="text, record">
<a @click="$refs.dataIndex.index(record)"></a>
<a-divider type="vertical" v-if="hasPerm('sysDictType:edit') || hasPerm('sysDictType:delete')"/>
<a-divider type="vertical" v-if="hasPerm('sysDictType:edit') || hasPerm('sysDictType:delete')" />
<a-dropdown v-if="hasPerm('sysDictType:edit') || hasPerm('sysDictType:delete')">
<a class="ant-dropdown-link">
更多 <a-icon type="down" />
</a>
<a class="ant-dropdown-link"> 更多 <a-icon type="down" /> </a>
<a-menu slot="overlay">
<a-menu-item v-if="hasPerm('sysDictType:edit')">
<a @click="$refs.editForm.edit(record)"></a>
@ -66,115 +72,140 @@
</div>
</template>
<script>
import { STable, XCard } from '@/components'
import { sysDictTypePage, sysDictTypeDelete, sysDictTypeDropDown } from '@/api/modular/system/dictManage'
import addForm from './addForm'
import editForm from './editForm'
import dataIndex from './dictdata/index'
export default {
components: {
XCard,
STable,
addForm,
editForm,
dataIndex
},
data () {
return {
// /
advanced: false,
//
queryParam: {},
//
columns: [
{
title: '类型名称',
dataIndex: 'name'
},
{
title: '唯一编码',
dataIndex: 'code'
},
{
title: '排序',
dataIndex: 'sort'
},
{
title: '备注',
dataIndex: 'remark',
width: 200
},
{
title: '状态',
dataIndex: 'status',
scopedSlots: { customRender: 'status' }
}, {
title: '操作',
width: '150px',
dataIndex: 'action',
scopedSlots: { customRender: 'action' }
}
],
// Promise
loadData: parameter => {
return sysDictTypePage(Object.assign(parameter, this.queryParam)).then((res) => {
return res.data
})
import { STable, XCard } from '@/components'
import { sysDictTypePage, sysDictTypeDelete, sysDictTypeDropDown } from '@/api/modular/system/dictManage'
import addForm from './addForm'
import editForm from './editForm'
import dataIndex from './dictdata/index'
export default {
components: {
XCard,
STable,
addForm,
editForm,
dataIndex
},
data() {
return {
// /
advanced: false,
//
queryParam: {},
//
columns: [
{
title: '类型名称',
dataIndex: 'name'
},
selectedRowKeys: [],
selectedRows: [],
statusDict: []
}
},
created () {
this.sysDictTypeDropDown()
},
methods: {
statusFilter (status) {
// eslint-disable-next-line eqeqeq
const values = this.statusDict.filter(item => item.code == status)
if (values.length > 0) {
return values[0].value
{
title: '唯一编码',
dataIndex: 'code'
},
{
title: '排序',
dataIndex: 'sort'
},
{
title: '备注',
dataIndex: 'remark',
width: 200
},
{
title: '状态',
dataIndex: 'status',
scopedSlots: { customRender: 'status' }
},
{
title: '前端使用',
dataIndex: 'isFront',
scopedSlots: { customRender: 'isFront' }
},
{
title: '操作',
width: '150px',
dataIndex: 'action',
scopedSlots: { customRender: 'action' }
}
},
/**
* 获取字典数据
*/
sysDictTypeDropDown () {
sysDictTypeDropDown({ code: 'common_status' }).then((res) => {
this.statusDict = res.data
],
// Promise
loadData: parameter => {
return sysDictTypePage(Object.assign(parameter, this.queryParam)).then(res => {
return res.data
})
},
sysDictTypeDelete (record) {
sysDictTypeDelete(record).then((res) => {
selectedRowKeys: [],
selectedRows: [],
statusDict: []
}
},
created() {
this.sysDictTypeDropDown()
},
methods: {
statusFilter(status) {
// eslint-disable-next-line eqeqeq
const values = this.statusDict.filter(item => item.code == status)
if (values.length > 0) {
return values[0].value
}
},
isFrontFilter(status) {
console.log(status, 11111111111111)
let RData = ''
if (status) {
RData = '是'
} else {
RData = '否'
}
return RData
},
/**
* 获取字典数据
*/
sysDictTypeDropDown() {
sysDictTypeDropDown({ code: 'common_status' }).then(res => {
this.statusDict = res.data
})
},
sysDictTypeDelete(record) {
sysDictTypeDelete(record)
.then(res => {
if (res.success) {
this.$message.success('删除成功')
this.$refs.table.refresh()
} else {
this.$message.error('删除失败:' + res.message)
}
}).catch((err) => {
})
.catch(err => {
this.$message.error('删除错误:' + err.message)
})
},
toggleAdvanced () {
this.advanced = !this.advanced
},
handleOk () {
this.$refs.table.refresh()
},
onSelectChange (selectedRowKeys, selectedRows) {
this.selectedRowKeys = selectedRowKeys
this.selectedRows = selectedRows
}
},
toggleAdvanced() {
this.advanced = !this.advanced
},
handleOk() {
this.$refs.table.refresh()
},
onSelectChange(selectedRowKeys, selectedRows) {
this.selectedRowKeys = selectedRowKeys
this.selectedRows = selectedRows
}
}
}
</script>
<style lang="less">
.table-operator {
margin-bottom: 18px;
}
button {
margin-right: 8px;
}
.table-operator {
margin-bottom: 18px;
}
button {
margin-right: 8px;
}
.CsGreen {
color: green;
}
.CsRed {
color: red;
}
</style>

Loading…
Cancel
Save