Browse Source

门类管理 门类字段管理,浏览排序规则设置修改

master
z_yu 3 years ago
parent
commit
16bb04b686
  1. 1202
      src/views/category/fieldManage/data1.json
  2. 104
      src/views/category/fieldManage/index.vue
  3. 144
      src/views/category/fieldManage/module/form.vue
  4. 8
      src/views/category/orderingRule/module/form.vue

1202
src/views/category/fieldManage/data1.json
File diff suppressed because it is too large
View File

104
src/views/category/fieldManage/index.vue

@ -1,14 +1,18 @@
<template>
<div>
<div class="head-container">
<crudOperation :permission="permission" />
<crudOperation :permission="permission" crud-tag="field">
<template v-slot:right>
<el-button v-permission="permission.del" icon="el-icon-delete" size="mini" :loading="crud.delAllLoading" :disabled="crud.selections.length === 0" @click="toDelete(crud.selections)">删除</el-button>
</template>
</crudOperation>
</div>
<!--表格渲染-->
<el-table ref="table" v-loading="crud.loading" :data="crud.data" style="min-width: 100%;" height="calc(100vh - 302px)" @selection-change="selectionChangeHandler" @row-click="clickRowHandler">
<el-table ref="fieldTable" v-loading="crud.loading" :data="crud.data" style="min-width: 100%;" height="calc(100vh - 302px)" crud-tag="field" @selection-change="selectionChangeHandler" @row-click="clickRowHandler">
<el-table-column type="selection" width="55" />
<el-table-column type="index" label="序号" width="55" />
<el-table-column prop="fieldCnName" label="字段名称" min-width="85" />
<el-table-column prop="fieldName" label="字段标识" min-width="85" />
<el-table-column prop="fieldCnName" label="字段名称" min-width="140" />
<el-table-column prop="fieldName" label="字段标识" min-width="140" />
<el-table-column label="数据类型" min-width="85">
<template slot-scope="scope">
<span v-if="scope.row.isDataType === 1">字符</span>
@ -39,11 +43,6 @@
<el-checkbox v-model="scope.row.isDefaultValue" :disabled="true" />
</template>
</el-table-column>
<el-table-column label="自动加一" min-width="85">
<template slot-scope="scope">
<el-checkbox v-model="scope.row.isDefaultValue" :disabled="true" />
</template>
</el-table-column>
<el-table-column label="自动补零" min-width="85">
<template slot-scope="scope">
<el-checkbox v-model="scope.row.isDefaultValue" :disabled="true" />
@ -57,7 +56,18 @@
</el-table-column>
</el-table>
<!--表单渲染-->
<eForm />
<eForm crud-tag="field" />
<el-dialog title="删除字段" :visible.sync="deleteVisible" :before-close="handleClose">
<span class="dialog-right-top" />
<span class="dialog-left-bottom" />
<div class="setting-dialog">
<p><span style="color:#fff;">确定要删除当前字段吗</span></p>
<p><span style="color:red;">提示如果删除当前字典此字典内所属内容会一并删除</span></p>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click.native="handleConfirm">确定</el-button>
</div>
</div>
</el-dialog>
</div>
</template>
@ -66,14 +76,18 @@ import { add, edit } from '@/api/archivesConfig/field'
import eForm from './module/form'
import CRUD, { presenter } from '@crud/crud'
import crudOperation from '@crud/CRUD.operation'
import data1 from './data1.json'
export default {
components: { eForm, crudOperation },
mixins: [presenter()],
cruds() {
return CRUD({
url: 'api/field/findGroupType',
tag: 'field',
// url: 'api/field/findGroupType',
crudMethod: { add, edit },
title: '字段',
// delete
optShow: {
add: true,
edit: true,
@ -87,16 +101,19 @@ export default {
data() {
return {
permission: {
add: ['admin', this.permissionStr + ':add'],
edit: ['admin', this.permissionStr + ':edit']
},
verifyDialogVisible: false,
form: {
verifyCode: ''
add: ['admin', 'fieldManage:add'],
edit: ['admin', 'fieldManage:edit'],
del: ['admin', 'fieldManage:edit']
},
formLabelWidth: '110px',
btn: '',
showVerifyDialog: true
deleteVisible: false,
deleteData: {},
// form: {
// verifyCode: ''
// },
// formLabelWidth: '110px',
// btn: '',
// showVerifyDialog: true,
delLoading: false
}
},
created() {
@ -105,6 +122,7 @@ export default {
// isType: this.isType
// }
// this.crud.toQuery()
this.crud.data = data1
},
methods: {
// [CRUD.HOOK.beforeToCU](crud, form, btn) {
@ -120,44 +138,35 @@ export default {
// form.isColumnLength = undefined
// }
// },
handleConfirm() {
// verifyMaintenance(encrypt(this.form.verifyCode)).then((res) => {
// if (res) {
// //
// this.verifyDialogVisible = false
// this.form.verifyCode = ''
// this.showVerifyDialog = false
// if (this.btn === 'add') {
// this.crud.toAdd()
// } else if (this.btn === 'edit') {
// this.crud.toEdit(this.crud.selections[0])
// }
// this.showVerifyDialog = true
// } else {
// this.$message.error('')
// }
// })
},
handleClose(done) {
this.form.verifyCode = ''
done()
},
clickRowHandler(row) {
this.$refs.table.clearSelection()
this.$refs.table.toggleRowSelection(row)
this.$refs.fieldTable.clearSelection()
this.$refs.fieldTable.toggleRowSelection(row)
},
selectionChangeHandler(val) {
if (val.length > 1) {
// val
const finalVal = val.pop()
//
this.$refs.table.clearSelection()
this.$refs.fieldTable.clearSelection()
//
this.$refs.table.toggleRowSelection(finalVal)
this.$refs.fieldTable.toggleRowSelection(finalVal)
this.crud.selectionChangeHandler([finalVal])
} else {
this.crud.selectionChangeHandler(val)
}
},
toDelete(data) {
this.deleteData = data
this.deleteVisible = true
},
handleConfirm() {
this.deleteVisible = false
this.crud.delAllLoading = true
this.crud.doDelete(this.deleteData)
},
handleClose(done) {
this.deleteData = {}
done()
}
}
}
@ -170,4 +179,7 @@ export default {
::v-deep div.el-dialog__footer {
text-align: center;
}
::v-deep.el-table tr .el-table__cell {
height: 40px;
}
</style>

144
src/views/category/fieldManage/module/form.vue

@ -4,30 +4,75 @@
<span class="dialog-left-bottom" />
<div class="setting-dialog">
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
<el-form-item label="中文名称" prop="fieldCnName">
<el-input v-model="form.fieldCnName" style="width: 370px;" />
<el-row>
<el-col :span="15">
<el-form-item v-if="!isDisabled" label="中文名称" prop="fieldCnName">
<el-input v-model="form.fieldCnName" :disabled="isDisabled" />
</el-form-item>
<el-form-item label="字段标识" prop="fieldName">
<el-input v-model="form.fieldName" style="width: 370px;" />
<el-form-item v-if="!isDisabled" label="字段标识" prop="fieldName">
<el-input v-model="form.fieldName" disabled />
</el-form-item>
<el-form-item label="数据类型" prop="isDataType">
<el-select v-model="form.isDataType" placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
<el-form-item label="字段类型" prop="isDataType">
<el-select v-model="form.isDataType" placeholder="" disabled>
<el-option v-for="item in dataTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="字段长度" prop="isColumnLength">
<el-input-number v-model="form.isColumnLength" controls-position="right" style="width: 370px;" />
<el-input v-model="form.isColumnLength" placeholder="" disabled />
</el-form-item>
<el-form-item label="著录形式" prop="isInputClass">
<el-select v-model="form.isInputClass" placeholder="" :disabled="isDisabled" @change="selectInputClass">
<el-option v-for="item in inputClassOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="对应字典" prop="isDefaultValueType">
<el-select v-model="form.isDefaultValueType" placeholder="" :disabled="isDisabled">
<el-option v-for="item in dictionaryData" :key="item.id" :label="item.dicName" :value="item.dicCode" />
</el-select>
</el-form-item>
<el-form-item label="显示长度" prop="isInputLength">
<el-input v-model="form.isInputLength" :disabled="isDisabled" />
</el-form-item>
<el-form-item label="默认值" prop="isDefaultValue">
<el-input v-model="form.isDefaultValue" style="width: 370px;" />
<el-input v-model="form.isDefaultValue" :disabled="isDisabled" />
</el-form-item>
</el-col>
<el-col :span="9">
<el-form-item class="checkbox-item">
<span>显示一整行</span>
<el-checkbox v-model="form.isFullrow" label="" name="isFullrow" :disabled="isDisabled" />
</el-form-item>
<el-form-item class="checkbox-item">
<span>输入字段</span>
<el-checkbox v-model="form.isInput" label="" name="isInput" :disabled="isDisabled" />
</el-form-item>
<el-form-item class="checkbox-item">
<span>必填字段</span>
<el-checkbox v-model="form.isRequired" label="" name="isRequired" :disabled="isDisabled" />
</el-form-item>
<el-form-item class="checkbox-item">
<span>自动生成</span>
<el-checkbox v-model="form.isAuto" label="" name="isAuto" :disabled="isDisabled" />
</el-form-item>
<el-form-item class="checkbox-item">
<span>值不重复</span>
<el-checkbox v-model="form.isNoRepetition" label="" name="isNoRepetition" :disabled="isDisabled" />
</el-form-item>
<el-form-item class="checkbox-item">
<span>自动补零</span>
<el-checkbox v-model="form.isSupplement" label="" name="isSupplement" :disabled="isDisabled" @change="changeSupplement" />
</el-form-item>
<el-form-item class="input-num" label="位数" prop="isSupplementNum">
<!-- <el-input v-model="form.isSupplementNum" type="number" :min="1" :disabled="isDisabled || !form.isSupplement" /> -->
<el-input-number v-model="form.isSupplementNum" controls-position="right" :min="1" :disabled="isDisabled || !form.isSupplement" style="width:80px" />
<span></span>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="text" @click="crud.cancelCU">
取消
</el-button>
<el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">
确认
保存
</el-button>
</div>
</div>
@ -85,16 +130,73 @@ export default {
{ validator: checkMaxLength, trigger: 'blur' }
]
},
options: [
{
value: 1,
label: '字符'
//
dataTypeOptions: [
{ value: 1, label: '字符' },
{ value: 2, label: '数字' }
],
//
inputClassOptions: [
{ value: 'select', label: '下拉框' },
{ value: 'popover', label: '弹出框' },
{ value: 'text', label: '文本框' },
{ value: 'number', label: '数字框' },
{ value: 'date', label: '日期框' },
{ value: 'textarea', label: '文本域' }
],
//
dictionaryData: [],
isDisabled: false
}
},
methods: {
getForm() {
this.form.isSupplement = !!this.form.isSupplement
this.form.isFullrow = !!this.form.isFullrow
this.form.isInput = !!this.form.isInput
this.form.isRequired = !!this.form.isRequired
this.changeSupplement()
},
{
value: 2,
label: '数字'
// ''''
selectInputClass(value) {
if (value === 'select' || value === 'popover') {
// this.dictionaryData = []
// getData
} else {
this.dictionaryData = []
this.form.isDefaultValueType = null
}
]
if (value !== 'number') {
this.form.isIncrease = false
}
},
// '' false -
changeSupplement() {
if (!this.form.isSupplement) {
this.form.isSupplementNum = undefined
}
},
submitForm(formName) {
// ''
if (this.form.isSupplement) {
if (!this.form.isSupplementNum) {
this.$message.error('请填写位数!')
return
}
}
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!')
} else {
console.log('error submit!!')
return false
}
})
},
resetForm(formName) {
// this.$refs[formName].resetFields()
// console.log(this.thisFields)
}
}
}

8
src/views/category/orderingRule/module/form.vue

@ -5,7 +5,7 @@
<div class="setting-dialog">
<div class="fields-list">
<el-form ref="form" :model="formData" size="small" label-width="75px">
<el-row v-for="(item, index) in formData.fields" :key="item.id" :gutter="10">
<el-row v-for="(item) in formData.fields" :key="item.id" :gutter="10">
<el-col :span="13">
<el-form-item label="组成字段">
<el-input v-model="item.fieldCnName" :disabled="true" />
@ -13,9 +13,9 @@
</el-col>
<el-col :span="10">
<el-form-item label="排序方式">
<el-radio-group>
<el-radio v-model="formData.fields[index].isOrderType" :label="asc">升序</el-radio>
<el-radio v-model="formData.fields[index].isOrderType" :label="desc">降序</el-radio>
<el-radio-group v-model="item.isOrderType">
<el-radio label="asc">升序</el-radio>
<el-radio label="desc">降序</el-radio>
</el-radio-group>
</el-form-item>
</el-col>

Loading…
Cancel
Save