middleground_code_v2/src/views/apiAdmin/rightDialog.vue

<template>
  <div>
    <base-right-dialog
      size="1000px"
      ref="baseRightDialog"
      :footerShow="true"
      :dialogVisible.sync="dialogVisible"
      :title="dialogTitle + ' 集成前台任务'"
      @handleClose="handleDialogClose"
      :type="dialogType"
      :submitShow="submitShow"
      @handleConfirmClick="handleConfirmClick"
    >
      <base-form
        ref="basicsForm"
        :formRow="formRow"
        :isFunBtn="false"
        :rules="basicsRules"
        class="dialog_form"
        :spanWidth="`120px`"
        :loading="vLoading"

      >
      </base-form>

    </base-right-dialog>
  </div>
</template>

<script>
import baseRightDialog from '@/components/base/baseRightDialog'
import baseNewSelect from './baseNewSelect.vue'
import baseForm from '@/components/base/baseNewForm'
import baseTable from '@/components/base/baseTable'
import configData from './configData'
import { authApi } from '@/api/apis/auth'

export default {
  components: {
    baseRightDialog,
    baseForm,
    baseTable,
    baseNewSelect
  },
  data() {
    return {
      dialogVisible: false,
      dialogTitle: '',
      dialogType: '',
      formRow: configData.formRow,
      basicsRules: configData.basicsRules,
      vLoading: false,
      newMarryOptions: [],
      submitShow: true,
      loadingType: true,
      tableVersionData: [],
      tableVersionColumn: configData.tableVersionColumn,
      funData: [],
      isEdit: false,
      select_dist: {},
      plugNameOptions: [],
      tableColumn: configData.operationTableColumn,//操作记录
      tableData: []
    }
  },
  mounted() {
    this.initSelect()
  },
  methods: {
    // 插件下拉
    async initSelect() {
      let res = await authApi(
        'pluginService',
        'plugins',
        'queryPluginsByType',
        '',
        {
          'pluginType': '1'
        }
      )
      if (res.status == 200) {
        console.log(res.attribute)
        res.attribute.forEach(item => {
          this.$set(this.select_dist, item.pluginId, item)
        })
        this.formRow[0].elCol[0].options = res.attribute
      }
    },
    //下拉改变事件
    selectChangeHandle(val, options) {
      if (!val) {
        this.tableVersionData = []
        return
      }
      //找到这条
      let obj = options.find(item => {
        return item.plugName === val
      })
      console.log(obj)
      this.$set(this.$refs.basicsForm.ruleForm, 'plugId', obj.plugId)
      this.$set(this.$refs.basicsForm.ruleForm, 'plugName', obj.plugName)
      this.searchInfo(obj.plugId)
    },
    //下拉后查询单据详情
    async searchInfo(plugId) {
      let params = {
        plugId
      }
      let res = await authApi(
        'sysPlugArgService',
        'integrationTaskService',
        'getPlugArgByPlugId',
        '',
        params
      )
      console.log(res, 'res')
      if (res.status == 200) {
        //数据处理
        let arr = []
        res.attribute.forEach(item => {
          arr.push({
            startDate: '',
            endDate: '',
            remark: '',
            argValue: '',
            argName: item.argName,
            argCode: item.argCode,
            argType: item.argType
          })

        })
        this.tableVersionData = arr
      }
    },
    openDialog(type, row) {

      this.formRow = configData.formRow
      this.submitShow = true

      this.isEdit = false
      this.funData = []

      // 编辑
      if (type == 'edit') {
        this.isEdit = true
        this.dialogTitle = '编辑'
        this.dialogType = 'edit'
        this.productGetById(row.id)
      }
      // 查看
      if (type == 'show') {
        this.funData = Object.assign([], [])
        this.submitShow = false
        this.formRow = configData.formRowShow
        this.dialogTitle = '查看'
        this.dialogType = 'show'
        this.productGetById(row.id)

      }
      this.dialogVisible = true
      // 新增
      if (type == 'add') {
        this.dialogTitle = '新增'
        this.dialogType = 'add'
        this.$nextTick(()=>{
          this.$set(this.$refs.basicsForm.ruleForm,'state','0')
        })
      }

    },
    // 编辑详情
    async productGetById(id) {
      let params = {
        id: id
      }
      let res = await authApi(
        'sysInterfaceService',
        '',
        'getEntity',
        '',
        params
      )
      if (res.status == '200') {
        this.$nextTick(() => {
          this.$refs.basicsForm.incomingParameters(res.attribute)
        })
      }
    },
    addVersionDialog() {
      let obj = {
        argName: '',
        argCode: '',
        argType: '1',
        remark: ''
      }
      this.tableVersionData.push(obj)
    },
    // 删除
    onFunc(index, row) {
      if (index == 0) {
        this.$delConfirm().then(() => {
          this.tableVersionData.forEach((item, itemIndex) => {
            if (item.id === row.id) {
              this.tableVersionData.splice(itemIndex, 1)
            }
          })
        })
      }
    },
    // 弹窗关闭
    handleDialogClose() {
      this.tableVersionData = Object.assign([], [])
      this.$refs.basicsForm.resetFields()
      this.dialogVisible = false
    },
    // 弹窗确认按钮
    handleConfirmClick() {
      this.$refs.basicsForm.$refs['ruleForm'].validate((valid) => {
        if (!valid) {
          return
        } else {
          let params = {
            ...this.$refs.basicsForm.ruleForm,
          }
          if (this.dialogType == 'add') {
            this.openLoading('submit')
            this.productSaveDto(params)
          }
          if (this.dialogType == 'edit') {
            this.openLoading('submit')
            this.productUpdateDto(params)
          }
        }
      })
    },
    // 新增保存
    async productSaveDto(params) {
      let res = await authApi(
        'sysInterfaceService',
        '',
        'saveEntity',
        '',
        params
      )
      if (res.status == '200') {
        this.handleDialogClose()
        this.$vmNews('新增成功', 'success')
        this.$emit('resetTable')
      }
    },
    // 编辑保存
    async productUpdateDto(params) {
      let res = await authApi(
        'sysInterfaceService',
        '',
        'updateEntity',
        '',
        params
      )
      if (res.status == '200') {
        this.handleDialogClose()
        this.$vmNews('更新成功', 'success')
        this.$emit('resetTable')
      }
    },
    // 获取所有产品分类
    async queryProductClassfy() {
      let params = {
        tab_name: 'sys_product',
        column_name: 'classify'
      }
      let res = await authApi(
        'generalServiceImpl',
        'dictionaryshop',
        'selectDictionaryshop',
        '',
        params
      )
      if (res.status == '200') {
        this.formRow[1].elCol[0].options = res.attribute
      }
    }
  }
}
</script>

<style scoped lang="scss">
.small_title {
  margin: 10px 0;
  font-size: 16px;
}

.dialogList {
  padding: 16px 0;
  border-top: 1px solid #dcdfe6;
  display: flex;
  flex-direction: column;
}

.updateBtn {
  border: 1px solid #ebedf1;
  padding: 5px 0;
  border-radius: 3px;
  text-align: center;
  font-size: 14px;
  cursor: pointer;
  width: 100px;
}

.updateBtn:hover {
  color: #1890ff;
  border-color: #badeff;
  background-color: #e8f4ff;
}

::v-deep .el-table__body-wrapper.is-scrolling-none {
  height: auto !important;
}

::v-deep .app-container {
  height: auto !important;
}
</style>