123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350 |
- <template>
- <div class="baseDataDictionary">
- <div class="baseDataDictionaryBtn">
- <div class="collectSeach" :style="$utils.collectSeachSty()">
- <div class="exceed">
- <span class="exceedSpan">数据名称:</span>
- <el-input v-model="keyNameS" placeholder="请输入数据名称"></el-input>
- </div>
- <seachs @handleSeach="getSeachData" @handleRest="resetSeach"></seachs>
- </div>
- <div class="PeriodBtn" :style="$utils.PeriodBtnSty()">
- <btns
- :showImport="false"
- :showExport="false"
- :showAdd="true"
- :showSave="true"
- :showDelete="true"
- :disSave="changeDateSelect.length === 0 || changeDateSelect.length>1"
- :disDelete="changeDateSelect.length === 0"
- @handleAdd="handleAdd"
- @handleEdit="handleEdit"
- @handleDelete="handleDelete"
- ></btns>
- </div>
- <div class="baseDataDictionaryTableData">
- <el-table :data="baseDataDictionaryData" style="width: 100%"
- @select="rowClick" @select-all="rowClick" @row-dblclick="editDictionaryDetail">
- <el-table-column type="selection" label="操作" align="center" />
- <el-table-column label="数据主键" prop="dataKey" />
- <el-table-column label="数据名称" prop="keyName" />
- <el-table-column label="数据编码" prop="keyValue" />
- <el-table-column label="排序" prop="orderNum" />
- </el-table>
- </div>
- <el-dialog :title="title" v-model="dialogVisible" width="600px" :close-on-click-modal="false">
- <div class="periodFrom">
- <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" :validate-on-rule-change="false">
- <el-form-item label="数据主键" prop="dataKey">
- <el-input v-model="ruleForm.dataKey" placeholder="请输入数据主键" :disabled="isSave"></el-input>
- </el-form-item>
- <el-form-item label="数据名称" prop="keyName">
- <el-input v-model="ruleForm.keyName" placeholder="请输入数据名称"></el-input>
- </el-form-item>
- <el-form-item label="数据编码" prop="keyValue">
- <el-input v-model="ruleForm.keyValue" placeholder="请输入数据编码"></el-input>
- </el-form-item>
- <el-form-item label="排序">
- <el-input-number v-model="ruleForm.orderNum" min="1" />
- </el-form-item>
- </el-form>
- </div>
- <template #footer>
- <span class="dialog-footer">
- <el-button @click="dialogVisible = false">取 消</el-button>
- <el-button type="primary" @click="savebaseDataDictionaryMsg('ruleForm')">确 定</el-button>
- </span>
- </template>
- </el-dialog>
- <data-dictionary-detail-page ref="dictionaryDetail"></data-dictionary-detail-page>
- </div>
- </div>
- </template>
- <script>
- import btns from '../elbuttonS.vue'
- import seachs from '../seachGroup.vue'
- import addW from '../../assets/btnIcon/addW.png'
- import addIcon from '../../assets/btnIcon/add.png'
- import dataDictionaryDetailPage from './dataDictionaryDetailPage.vue'
- import {apiGetBaseDataDictionaryList, apiPostBaseDataDictionarySave, apiPostBaseDataDictionaryRemove} from '../../api/api'
- export default {
- components: { btns, seachs, dataDictionaryDetailPage },
- data() {
- return {
- dialogVisible: false,
- title: '',
- isSave: false,
- changeDateSelect: [],
- keyNameS: '',
- baseDataDictionaryData:[],
- addW: addW,
- addIcon: addIcon,
- ruleForm: {
- keyName: '',
- keyValue: '',
- orderNum: 1,
- dataKey: ''
- },
- rules: {
- keyName: [
- { required: true, message: '请输入数据名称', trigger: 'blur' }
- ],
- keyValue: [
- { required: true, message: '请输入数据编码', trigger: 'blur' }
- ],
- dataKey: [
- { required: true, message: '请输入数据主键', trigger: 'blur' }
- ]
- },
- evalradio: {},
- winPix: window.devicePixelRatio,
- }
- },
- created() {
- this.getDataDictionaryData()
- },
- methods:{
- // 查询列表数据
- getDataDictionaryData() {
- let that = this
- let params = {
- superKey: 0,
- keyName: that.keyNameS
- }
- apiGetBaseDataDictionaryList(params).then(datas =>{
- if (datas && datas.data) {
- that.baseDataDictionaryData = datas.data
- }
- })
- },
- handleAdd() {
- this.dialogVisible = true
- this.isSave = false
- this.title = '新增数据字典'
- this.$nextTick(() =>{
- this.ruleForm = {
- keyName: '',
- keyValue: '',
- orderNum: 1,
- dataKey: ''
- }
- })
- },
- handleEdit() {
- this.dialogVisible = true
- this.isSave = true
- this.title = '修改数据字典'
- this.evalradio = this.changeDateSelect[0]
- this.ruleForm = {
- keyName: this.evalradio.keyName,
- keyValue: this.evalradio.keyValue,
- orderNum: this.evalradio.orderNum,
- dataKey: this.evalradio.dataKey
- }
- },
- savebaseDataDictionaryMsg(formName) {
- let that = this
- that.$refs[formName].validate((valid) => {
- if (valid) {
- that.saveAndEditIndicatorData()
- }
- });
- },
- //新增/修改指标数据
- saveAndEditIndicatorData() {
- let that = this
- let params = {
- keyName: that.ruleForm.keyName,
- keyValue: that.ruleForm.keyValue,
- orderNum: that.ruleForm.orderNum,
- dataKey: that.ruleForm.dataKey,
- superKey: 0
- }
- if (that.isSave) {
- params.id = that.evalradio.id
- }
- apiPostBaseDataDictionarySave(params).then(datas =>{
- if (!datas.success) {
- that.$message({
- message: datas.message,
- type: 'error'
- });
- } else {
- if (!that.isSave) {
- that.$message({
- message: '数据字典新增成功',
- type: 'success'
- });
- } else {
- that.$message({
- message: '数据字典修改成功',
- type: 'success'
- });
- }
- that.dialogVisible = false
- that.changeDateSelect = []
- that.getDataDictionaryData()
- }
- })
- },
- //删除部门数据
- handleDelete() {
- this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
- confirmButtonText: '确定',
- cancelButtonText: '取消',
- type: 'warning'
- }).then(() => {
- let that = this
- let paramsArr = []
- that.changeDateSelect.forEach(it =>{
- paramsArr.push(it.id)
- })
- apiPostBaseDataDictionaryRemove(paramsArr.join(',')).then(datas =>{
- if (datas) {
- that.$message({
- type: 'success',
- message: '删除成功!'
- });
- that.changeDateSelect = []
- that.getDataDictionaryData()
- }
- })
- })
- },
- rowClick(selection, row) {
- this.changeDateSelect = selection
- },
- //字典配置
- editDictionaryDetail(row) {
- this.$refs.dictionaryDetail.init(row)
- },
- getSeachData() {
- this.getDataDictionaryData()
- },
- resetSeach() {
- this.keyNameS = ''
- this.getDataDictionaryData()
- },
- }
- }
- </script>
- <style lang="less">
- .baseDataDictionary{
- .baseDataDictionaryBtn{
- .collectSeach{
- display: flex;
- padding: 24px 20px;
- border-bottom: 1px solid#D6DBEA;
- .exceed{
- display: flex;
- .exceedSpan{
- width: 100px;
- height: 12px;
- font-size: 14px;
- font-family: Microsoft YaHei;
- font-weight: 400;
- color: #8991B0;
- line-height: 12px;
- margin-top: 14px;
- }
- .el-input{
- margin-right:10px;
- .el-input__inner{
- height:30px;
- }
- .el-input__suffix{
- .el-select__caret{
- line-height:30px;
- }
- }
- }
- }
- .el-select{
- margin-right:10px;
- .el-input__inner{
- height:30px;
- }
- .el-input__suffix{
- .el-select__caret{
- line-height:30px;
- }
- }
- }
- }
- span{
- font-size:14px;
- }
- .PeriodBtn{
- display: flex;
- justify-content: flex-end;
- padding: 20px 0;
- }
- .el-button{
- height: 30px;
- // width:100px;
- padding: 0 30px ;
- // padding-top: 8px;
- span{
- margin:0;
- }
- }
- .el-overlay{
- .el-dialog{
- margin-top: 10vh;
- .el-dialog__body{
- padding: 30px 60px 30px 20px !important;
- .periodFrom{
- .el-select, .el-input{
- width: 100%;
- }
- .el-input{
- height: 30px;
- }
- }
- }
- .el-dialog__footer{
- .dialog-footer{
- display: flex;
- justify-content: center;
- .el-button{
- width: 180px !important;
- height: 40px !important;
- }
- }
- }
- }
- }
- }
- .baseDataDictionaryTableData{
- .el-table{
- .el-table__body-wrapper{
- height: 60vh !important;
- }
- .el-input__inner{
- height: 30px !important;
- }
- .el-radio__label{
- display: none;
- }
-
- .indicitem{
- color: #409EFF;
- font-size: 12px;
- margin-right: 20px;
- cursor:pointer;
- &:hover{
- text-decoration: underline;
- }
- }
- }
- .el-pagination{
- margin-top: 20px;
- text-align: end;
- position: relative;
- }
- }
-
- }
- </style>
|