middleground_code_v2/src/views/masterDataOptions/displayInfo/index.vue

<template>
  <div class="displayInfo">
    <div class="btn">
      <div class="chunk">
        <el-button
          icon="el-icon-back"
          @click="
            $router.replace({ path: '/integrationOption/masterDataOptions' })
          "
        >返回
        </el-button
        >
      </div>
      <div class="chunk">
        <el-button
          icon="el-icon-first-aid-kit"
          type="primary"
          @click="saveHandle"
          :loading="saveLoading"
        >保存
        </el-button
        >
      </div>
    </div>
    <div class="main" v-loading="mainLoading">
      <div class="title">显示类型</div>
      <div class="radio">
        <el-radio-group v-model="displayType">
          <el-radio label="1">树形</el-radio>
          <el-radio label="2">列表</el-radio>
        </el-radio-group>
      </div>
      <div class="form" v-if="displayType == 1">
        <baseNewForm
          ref="optionForm"
          :spanNumber="24"
          :isFunBtn="false"
          :formRow="formRow"
          :ruleForm="ruleForm"
          :labelPosition="'right'"
          labelWidth="100px"
          @onSubmit="onSubmit"
        >
        </baseNewForm>
      </div>
      <div class="main">
        <div class="content">
          <div class="showItem">
            <div class="itemTitle">查询</div>
            <div class="setting">
              <div class="settingBox" @click="settingHandle('查询')">
                <div class="img">
                  <img src="./images/设置.png" alt="">
                </div>
                <div class="value">设置</div>
              </div>
            </div>
            <div class="showCheckBoxList">
              <div class="showCheckBoxItem" v-for="(item,index) in dbQueryFiled" :key="index">
                <div class="name">{{ item.viewName }}</div>
              </div>
            </div>
          </div>
          <div class="showItem">
            <div class="itemTitle">列表</div>
            <div class="setting">
              <div class="settingBox" @click="settingHandle('列表')">
                <div class="img">
                  <img src="./images/设置.png" alt="">
                </div>
                <div class="value">设置</div>
              </div>
            </div>
            <div class="showCheckBoxList">
              <div class="showCheckBoxItem" v-for="(item,index) in dbListFiled" :key="index">
                <div class="name">{{ item.viewName }}</div>
              </div>
            </div>
          </div>
          <div class="showItem">
            <div class="itemTitle">新增</div>
            <div class="setting">
              <div class="settingBox" @click="settingHandle('新增')">
                <div class="img">
                  <img src="./images/设置.png" alt="">
                </div>
                <div class="value">设置</div>
              </div>
            </div>
            <div class="showCheckBoxList">
              <div class="showCheckBoxItem" v-for="(item,index) in dbAddFiled" :key="index">
                <div class="name">{{ item.viewName }}</div>
              </div>
            </div>
          </div>
          <div class="showItem">
            <div class="itemTitle">修改</div>
            <div class="setting">
              <div class="settingBox" @click="settingHandle('修改')">
                <div class="img">
                  <img src="./images/设置.png" alt="">
                </div>
                <div class="value">设置</div>
              </div>
            </div>
            <div class="showCheckBoxList">
              <div class="showCheckBoxItem" v-for="(item,index) in dbEditFiled" :key="index">
                <div class="name">{{ item.viewName }}</div>
              </div>
            </div>
          </div>
          <div class="showItem">
            <div class="itemTitle">查看</div>
            <div class="setting">
              <div class="settingBox" @click="settingHandle('查看')">
                <div class="img">
                  <img src="./images/设置.png" alt="">
                </div>
                <div class="value">设置</div>
              </div>
            </div>
            <div class="showCheckBoxList">
              <div class="showCheckBoxItem" v-for="(item,index) in dbShowFiled" :key="index">
                <div class="name">{{ item.viewName }}</div>
              </div>
            </div>
          </div>
          <div class="showItem">
            <div class="itemTitle">按钮</div>
            <div class="setting">
              <div class="settingBox" @click="settingHandle('按钮')">
                <div class="img">
                  <img src="./images/设置.png" alt="">
                </div>
                <div class="value">设置</div>
              </div>
            </div>
            <div class="showCheckBoxList">
              <div class="showCheckBoxItem" v-for="(item,index) in btnShowList" :key="index">
                <div class="name">{{ item.name }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
    <!--     -->
    <base-right-dialog
      ref="mainTableAddtDialog"
      :footerShow="true"
      :dialogVisible.sync="mainTableDialogShow"
      :title="activeTitle + '设置'"
      @handleClose="mainTableDialogShow=false"
      :submitShow="true"
      :size="'50%'"
      @handleConfirmClick="mainTableSaveHandle"
    >
      <div class="mainTable">
        <settingChunk ref="settingChunk" @saveSuccessEmit="saveSuccessEmit"></settingChunk>
      </div>
    </base-right-dialog>
  </div>
</template>
<script>
import settingChunk from '@/views/masterDataOptions/displayInfo/settingChunk.vue'
import baseNewForm from '@/views/intergrationTask/compoments/baseNewForm'
import { getApiModuleApi } from '@/api/apiChunks/index.js'
import baseRightDialog from '@/components/base/baseRightDialog/index.vue'
import { authApi } from '@/api/apis/auth'

export default {
  name: 'index.vue',
  data() {
    return {
      formRow: [
        {
          elCol: [
            {
              type: 'select',
              title: '显示字段',
              id: 'viewFiled',
              row: 6,
              disabled: false,
              required: true,
              fontSize: 16,
              options: []
            },
            {
              type: 'select',
              title: '上级id字段',
              id: 'upIdFiled',
              row: 6,
              disabled: false,
              required: true,
              fontSize: 16,
              options: []
            }
          ]
        }
      ],
      ruleForm: {},
      ainLoading: false,
      displayType: '1',//显示类型
      saveLoading: false,//保存loading
      activeTitle: '',//当前选中的key名用于右弹窗
      mainTableDialogShow: false,
      mainLoading: false,
      'dbQueryFiled': [],//查询
      'dbAddFiled': [],//新增
      'dbEditFiled': [],//修改
      'dbShowFiled': [],//查看
      'dbListFiled': [],//列表
      btnShowList: [],//已选中的按钮
      allFiledList: [
        {
          buttonName: '新建',
          buttonValue: 'new',
          buttonType: '1'
        }, {
          buttonName: '重置',
          buttonValue: 'resize',
          buttonType: '2'
        }, {
          buttonName: '查询',
          buttonValue: 'search',
          buttonType: '3'
        }, {
          buttonName: '修改',
          buttonValue: 'edit',
          buttonType: '4'
        }, {
          buttonName: '删除',
          buttonValue: 'dele',
          buttonType: '5'
        }, {
          buttonName: '查看',
          buttonValue: 'view',
          buttonType: '6'
        }, {
          buttonName: '下发',
          buttonValue: 'send',
          buttonType: '7'
        }
      ],//所有按钮
      dist: {
        '查询': ['queryFiled', 'dbQueryFiled', 1],
        '列表': ['listFiled', 'dbListFiled', 2],
        '新增': ['addFiled', 'dbAddFiled', 3],
        '修改': ['editFiled', 'dbEditFiled', 4],
        '查看': ['showFiled', 'dbShowFiled', 5]
      }//字典
    }
  },
  methods: {
    async initSelect() {
      const res = await getApiModuleApi({
        tl: 'mdmModuleService',
        as: '',
        dj: 'queryMdmMainDBField'
      }, {
        mdmId: this.$route.query.id
      })
      if (res.status === '200') {
        this.formRow[0].elCol[1].options = []
        this.formRow[0].elCol[0].options = []
        res.attribute.forEach(item => {
          this.formRow[0].elCol[1].options.push({
            label: item.chName,
            id: item.enName
          })
          this.formRow[0].elCol[0].options.push({
            label: item.chName,
            id: item.enName
          })
        })
      }
    },
    //设置保存成功
    saveSuccessEmit() {
      this.mainTableDialogShow = false
      this.getAllField()
    },
    //验证通过
    async onSubmit() {
      if (this.ruleForm.id) {
        this.openLoading('submit')
        const res = await authApi('mdmModuleService', '', 'updateMdmView', '', {
          ...this.ruleForm,
          mdmId: this.$route.query.id,
          viewName: this.displayType
        })
        this.$vmNews('保存成功', 'success')
        this.getRuleForm()
      } else {
        this.openLoading('submit')
        const res = await authApi('mdmModuleService', '', 'saveMdmView', '', {
          ...this.ruleForm,
          mdmId: this.$route.query.id,
          viewName: this.displayType

        })
        this.$vmNews('保存成功', 'success')
        this.getRuleForm()
      }

    },
    //获取类型
    async getRuleForm() {
      this.openLoading('detail')
      this.ruleForm = {}
      const res = await authApi('mdmModuleService', '', 'queryMdmView', '', {
        mdmId: this.$route.query.id
      })
      console.log(res.attribute, 'res.attribute', res)
      this.ruleForm = res.attribute ? res.attribute : {}
      this.displayType = this.ruleForm.viewName ? this.ruleForm.viewName : '1'
    },
    //保存
    saveHandle() {
      if (this.displayType === '1') {
        this.$refs.optionForm.submitForm()
      } else {
        this.onSubmit()
      }
    },
    //点击设置
    settingHandle(key) {
      this.activeTitle = key
      this.mainTableDialogShow = true
      this.$nextTick(() => {
        this.$refs.settingChunk.getAllBtn(key)
      })
    },
    //右弹窗点击保存
    mainTableSaveHandle() {
      this.$refs.settingChunk.saveHandle()
    },
    //获取所有字段
    async getAllField() {
      //字段相关
      const res = await authApi('mdmModuleService', '', 'queryMdmViewField', '', {
        id: this.$route.query.id
      })
      console.log(res, 'res')
      this.dbQueryFiled = res.attribute.dbQueryFiled
      this.dbListFiled = res.attribute.dbListFiled
      this.dbAddFiled = res.attribute.dbAddFiled
      this.dbEditFiled = res.attribute.dbEditFiled
      this.dbShowFiled = res.attribute.dbShowFiled
      //按钮相关
      const res2 = await authApi('mdmModuleService', '', 'queryMdmViewButton', '', {
        mdmId: this.$route.query.id
      })
      res2.attribute.forEach(item => {
        item.name = this.allFiledList[item.buttonType - 1].buttonName
      })
      this.btnShowList = res2.attribute
    }
  },
  components: {
    baseRightDialog,
    baseNewForm,
    settingChunk
  },
  created() {
    //获取显示类型和显示字段
    this.getRuleForm()
    //获取下啦
    this.initSelect()
    //获取所有显示字段
    this.getAllField()
    this.$emit('flashActive', 2)
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-form-item__content {
  margin: 0 !important;
}

::v-deep .el-menu-item {
  padding: 0 35px;
}

::v-deep .el-transfer-panel {
  width: 25vw;
  height: 60vh;
}

::v-deep .el-button {
  border-radius: 16px;
}

::v-deep .el-transfer-panel__list {
  height: 50vh;
}

::v-deep .el-transfer-panel__body {
  height: 50vh;
}

.displayInfo {
  background-color: #fbfbfb;
  width: 100%;
  position: relative;

  > .btn {
    display: flex;
    justify-content: flex-end;

    > .chunk {
      margin-left: 10px;
    }
  }

  > .main {
    background-color: #fff;
    border-right: 8px;
    height: 85vh;
    overflow: auto;
    margin-top: 10px;
    padding: 0px 15px;

    > .title {
      font-weight: 600;
      margin: 15px 0;
    }

    > .radio {
      margin: 15px 20px;
    }

    > .tabIndex {
      margin-top: 10px;
    }
  .main{
    overflow: auto;
    > .content {
      margin-top: 1vh;
      width: 2100px;
      .showItem {
        display: inline-block;
        width: 340px;
        margin-left: 8px;
        height: 68vh;
        background: #FFFFFF;
        border-radius: 8px;
        border: 1px solid #EBEBEB;
        padding: 14px 20px;
        position: relative;

        .itemTitle {
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 16px;
          color: #333333;
          line-height: 22px;
          font-style: normal;
          text-align: center;
          padding-bottom: 20px;
          border-bottom: 1px #ebebeb solid;
        }

        .setting {
          width: 100%;
          height: 140px;
          position: absolute;
          bottom: 0;
          left: 0;
          border-radius: 8px;
          display: none;
          justify-content: center;
          align-items: center;
          background-color: rgba(0, 0, 0, .6);

          .settingBox {
            cursor: pointer;

            .img {
              width: 44px;
              height: 44px;

              img {
                width: 100%;
                height: 100%;
              }
            }

            .value {
              margin-top: 10px;
              font-family: PingFangSC, PingFang SC;
              font-weight: 600;
              font-size: 16px;
              color: #FFFFFF;
              line-height: 22px;
              text-align: center;
              font-style: normal;
            }
          }
        }

        &:hover {
          .setting {
            display: flex !important;
          }
        }

        .showCheckBoxList {
          height: 45vh;
          overflow: auto;
        }

        .showCheckBoxItem {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin: 16px 0 16px;
          border-radius: 4px;
          font-size: 14px;


          .btn {
            color: grey;
            cursor: pointer;
          }
        }
      }
    }
  }

  }

}
</style>