lift-drawing-pc/src/views/ModelManage/HandleDialog.vue

<script setup>
import RPC from '@/utils/rpc'
const props = defineProps({
  type: {
    type: String,
    required: true,
  },
  row: [Object],
})

const emit = defineEmits(['closed', 'onSuccess'])

const dialogVisible = ref(false)

const isAdd = computed(() => props.type === 'add')

onMounted(() => {
  dialogVisible.value = true
})

const formRef = ref(null)
const formField = ref({ enabled: true, params: [] })
const formRules = reactive({
  name: [{ required: true, message: '不可为空', trigger: 'change' }],
  code: [{ required: true, message: '不可为空', trigger: 'change' }],
})

const loading = ref(false)

function closed() {
  emit('closed')
}

const submitForm = async () => {
  await formRef.value.validate()
  const api = isAdd.value ? '/template/create' : '/template/update'
  const params = {
    ...formField.value,
    id: isAdd.value ? null : props.row.id,
  }
  loading.value = true
  RPC.post(api, params)
    .then((res) => {
      ElMessage.success('操作成功')
      emit('onSuccess')
      emit('closed')
    })
    .finally(() => {
      loading.value = false
    })
}

if (!isAdd.value) {
  formField.value = {
    ...props.row,
  }
}
const addRow = () => {
  if (formField.value.params) {
    formField.value.params.push({
      name: '',
      key: '',
      value: '',
      type: 'string',
      excel_loc: '',
      enabled: true,
    })
  } else {
    formField.value.params = [
      {
        name: '',
        key: '',
        value: '',
        type: 'string',
        excel_loc: '',
        enabled: true,
      },
    ]
  }
}
const delRow = (index) => {
  formField.value.params.splice(index, 1)
}
</script>

<template>
  <el-dialog
    align-center
    :title="isAdd ? '新增' : '修改'"
    width="80%"
    v-model="dialogVisible"
    @closed="closed"
    :close-on-click-modal="false"
  >
    <el-form
      ref="formRef"
      label-position="right"
      label-suffix=":"
      :model="formField"
      :rules="formRules"
      v-loading="loading"
      label-width="100"
    >
      <el-form-item prop="name" label="名称">
        <el-input placeholder="请输入" v-model="formField.name" />
      </el-form-item>
      <el-form-item prop="code" label="字段">
        <el-input placeholder="请输入" v-model="formField.code" />
      </el-form-item>
      <el-form-item prop="sheet_name" label="表格名称">
        <el-input placeholder="请输入" v-model="formField.sheet_name" />
      </el-form-item>
      <el-form-item prop="auto_path" label="路径">
        <el-input placeholder="请输入" v-model="formField.auto_path" />
      </el-form-item>
      <el-form-item prop="description" label="描述">
        <el-input placeholder="请输入" v-model="formField.description" />
      </el-form-item>
      <el-form-item prop="enabled" label="是否启用">
        <el-switch v-model="formField.enabled" active-text="启用" inactive-text="禁用" />
      </el-form-item>
      <el-form-item prop="params" label="表格参数">
        <el-button size="small" icon="Plus" type="primary" @click="addRow"> 添加 </el-button>
      </el-form-item>
      <el-table :data="formField.params" header-row-class-name="table-header">
        <el-table-column align="center" label="字段名称">
          <template #default="{ row }">
            <el-input placeholder="请输入" v-model="row.name" />
          </template>
        </el-table-column>
        <el-table-column align="center" label="字段键">
          <template #default="{ row }">
            <el-input placeholder="请输入" v-model="row.key" />
          </template>
        </el-table-column>
        <el-table-column align="center" label="字段值">
          <template #default="{ row }">
            <el-input placeholder="请输入" v-model="row.value" />
          </template>
        </el-table-column>
        <el-table-column align="center" label="字段类型">
          <template #default="{ row }">
            <el-select placeholder="请输入" v-model="row.type">
              <el-option value="string" label="字符串"></el-option>
              <el-option value="number" label="数字"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column align="center" label="字段位置">
          <template #default="{ row }">
            <el-input placeholder="请输入" v-model="row.excel_loc" />
          </template>
        </el-table-column>
        <el-table-column align="center" label="是否启用">
          <template #default="{ row }">
            <el-switch v-model="row.enabled" active-text="启用" inactive-text="禁用" />
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="60">
          <template #default="{ $index }">
            <el-button link type="danger" @click="delRow($index)"> 删除 </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- <el-form-item prop="类型" label="是否启用">
        <el-select placeholder="请输入" v-model="formField.type">
          <el-option :value="1" label="目录"></el-option>
          <el-option :value="2" label="菜单"></el-option>
          <el-option :value="3" label="按钮"></el-option>
        </el-select>
      </el-form-item> -->
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closed"> 取 消 </el-button>
        <el-button type="primary" :loading="loading" @click="submitForm"> 确 定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped></style>