smart-search-web/src/views/manage/theme/relation-column.vue

<template>
  <CusDialog
    :show="show"
    title="数据构成-配置列"
    @onClose="$emit('update:show', false)"
    @onSubmit="onSubmit"
    width="70%"
    max-height="80%"
    :loading="state.loading"
  >
<!--    <template #foot>-->
<!--      <div class="__cus-dialog-foot_cancel __hover" @click="onReset">重置默认</div>-->
<!--    </template>-->
    <div class="__cus-manage_content">
      <div class="__cus-manage_content-main" v-loading="state.query.loading">
        <CusTable
          v-model:data="state.query.result.data"
          :table-head="state.query.tableHead"
          :no-page="true"
          :dragable="true"
        >
          <template #sort-column-value="{scope}">
            {{scope.$index + 1}}
          </template>
          <template #isShow-column-value="{scope}">
            <el-switch
              v-model="scope.row.isShow"
              active-value="1"
              inactive-value="0"
            />
          </template>
          <template #isShow-header-value="{scope}">
            展示
            <el-switch
              v-model="state.showAll"
              @change="(val) => state.query.result.data.forEach(v => v.isShow = val ? '1' : '0')"
            />
          </template>
        </CusTable>
      </div>
    </div>
  </CusDialog>
</template>

<script setup lang="ts">
import {computed, getCurrentInstance, nextTick, reactive, ref, watch} from "vue";
import {useDictionaryStore} from "@/stores";
import {ElMessage, ElMessageBox} from "element-plus";
import {
  sysThemeIndexFindAll,
  sysThemeIndexGetIndexFields,
  sysThemeIndexSaveIndexFields
} from "@/api/modules/manage/theme";
import {sysIndexFieldList} from "@/api/modules/manage";

const emit = defineEmits(['update:show', 'refresh'])
const {proxy} = getCurrentInstance()
const DictionaryStore = useDictionaryStore()
const props = defineProps({
  show: {default: false},
  transfer: {}
 })
const state: any = reactive({
  showAll: false,
  loading: false,
  query: {
    loading: false,
    tableHead: [
      {value: "fieldName", label: "列名称"},
      {value: "fieldKey", label: "列英文名称"},
      {value: "sort", label: "排序"},
      {value: "isShow", label: "展示"},
    ],
    result: {
      data: []
    }
  },
})
const initRelation = () => {
  state.query.loading = true
  sysThemeIndexGetIndexFields(proxy.$util.formatGetParam({
    themeId: props.transfer.themeId,
    indexId: props.transfer.indexId,
    type: props.transfer.type,
  })).then(res => {
    state.query.result.data = res.data || []
    state.query.loading = false
  })
}
const onSubmit = () => {
  ElMessageBox.confirm("是否提交?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  } as any).then(() => {
    const arr = state.query.result.data.map((v, i) => {
      v.sort = i
      return v
    })
    state.loading = true
    sysThemeIndexSaveIndexFields(arr).then(res => {
      ElMessage.success('保存成功！')
      state.loading = false
    }).catch(() => {
      state.loading = false
    })
  }).catch(() => {})
}
const isAllCpt = computed(() => {
  return state.query.result.data.every(v => v.isShow == '1')
})
watch(() => isAllCpt.value, (n) => {
  state.showAll = n
})
watch(() => props.show, (n) => {
  if (n) {
    initRelation()
  }
})
const initDictionary = () => {
}
</script>

<style lang="scss" scoped>
.__cus-manage_content {
  margin-bottom: 0;
  height: calc(100% - 24px);
}
</style>