xps-web-v5/src/views/biz/oam_params/index.vue

<route lang="yaml">
meta:
  enabled: false
</route>

<script lang="ts" setup name="BizObjectOAMParamsList">
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { dataType } from '@/utils/tool'
import { createObjectOAMParams, deleteObjectOAMParamsById, getObjectOAMParamsListByOamId, updateObjectOAMParams } from '@/api/biz/bizObjectOAMParamsApi'
import RuleSelector from '@/views/biz/oam/components/RuleSelector.vue'
const props = withDefaults(defineProps<{
  bizId: number
  objectId: number
}>(), {
  bizId: 0,
  objectId: 0,
})

const bizId = props.bizId
const objectId = props.objectId

interface ObjectOAMParams {
  bizId: number
  objectId: number
  oamId: number
  paramId: number
  logicalOperator: string
  compareOperator: string
  paramName: string
  paramValue: string
  paramType: number
  paramRemark: string
  isRuled: number
  ruleId: number
  sortNo: number
  isEdit: boolean
}

// 数据
const state = reactive({
  title: '',
  dialogVisible: false,
  loading: false,
  search: {
    keywords: '',
    bizId: props.bizId,
    objectId: props.objectId,
    oamId: 0,
  },
  dataList: [] as ObjectOAMParams[],
  actionType: 1,
})

const formRef = ref<FormInstance>()
const formRules = reactive<FormRules>({
  paramsTarget: [
    { required: true, message: '请输入对象标题', trigger: 'blur' },
  ],
  paramsOperator: [
    { required: true, message: '请输入对象类型', trigger: 'blur' },
  ],
  paramsValue: [
    { required: true, message: '请输入对像代码', trigger: 'blur' },
  ],
})

// 查询数据
const getData = async () => {
  state.loading = true
  const { bizId, objectId, oamId } = state.search
  const { data } = await getObjectOAMParamsListByOamId(bizId, objectId, oamId)
  state.loading = false
  state.dataList = data
  data.forEach((param: ObjectOAMParams) => {
    param.isEdit = false
  })
}

const paramsTableRef = ref()
const paramsTableKey = ref(0)

const logicalOperators = [
  {
    label: 'AND',
    value: 'AND',
  },
  {
    label: 'OR',
    value: 'OR',
  },
  {
    label: 'NOT',
    value: 'NOT',
  },
]

function onParamAdd() {
  state.dataList.push({
    bizId,
    objectId,
    oamId: state.search.oamId,
    paramId: 0,
    logicalOperator: 'AND',
    paramName: '', // 名称
    compareOperator: '=', // 代码
    paramValue: '',
    paramType: 0,
    paramRemark: '',
    isRuled: 0,
    ruleId: 0,
    sortNo: 0,
    isEdit: true,
  })
  state.actionType = 1
}

function onParamEdit(row: any) {
  row.isEdit = true
  state.actionType = 2
}

async function onParamDelete(row: any) {
  const { oamId } = state.search
  const paramId = row.paramId
  const { msg } = await deleteObjectOAMParamsById(bizId, objectId, oamId, paramId)
  ElMessage.success(msg)
  await getData()
}

function onParamCancel(row: any, index: number) {
  row.isEdit = false
  if (state.actionType === 1) {
    state.dataList.splice(index, 1)
  }
  state.actionType = 0
}

async function onParamSave(row: any) {
  row.isEdit = false
  if (state.actionType === 1) {
    const { msg } = await createObjectOAMParams(row)
    ElMessage.success(msg)
    state.dialogVisible = false
  }
  else {
    const { msg } = await updateObjectOAMParams(row)
    ElMessage.success(msg)
    state.dialogVisible = false
  }
  await getData()
}

onMounted(() => {
  nextTick(() => {
  })
})

defineExpose({
  showData(oamId: number) {
    state.search.oamId = oamId
    getData()
  },
})
</script>

<template>
  <div class="container">
    <tool-bar>
      <template #left>
        <h5>查询条件</h5>
      </template>
      <template #right>
        <el-input placeholder="请输入关键词筛选" clearable style="width: 200px;" />
        <el-button style="margin-left:10px" @click="getData">
          <template #icon>
            <el-icon>
              <svg-icon name="i-ep:search" />
            </el-icon>
          </template>
        </el-button>

        <el-button type="default" @click="onParamAdd">
          <template #icon>
            <el-icon>
              <svg-icon name="i-ep:plus" />
            </el-icon>
          </template>
        </el-button>
      </template>
    </tool-bar>

    <el-table ref="paramsTableRef" :key="paramsTableKey" :data="state.dataList" class="list-table" size="small" border stripe highlight-current-row>
      <el-table-column type="index" label="序号" header-align="center" align="center" width="60" />

      <el-table-column label="条件关系" header-align="center" align="center" width="100">
        <template #default="scope">
          <el-select v-if="scope.row.isEdit" v-model="scope.row.logicalOperator" placeholder="请选择">
            <el-option
              v-for="item in logicalOperators"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <span v-else>{{ scope.row.logicalOperator }}</span>
        </template>
      </el-table-column>

      <el-table-column label="参数名称" header-align="center" align="center" width="120">
        <template #default="scope">
          <el-input v-if="scope.row.isEdit" v-model="scope.row.paramName" size="small" />
          <span v-else>{{ scope.row.paramName }}</span>
        </template>
      </el-table-column>

      <el-table-column label="运算符" header-align="center" align="center" width="100">
        <template #default="scope">
          <el-input v-if="scope.row.isEdit" v-model="scope.row.compareOperator" size="small" />
          <span v-else>{{ scope.row.compareOperator }}</span>
        </template>
      </el-table-column>

      <el-table-column label="赋值代码" header-align="center" align="center">
        <template #default="scope">
          <el-input v-if="scope.row.isEdit" v-model="scope.row.paramValue" size="small" />
          <span v-else>{{ scope.row.paramValue }}</span>
        </template>
      </el-table-column>

      <el-table-column label="赋值规则" header-align="center" align="center">
        <template #default="scope">
          <RuleSelector v-if="scope.row.isEdit" v-model="scope.row.ruleId" size="small" />
          <span v-else>{{ scope.row.ruleTitle }}</span>
        </template>
      </el-table-column>

      <el-table-column label="类型" header-align="center" align="center" width="120">
        <template #default="scope">
          <data-type-selector v-if="scope.row.isEdit" v-model="scope.row.paramType" />
          <span v-else>{{ dataType(scope.row.paramType) }}</span>
        </template>
      </el-table-column>

      <el-table-column label="备注">
        <template #default="scope">
          <el-input v-if="scope.row.isEdit" v-model="scope.row.paramRemark" size="small" />
          <span v-else>{{ scope.row.paramRemark }}</span>
        </template>
      </el-table-column>

      <el-table-column header-align="center" align="center" width="70">
        <template #header>
          排序
        </template>
        <template #default>
          <el-tag type="info" class="sortable">
            <el-icon>
              <svg-icon name="i-ep:d-caret" />
            </el-icon>
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="140" align="center">
        <template #default="scope">
          <template v-if="scope.row.isEdit">
            <div>
              <el-button type="primary" plain size="small" @click="onParamSave(scope.row)">
                保存
              </el-button>
              <el-button type="primary" plain size="small" @click="onParamCancel(scope.row, scope.$index)">
                取消
              </el-button>
            </div>
          </template>
          <template v-else>
            <div>
              <el-button type="primary" plain size="small" @click="onParamEdit(scope.row)">
                编辑
              </el-button>
              <el-popconfirm title="是否要删除此行？" style="margin-left: 10px;" @confirm="onParamDelete(scope.row)">
                <template #reference>
                  <el-button type="danger" plain size="small">
                    删除
                  </el-button>
                </template>
              </el-popconfirm>
            </div>
          </template>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style lang="scss" scoped>
.container {
  margin-top: 10px;
}

.page-main {
  :deep(.el-table) {
    height: 100%;

    .el-table__row {
      .index {
        display: inline-block;
      }

      .delete {
        display: none;
      }

      &:hover {
        .index {
          display: none;
        }

        .delete {
          display: inline-block;
        }
      }
    }
  }

  h5{
    padding: 0;
    margin: 0;
  }
}
</style>