|
|
@@ -0,0 +1,644 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
|
|
|
+ <el-form-item label="名称" prop="name">
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.name"
|
|
|
+ placeholder="请输入名称"
|
|
|
+ clearable
|
|
|
+ size="small"
|
|
|
+ @keyup.enter.native="handleQuery"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="状态" prop="status">
|
|
|
+ <el-select v-model="queryParams.status" placeholder="请选择状态" clearable size="small">
|
|
|
+ <el-option
|
|
|
+ v-for="item in statusOptions"
|
|
|
+ :key="item.dictValue"
|
|
|
+ :label="item.dictLabel"
|
|
|
+ :value="item.dictValue"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
|
|
+ <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <el-row :gutter="10" class="mb8">
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ plain
|
|
|
+ icon="el-icon-plus"
|
|
|
+ size="mini"
|
|
|
+ @click="handleAdd"
|
|
|
+ v-hasPermi="['his:newcomerQuestionnaire:add']"
|
|
|
+ >新增</el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button
|
|
|
+ type="success"
|
|
|
+ plain
|
|
|
+ icon="el-icon-edit"
|
|
|
+ size="mini"
|
|
|
+ :disabled="single"
|
|
|
+ @click="handleUpdate"
|
|
|
+ v-hasPermi="['his:newcomerQuestionnaire:edit']"
|
|
|
+ >修改</el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button
|
|
|
+ type="danger"
|
|
|
+ plain
|
|
|
+ icon="el-icon-delete"
|
|
|
+ size="mini"
|
|
|
+ :disabled="multiple"
|
|
|
+ @click="handleDelete"
|
|
|
+ v-hasPermi="['his:newcomerQuestionnaire:remove']"
|
|
|
+ >删除</el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button
|
|
|
+ type="info"
|
|
|
+ plain
|
|
|
+ icon="el-icon-view"
|
|
|
+ size="mini"
|
|
|
+ :loading="appActiveLoading"
|
|
|
+ @click="openAppActivePreview"
|
|
|
+ v-hasPermi="['his:newcomerQuestionnaire:query']"
|
|
|
+ >查看 App 当前问卷</el-button>
|
|
|
+ </el-col>
|
|
|
+ <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
|
|
|
+ <el-table-column type="selection" width="55" align="center" />
|
|
|
+ <el-table-column label="名称" align="center" prop="name" show-overflow-tooltip min-width="140" />
|
|
|
+ <el-table-column label="排序" align="center" prop="sortOrder" width="80" />
|
|
|
+ <el-table-column label="状态" align="center" prop="status" width="100">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <dict-tag :options="statusOptions" :value="scope.row.status" />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="创建时间" align="center" prop="createTime" width="168" />
|
|
|
+ <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="160">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-edit"
|
|
|
+ @click="handleUpdate(scope.row)"
|
|
|
+ v-hasPermi="['his:newcomerQuestionnaire:edit']"
|
|
|
+ >编辑</el-button>
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-delete"
|
|
|
+ @click="handleDelete(scope.row)"
|
|
|
+ v-hasPermi="['his:newcomerQuestionnaire:remove']"
|
|
|
+ >删除</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <pagination
|
|
|
+ v-show="total > 0"
|
|
|
+ :total="total"
|
|
|
+ :page.sync="queryParams.pageNum"
|
|
|
+ :limit.sync="queryParams.pageSize"
|
|
|
+ @pagination="getList"
|
|
|
+ />
|
|
|
+
|
|
|
+ <el-drawer
|
|
|
+ title="App 当前生效问卷"
|
|
|
+ :visible.sync="appActiveDrawer"
|
|
|
+ direction="rtl"
|
|
|
+ size="480px"
|
|
|
+ append-to-body
|
|
|
+ >
|
|
|
+ <div v-loading="appActiveLoading" class="app-active-drawer-body">
|
|
|
+ <template v-if="appActiveRecord">
|
|
|
+ <el-descriptions :column="1" border size="small" class="mb8">
|
|
|
+ <el-descriptions-item label="ID">{{ appActiveRecord.id }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="名称">{{ appActiveRecord.name || '—' }}</el-descriptions-item>
|
|
|
+ </el-descriptions>
|
|
|
+ <div class="json-preview-label">formSchema</div>
|
|
|
+ <pre class="json-preview-pre">{{ appActiveSchemaFormatted }}</pre>
|
|
|
+ </template>
|
|
|
+ <el-empty v-else description="当前无生效问卷（null）" :image-size="80"></el-empty>
|
|
|
+ </div>
|
|
|
+ </el-drawer>
|
|
|
+
|
|
|
+ <el-dialog :title="title" :visible.sync="open" width="960px" append-to-body top="5vh">
|
|
|
+ <el-form ref="form" :model="form" :rules="rules" label-width="96px">
|
|
|
+ <el-row :gutter="16">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="名称" prop="name">
|
|
|
+ <el-input v-model="form.name" placeholder="问卷名称" maxlength="64" show-word-limit />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="排序" prop="sortOrder">
|
|
|
+ <el-input-number v-model="form.sortOrder" :min="0" :precision="0" controls-position="right" style="width: 100%;" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-form-item label="状态" prop="status">
|
|
|
+ <el-radio-group v-model="form.status">
|
|
|
+ <el-radio
|
|
|
+ v-for="item in statusOptions"
|
|
|
+ :key="item.dictValue"
|
|
|
+ :label="parseInt(item.dictValue, 10)"
|
|
|
+ >{{ item.dictLabel }}</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="备注" prop="remark">
|
|
|
+ <el-input v-model="form.remark" type="textarea" :rows="2" placeholder="选填" maxlength="500" show-word-limit />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="表单定义" required>
|
|
|
+ <div class="schema-toolbar">
|
|
|
+ <el-button type="primary" plain size="mini" icon="el-icon-plus" @click="addField">新增题目</el-button>
|
|
|
+ </div>
|
|
|
+ <el-table :data="schemaModel.fields" border size="small" class="schema-designer-table">
|
|
|
+ <el-table-column label="#" type="index" width="46" align="center" />
|
|
|
+ <el-table-column label="key" min-width="110">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-input v-model="scope.row.key" size="mini" placeholder="英文标识" />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="类型" width="118">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-select v-model="scope.row.type" size="mini" style="width: 100%;" @change="onFieldTypeChange(scope.row)">
|
|
|
+ <el-option v-for="t in fieldTypes" :key="t.value" :label="t.label" :value="t.value" />
|
|
|
+ </el-select>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="题目标题" min-width="120">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-input v-model="scope.row.label" size="mini" placeholder="展示文案" />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="必填" width="72" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-switch v-model="scope.row.required" />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="选项" min-width="200">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div v-if="scope.row.type === 'radio' || scope.row.type === 'checkbox'" class="options-editor">
|
|
|
+ <div v-for="(opt, oi) in scope.row.options" :key="oi" class="option-row">
|
|
|
+ <el-input v-model="opt.label" size="mini" placeholder="展示文字" class="opt-inp" />
|
|
|
+ <el-input v-model="opt.value" size="mini" placeholder="提交值" class="opt-inp" />
|
|
|
+ <el-button type="text" size="mini" icon="el-icon-delete" @click="removeOption(scope.row, oi)" />
|
|
|
+ </div>
|
|
|
+ <el-button type="text" size="mini" icon="el-icon-plus" @click="addOption(scope.row)">添加选项</el-button>
|
|
|
+ </div>
|
|
|
+ <span v-else class="text-muted">—</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作" width="120" align="center" fixed="right">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button type="text" size="mini" :disabled="scope.$index === 0" @click="moveField(scope.$index, -1)">上移</el-button>
|
|
|
+ <el-button type="text" size="mini" :disabled="scope.$index === schemaModel.fields.length - 1" @click="moveField(scope.$index, 1)">下移</el-button>
|
|
|
+ <el-button type="text" size="mini" class="text-danger" @click="removeField(scope.$index)">删除</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button type="primary" @click="submitForm">确 定</el-button>
|
|
|
+ <el-button @click="cancel">取 消</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { js } from 'js-beautify'
|
|
|
+import {
|
|
|
+ listNewcomerQuestionnaire,
|
|
|
+ getNewcomerQuestionnaire,
|
|
|
+ delNewcomerQuestionnaire,
|
|
|
+ addNewcomerQuestionnaire,
|
|
|
+ updateNewcomerQuestionnaire,
|
|
|
+ getNewcomerQuestionnaireAppActive
|
|
|
+} from '@/api/his/newcomerQuestionnaire'
|
|
|
+
|
|
|
+const FIELD_TYPES = [
|
|
|
+ { label: '单选', value: 'radio' },
|
|
|
+ { label: '多选', value: 'checkbox' },
|
|
|
+ { label: '文本', value: 'text' },
|
|
|
+ { label: '数字', value: 'number' }
|
|
|
+]
|
|
|
+
|
|
|
+const ALLOWED_TYPES = ['radio', 'checkbox', 'text', 'number']
|
|
|
+
|
|
|
+function emptyField() {
|
|
|
+ return {
|
|
|
+ key: '',
|
|
|
+ type: 'text',
|
|
|
+ label: '',
|
|
|
+ required: false,
|
|
|
+ options: [{ label: '', value: '' }]
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+function cloneSchemaForModel(parsed) {
|
|
|
+ const fields = Array.isArray(parsed.fields) ? parsed.fields : []
|
|
|
+ return {
|
|
|
+ version: typeof parsed.version === 'number' ? parsed.version : 1,
|
|
|
+ fields: fields.map((f) => {
|
|
|
+ const type = ALLOWED_TYPES.includes(f.type) ? f.type : 'text'
|
|
|
+ const opts = Array.isArray(f.options) ? f.options.map((o) => ({
|
|
|
+ label: o.label != null ? String(o.label) : '',
|
|
|
+ value: o.value != null ? String(o.value) : ''
|
|
|
+ })) : [{ label: '', value: '' }]
|
|
|
+ return {
|
|
|
+ key: f.key != null ? String(f.key) : '',
|
|
|
+ type,
|
|
|
+ label: f.label != null ? String(f.label) : '',
|
|
|
+ required: !!f.required,
|
|
|
+ options: type === 'radio' || type === 'checkbox' ? opts : [{ label: '', value: '' }]
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'NewcomerQuestionnaire',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ loading: true,
|
|
|
+ ids: [],
|
|
|
+ single: true,
|
|
|
+ multiple: true,
|
|
|
+ showSearch: true,
|
|
|
+ total: 0,
|
|
|
+ dataList: [],
|
|
|
+ title: '',
|
|
|
+ open: false,
|
|
|
+ statusOptions: [
|
|
|
+ { dictLabel: '启用', dictValue: '1', listClass: 'success' },
|
|
|
+ { dictLabel: '停用', dictValue: '0', listClass: 'danger' }
|
|
|
+ ],
|
|
|
+ fieldTypes: FIELD_TYPES,
|
|
|
+ queryParams: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ name: null,
|
|
|
+ status: null
|
|
|
+ },
|
|
|
+ form: {},
|
|
|
+ rules: {
|
|
|
+ name: [
|
|
|
+ { required: true, message: '名称不能为空', trigger: 'blur' },
|
|
|
+ { max: 64, message: '名称长度不能超过64个字符', trigger: 'blur' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ schemaModel: { version: 1, fields: [] },
|
|
|
+ appActiveDrawer: false,
|
|
|
+ appActiveLoading: false,
|
|
|
+ appActiveRecord: null,
|
|
|
+ appActiveSchemaFormatted: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getList() {
|
|
|
+ this.loading = true
|
|
|
+ listNewcomerQuestionnaire(this.queryParams).then((response) => {
|
|
|
+ this.dataList = response.rows
|
|
|
+ this.total = response.total
|
|
|
+ this.loading = false
|
|
|
+ }).catch(() => {
|
|
|
+ this.loading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ defaultSchemaModel() {
|
|
|
+ return { version: 1, fields: [emptyField()] }
|
|
|
+ },
|
|
|
+ loadSchemaFromString(str) {
|
|
|
+ if (str == null || String(str).trim() === '') {
|
|
|
+ this.schemaModel = this.defaultSchemaModel()
|
|
|
+ return
|
|
|
+ }
|
|
|
+ try {
|
|
|
+ const parsed = JSON.parse(str)
|
|
|
+ this.schemaModel = cloneSchemaForModel(parsed)
|
|
|
+ if (!this.schemaModel.fields.length) {
|
|
|
+ this.schemaModel.fields = [emptyField()]
|
|
|
+ }
|
|
|
+ } catch (e) {
|
|
|
+ this.schemaModel = this.defaultSchemaModel()
|
|
|
+ this.$message.warning('formSchema 解析失败，已使用默认空模板')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ validateSchemaObject(obj) {
|
|
|
+ if (obj.version != null && typeof obj.version !== 'number') {
|
|
|
+ return 'version 须为数字，建议使用 1'
|
|
|
+ }
|
|
|
+ if (!Array.isArray(obj.fields)) {
|
|
|
+ return '缺少 fields 数组'
|
|
|
+ }
|
|
|
+ if (obj.fields.length < 1) {
|
|
|
+ return '请至少配置一道题目'
|
|
|
+ }
|
|
|
+ const keys = new Set()
|
|
|
+ for (let i = 0; i < obj.fields.length; i++) {
|
|
|
+ const f = obj.fields[i]
|
|
|
+ if (!f || typeof f !== 'object') {
|
|
|
+ return `第 ${i + 1} 题格式无效`
|
|
|
+ }
|
|
|
+ const key = f.key != null ? String(f.key).trim() : ''
|
|
|
+ if (!key) {
|
|
|
+ return `第 ${i + 1} 题的 key 不能为空`
|
|
|
+ }
|
|
|
+ if (!/^[a-zA-Z][a-zA-Z0-9_]*$/.test(key)) {
|
|
|
+ return `第 ${i + 1} 题的 key「${key}」须为英文标识（字母开头，仅字母数字下划线）`
|
|
|
+ }
|
|
|
+ if (keys.has(key)) {
|
|
|
+ return `key「${key}」重复，请保证同卷内唯一`
|
|
|
+ }
|
|
|
+ keys.add(key)
|
|
|
+ if (!ALLOWED_TYPES.includes(f.type)) {
|
|
|
+ return `第 ${i + 1} 题的 type 无效，仅支持：radio、checkbox、text、number`
|
|
|
+ }
|
|
|
+ const label = f.label != null ? String(f.label).trim() : ''
|
|
|
+ if (!label) {
|
|
|
+ return `第 ${i + 1} 题的题目标题（label）不能为空`
|
|
|
+ }
|
|
|
+ if (f.type === 'radio' || f.type === 'checkbox') {
|
|
|
+ if (!Array.isArray(f.options) || f.options.length < 1) {
|
|
|
+ return `第 ${i + 1} 题为 ${f.type}，须至少配置 1 个选项`
|
|
|
+ }
|
|
|
+ for (let j = 0; j < f.options.length; j++) {
|
|
|
+ const o = f.options[j]
|
|
|
+ if (!o || typeof o !== 'object') {
|
|
|
+ return `第 ${i + 1} 题第 ${j + 1} 个选项格式无效`
|
|
|
+ }
|
|
|
+ const ov = o.value != null ? String(o.value).trim() : ''
|
|
|
+ if (!ov) {
|
|
|
+ return `第 ${i + 1} 题第 ${j + 1} 个选项的 value 不能为空`
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return null
|
|
|
+ },
|
|
|
+ validateSchemaModel() {
|
|
|
+ const payload = this.buildSchemaPayloadObject()
|
|
|
+ return this.validateSchemaObject(payload)
|
|
|
+ },
|
|
|
+ buildSchemaPayloadObject() {
|
|
|
+ const ver = typeof this.schemaModel.version === 'number' ? this.schemaModel.version : 1
|
|
|
+ const fields = (this.schemaModel.fields || []).map((f) => {
|
|
|
+ const key = (f.key || '').trim()
|
|
|
+ const label = (f.label || '').trim()
|
|
|
+ const base = {
|
|
|
+ key,
|
|
|
+ type: f.type,
|
|
|
+ label,
|
|
|
+ required: !!f.required
|
|
|
+ }
|
|
|
+ if (f.type === 'radio' || f.type === 'checkbox') {
|
|
|
+ const opts = (f.options || []).map((o) => ({
|
|
|
+ label: o.label != null ? String(o.label) : '',
|
|
|
+ value: o.value != null ? String(o.value) : ''
|
|
|
+ }))
|
|
|
+ base.options = opts
|
|
|
+ }
|
|
|
+ return base
|
|
|
+ })
|
|
|
+ return { version: ver, fields }
|
|
|
+ },
|
|
|
+ buildFormSchemaString() {
|
|
|
+ return JSON.stringify(this.buildSchemaPayloadObject())
|
|
|
+ },
|
|
|
+ addField() {
|
|
|
+ this.schemaModel.fields.push(emptyField())
|
|
|
+ },
|
|
|
+ removeField(index) {
|
|
|
+ this.schemaModel.fields.splice(index, 1)
|
|
|
+ if (!this.schemaModel.fields.length) {
|
|
|
+ this.schemaModel.fields.push(emptyField())
|
|
|
+ }
|
|
|
+ },
|
|
|
+ moveField(index, delta) {
|
|
|
+ const arr = this.schemaModel.fields
|
|
|
+ const ni = index + delta
|
|
|
+ if (ni < 0 || ni >= arr.length) return
|
|
|
+ const t = arr[index]
|
|
|
+ this.$set(arr, index, arr[ni])
|
|
|
+ this.$set(arr, ni, t)
|
|
|
+ },
|
|
|
+ onFieldTypeChange(row) {
|
|
|
+ if (row.type === 'radio' || row.type === 'checkbox') {
|
|
|
+ if (!row.options || !row.options.length) {
|
|
|
+ this.$set(row, 'options', [{ label: '', value: '' }])
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ addOption(row) {
|
|
|
+ if (!row.options) {
|
|
|
+ this.$set(row, 'options', [])
|
|
|
+ }
|
|
|
+ row.options.push({ label: '', value: '' })
|
|
|
+ },
|
|
|
+ removeOption(row, oi) {
|
|
|
+ row.options.splice(oi, 1)
|
|
|
+ if (!row.options.length) {
|
|
|
+ row.options.push({ label: '', value: '' })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ cancel() {
|
|
|
+ this.open = false
|
|
|
+ this.reset()
|
|
|
+ },
|
|
|
+ reset() {
|
|
|
+ this.form = {
|
|
|
+ id: null,
|
|
|
+ name: null,
|
|
|
+ sortOrder: 0,
|
|
|
+ status: 1,
|
|
|
+ remark: null,
|
|
|
+ formSchema: null
|
|
|
+ }
|
|
|
+ this.schemaModel = this.defaultSchemaModel()
|
|
|
+ this.resetForm('form')
|
|
|
+ },
|
|
|
+ handleQuery() {
|
|
|
+ this.queryParams.pageNum = 1
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ resetQuery() {
|
|
|
+ this.resetForm('queryForm')
|
|
|
+ this.handleQuery()
|
|
|
+ },
|
|
|
+ handleSelectionChange(selection) {
|
|
|
+ this.ids = selection.map((item) => item.id)
|
|
|
+ this.single = selection.length !== 1
|
|
|
+ this.multiple = !selection.length
|
|
|
+ },
|
|
|
+ handleAdd() {
|
|
|
+ this.reset()
|
|
|
+ this.open = true
|
|
|
+ this.title = '新增新人问卷调查'
|
|
|
+ },
|
|
|
+ handleUpdate(row) {
|
|
|
+ this.reset()
|
|
|
+ const id = row.id || this.ids
|
|
|
+ getNewcomerQuestionnaire(id).then((response) => {
|
|
|
+ const d = response.data || {}
|
|
|
+ this.form = {
|
|
|
+ id: d.id,
|
|
|
+ name: d.name,
|
|
|
+ sortOrder: d.sortOrder != null ? d.sortOrder : 0,
|
|
|
+ status: d.status != null ? Number(d.status) : 1,
|
|
|
+ remark: d.remark,
|
|
|
+ formSchema: d.formSchema
|
|
|
+ }
|
|
|
+ this.loadSchemaFromString(d.formSchema)
|
|
|
+ this.open = true
|
|
|
+ this.title = '修改新人问卷调查'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ submitForm() {
|
|
|
+ const schemaErr = this.validateSchemaModel()
|
|
|
+ if (schemaErr) {
|
|
|
+ this.$message.error(schemaErr)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ let formSchemaStr
|
|
|
+ try {
|
|
|
+ formSchemaStr = this.buildFormSchemaString()
|
|
|
+ JSON.parse(formSchemaStr)
|
|
|
+ } catch (e) {
|
|
|
+ this.$message.error('formSchema 序列化失败')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.$refs['form'].validate((valid) => {
|
|
|
+ if (!valid) return
|
|
|
+ const body = {
|
|
|
+ id: this.form.id,
|
|
|
+ name: this.form.name,
|
|
|
+ sortOrder: this.form.sortOrder != null ? this.form.sortOrder : 0,
|
|
|
+ status: this.form.status != null ? this.form.status : 1,
|
|
|
+ remark: this.form.remark,
|
|
|
+ formSchema: formSchemaStr
|
|
|
+ }
|
|
|
+ if (this.form.id != null) {
|
|
|
+ updateNewcomerQuestionnaire(body).then(() => {
|
|
|
+ this.msgSuccess('修改成功')
|
|
|
+ this.open = false
|
|
|
+ this.getList()
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ addNewcomerQuestionnaire({
|
|
|
+ name: body.name,
|
|
|
+ sortOrder: body.sortOrder,
|
|
|
+ status: body.status,
|
|
|
+ remark: body.remark,
|
|
|
+ formSchema: body.formSchema
|
|
|
+ }).then(() => {
|
|
|
+ this.msgSuccess('新增成功')
|
|
|
+ this.open = false
|
|
|
+ this.getList()
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleDelete(row) {
|
|
|
+ const ids = row.id || this.ids
|
|
|
+ this.$confirm('是否确认删除新人问卷调查编号为"' + ids + '"的数据项?', '警告', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => delNewcomerQuestionnaire(ids)).then(() => {
|
|
|
+ this.getList()
|
|
|
+ this.msgSuccess('删除成功')
|
|
|
+ }).catch(() => {})
|
|
|
+ },
|
|
|
+ openAppActivePreview() {
|
|
|
+ this.appActiveDrawer = true
|
|
|
+ this.appActiveRecord = null
|
|
|
+ this.appActiveSchemaFormatted = ''
|
|
|
+ this.appActiveLoading = true
|
|
|
+ getNewcomerQuestionnaireAppActive().then((res) => {
|
|
|
+ const d = res.data
|
|
|
+ this.appActiveRecord = d
|
|
|
+ if (d && d.formSchema != null) {
|
|
|
+ try {
|
|
|
+ const parsed = typeof d.formSchema === 'string' ? JSON.parse(d.formSchema) : d.formSchema
|
|
|
+ this.appActiveSchemaFormatted = js(JSON.stringify(parsed), { indent_size: 2, space_in_empty_paren: true })
|
|
|
+ } catch (e) {
|
|
|
+ this.appActiveSchemaFormatted = String(d.formSchema)
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.appActiveSchemaFormatted = ''
|
|
|
+ }
|
|
|
+ this.appActiveLoading = false
|
|
|
+ }).catch(() => {
|
|
|
+ this.appActiveLoading = false
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.schema-toolbar {
|
|
|
+ margin-bottom: 8px;
|
|
|
+}
|
|
|
+.schema-designer-table {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+.options-editor {
|
|
|
+ padding: 4px 0;
|
|
|
+}
|
|
|
+.option-row {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 6px;
|
|
|
+ margin-bottom: 6px;
|
|
|
+}
|
|
|
+.option-row .opt-inp {
|
|
|
+ flex: 1;
|
|
|
+ min-width: 0;
|
|
|
+}
|
|
|
+.text-muted {
|
|
|
+ color: #909399;
|
|
|
+ font-size: 12px;
|
|
|
+}
|
|
|
+.text-danger {
|
|
|
+ color: #f56c6c;
|
|
|
+}
|
|
|
+.app-active-drawer-body {
|
|
|
+ padding: 0 16px 16px;
|
|
|
+ min-height: 120px;
|
|
|
+}
|
|
|
+.json-preview-label {
|
|
|
+ font-size: 13px;
|
|
|
+ color: #606266;
|
|
|
+ margin-bottom: 6px;
|
|
|
+}
|
|
|
+.json-preview-pre {
|
|
|
+ margin: 0;
|
|
|
+ padding: 12px;
|
|
|
+ background: #f5f7fa;
|
|
|
+ border-radius: 4px;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 1.5;
|
|
|
+ white-space: pre-wrap;
|
|
|
+ word-break: break-all;
|
|
|
+ max-height: calc(100vh - 220px);
|
|
|
+ overflow: auto;
|
|
|
+}
|
|
|
+.mb8 {
|
|
|
+ margin-bottom: 8px;
|
|
|
+}
|
|
|
+</style>
|
