若依代码生成 查看组件信息 (点击弹出新vue的表格)

   <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          size="mini"
          @click="changeIllegalActivitiesIsShow"
        >查看组件信息</el-button>
      </el-col>


   changeIllegalActivitiesIsShow() {
      this.$refs.illegalActivitiesSelect.open();
    },




    <IllegalActivitiesSelect ref="illegalActivitiesSelect" :value="illegalActivitiesObj"
                             @change="fieldPappingProcessing"/>

  </div>

</template>


   illegalActivitiesObj:{
        name: null,
        mobile: null,
        address: null,
        certNo: null
      },



  methods: {
    open() {
      if (this.dataList.length === 0){
        this.getList();
      }
      this.visible = true;
    },
    //字段映射处理
    fieldPappingProcessing(obj, isErr = true) {
      console.log("333", obj, isErr)
      //获取字段映射
      let fieldMapStr = this.operationField.fieldMap;
      let fieldMap = JSON.parse(fieldMapStr);

      //fieldMap没有映射则提示
      if (fieldMap == null || fieldMap.length === 0) {
        if (isErr) {
          this.$modal.msgError(this.operationField.itemName + "未配置字段映射,请联系管理员！");
        }
        return;
      }
      for (let fieldMapKey in fieldMap) {
        if (obj[fieldMapKey] != null) {
          this.obj[fieldMap[fieldMapKey]].value = obj[fieldMapKey];
        }
      }

      console.log("已选中", obj, this.obj)
    },
    /** 查询违法事项库列表 */
    getList() {
      this.loading = true;
      listIllegalActivities(this.queryParams).then(response => {
        this.illegalActivitiesList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },

完整参考代码

<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="违法事项" prop="illegalActivities">
        <el-input
          v-model="queryParams.illegalActivities"
          placeholder="请输入违法事项"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </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="['enforceLaw:illegalActivities: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="['enforceLaw:illegalActivities: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="['enforceLaw:illegalActivities:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          size="mini"
          @click="changeIllegalActivitiesIsShow"
        >查看组件信息</el-button>
      </el-col>


      <el-col :span="1.5">
        <el-button type="info" plain icon="el-icon-upload2" size="mini" @click="handleImport"
                   v-hasPermi="['enforceLaw:illegalActivities:import']">导入
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['enforceLaw:illegalActivities:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <div style="overflow-x: auto;">
    <el-table v-loading="loading" :data="illegalActivitiesList" @selection-change="handleSelectionChange"
              @cell-click="openView"  :cell-style="columnColorStyle" border :default-sort = "{prop: 'registrationDate', order: 'descending'}"
              style="width: 100%; overflow-x: scroll;">
      <el-table-column type="selection" width="55" align="center" />
<!--      <el-table-column label="序号" align="center" prop="id" width="55"/>-->
      <el-table-column label="违法事项" align="center" prop="illegalActivities" width="220" show-overflow-tooltip/>
      <el-table-column label="违反条款" align="center" prop="terms" width="260" show-overflow-tooltip/>
      <el-table-column label="违反条款内容" align="center" prop="termsContent" width="300" show-overflow-tooltip/>
      <el-table-column label="处罚依据" align="center" prop="according" width="300" show-overflow-tooltip/>
      <el-table-column label="处罚依据内容" align="center" prop="accordingContent" width="330" show-overflow-tooltip/>
      <el-table-column label="处罚类型" align="center" prop="penalty" width="220" show-overflow-tooltip/>
      <el-table-column label="改正内容" align="center" prop="correction" width="220" show-overflow-tooltip/>
      <el-table-column label="处罚内容(主要指“拒不改正”)" align="center" width="220" prop="penaltyContent" show-overflow-tooltip/>
      <el-table-column label="是否简案快办" align="center" prop="ifSimple"  show-overflow-tooltip>
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_yes_no" :value="scope.row.ifSimple"/>
        </template>
      </el-table-column>
      <el-table-column label="现场需要核实内容" align="center" prop="verify" width="300" show-overflow-tooltip/>
      <el-table-column label="调取证据种类" align="center" prop="evidenceRetrieved" width="300" show-overflow-tooltip/>
      <el-table-column label="裁量建议" align="center" prop="advise" width="300" show-overflow-tooltip/>
      <el-table-column label="裁量情形" align="center" prop="situation" width="300" show-overflow-tooltip/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['enforceLaw:illegalActivities:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['enforceLaw:illegalActivities:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    </div>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改违法事项库对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="900px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
    <el-row>
    <el-col :span="12">
        <el-form-item label="违法事项" prop="illegalActivities">
          <el-input v-model="form.illegalActivities" placeholder="请输入违法事项" />
        </el-form-item>
    </el-col>
</el-row>
<el-row>
        <el-form-item label="违反条款" prop="terms">
          <el-input v-model="form.terms" type="textarea" placeholder="请输入内容" :autosize="{ minRows: 5, maxRows: 8}"/>
        </el-form-item>
</el-row>
        <el-row>
          <el-form-item label="违反条款内容" prop="termsContent">
            <el-input v-model="form.termsContent" type="textarea" placeholder="请输入内容" :autosize="{ minRows: 5, maxRows: 8}"/>
          </el-form-item>
        </el-row>
    <el-row>
        <el-form-item label="处罚依据" prop="according">
          <el-input v-model="form.according" type="textarea" placeholder="请输入内容" :autosize="{ minRows: 5, maxRows: 8}"/>
        </el-form-item>
</el-row>
        <el-row>
          <el-form-item label="处罚依据内容" prop="accordingContent">
            <el-input v-model="form.accordingContent" type="textarea" placeholder="请输入内容" :autosize="{ minRows: 5, maxRows: 8}"/>
          </el-form-item>
        </el-row>

    <el-row>
        <el-form-item label="处罚类型" prop="penalty">
          <el-input v-model="form.penalty" type="textarea" placeholder="请输入内容" autosize/>
        </el-form-item>
</el-row>
    <el-row>
        <el-form-item label="改正内容" prop="correction">
          <el-input v-model="form.correction" type="textarea" placeholder="请输入内容" autosize/>
        </el-form-item>
</el-row>
    <el-row>
        <el-form-item label="处罚内容(主要指“拒不改正”)" prop="penaltyContent">
          <el-input v-model="form.penaltyContent" type="textarea" placeholder="请输入内容"  :autosize="{ minRows: 5, maxRows: 8}"/>
        </el-form-item>
</el-row>
    <el-row>
  <el-col :span="12">
        <el-form-item label="是否简案快办">
          <el-radio-group v-model="form.ifSimple">
            <el-radio
              v-for="dict in dict.type.sys_yes_no"
              :key="dict.value"
:label="dict.value"
            >{{dict.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
  </el-col>
</el-row>
<el-row>
        <el-form-item label="现场需要核实内容" prop="verify">
          <el-input v-model="form.verify" type="textarea" placeholder="请输入内容" :autosize="{ minRows: 5, maxRows: 8}"/>
        </el-form-item>
</el-row>

        <el-row>
          <el-form-item label="调取证据种类" prop="evidenceRetrieved">
            <el-input v-model="form.evidenceRetrieved" type="textarea" placeholder="请输入内容" :autosize="{ minRows: 5, maxRows: 8}"/>
          </el-form-item>
        </el-row>

    <el-row>
        <el-form-item label="裁量建议" prop="advise">
          <el-input v-model="form.advise" type="textarea" placeholder="请输入内容" :autosize="{ minRows: 5, maxRows: 8}"/>
        </el-form-item>
</el-row>

        <el-row>
          <el-form-item label="裁量情形" prop="situation">
            <el-input v-model="form.situation" type="textarea" placeholder="请输入内容" :autosize="{ minRows: 5, maxRows: 8}"/>
          </el-form-item>
        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" v-show="subIsShow" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 用户导入对话框 -->
    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
      <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
                 :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading"
                 :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">

          <span>仅允许导入xls、xlsx格式文件。</span>
          <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;"
                   @click="importTemplate">下载用户导入模板
          </el-link>
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 违法事项选择组件   -->
    <IllegalActivitiesSelect ref="illegalActivitiesSelect" :value="illegalActivitiesObj"
                             @change="fieldPappingProcessing"/>

  </div>

</template>

<script>
import { listIllegalActivities, getIllegalActivities, delIllegalActivities, addIllegalActivities, updateIllegalActivities} from "@/api/enforceLaw/illegalActivities";
import {getToken} from "@/utils/auth";
import IllegalActivitiesSelect from "@/components/Base/IllegalActivitiesSelect/index.vue";
export default {
  name: "IllegalActivities",
  components: {IllegalActivitiesSelect},
  dicts: ['sys_yes_no'],
  data() {
    return {
      //提交按钮是否显示
      subIsShow:true,
      //查看数据列名称
      cellClickName:"illegalActivities",
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 违法事项库表格数据
      illegalActivitiesList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        illegalActivities: null,
        terms: null,
        according: null,
      },
      illegalActivitiesObj:{
        name: null,
        mobile: null,
        address: null,
        certNo: null
      },
      // 用户导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: {Authorization: "Bearer " + getToken()},
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "enforceLaw/illegalActivities/import"
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        illegalActivities: [
          { required: true, message: "违法事项不能为空", trigger: "blur" }
        ],
        terms: [
          { required: true, message: "违反条款不能为空", trigger: "blur" }
        ],
        termsContent: [
          { required: true, message: "违反条款内容不能为空", trigger: "blur" }
        ],
        according: [
          { required: true, message: "处罚依据不能为空", trigger: "blur" }
        ],
        accordingContent: [
          { required: true, message: "处罚依据内容不能为空", trigger: "blur" }
        ],


        createBy: [
          { required: true, message: "创建人不能为空", trigger: "blur" }
        ],
        createTime: [
          { required: true, message: "创建时间不能为空", trigger: "blur" }
        ],
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    open() {
      if (this.dataList.length === 0){
        this.getList();
      }
      this.visible = true;
    },
    //字段映射处理
    fieldPappingProcessing(obj, isErr = true) {
      console.log("333", obj, isErr)
      //获取字段映射
      let fieldMapStr = this.operationField.fieldMap;
      let fieldMap = JSON.parse(fieldMapStr);

      //fieldMap没有映射则提示
      if (fieldMap == null || fieldMap.length === 0) {
        if (isErr) {
          this.$modal.msgError(this.operationField.itemName + "未配置字段映射,请联系管理员！");
        }
        return;
      }
      for (let fieldMapKey in fieldMap) {
        if (obj[fieldMapKey] != null) {
          this.obj[fieldMap[fieldMapKey]].value = obj[fieldMapKey];
        }
      }

      console.log("已选中", obj, this.obj)
    },
    /** 查询违法事项库列表 */
    getList() {
      this.loading = true;
      listIllegalActivities(this.queryParams).then(response => {
        this.illegalActivitiesList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },

    // 表单重置
    reset() {
      this.form = {
        id: null,
        illegalActivities: null,
        terms: null,
        termsContent:null,
        according: null,
        accordingContent:null,
        penalty: null,
        correction: null,
        penaltyContent: null,
        ifSimple: "0",
        verify: null,
        evidenceRetrieved:null,
        advise: null,
        situation:null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null
      };
      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 = "添加违法事项库";
      this.subIsShow=true;
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getIllegalActivities(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改违法事项库";
        this.subIsShow=true;
      });
    },
    /**查看列表信息*/
    openView(row, column, cell, event){
      if (column.property===this.cellClickName){
      this.reset();
      const id = row.id || this.ids
      getIllegalActivities(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "查看违法事项库";
        this.subIsShow=false;
      });
      }
    },
    columnColorStyle({ row, column, rowIndex, columnIndex }) {
      if (column.property===this.cellClickName) {
        //点击查看的列设置为蓝色
        return 'color:#409EFF; cursor:pointer;'
      }
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateIllegalActivities(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addIllegalActivities(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    //显示违法事项选择组件
    changeIllegalActivitiesIsShow() {
      this.$refs.illegalActivitiesSelect.open();
    },

    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除违法事项库编号为"' + ids + '"的数据项？').then(function() {
        return delIllegalActivities(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导入按钮操作 */
    handleImport() {
      this.upload.title = "用户导入";
      this.upload.open = true;
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", {dangerouslyUseHTMLString: true});
      this.getList();
    },

    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    },
    initUserName() {
      this.form.userName = this.form.phonenumber;
    },
    openWork(item) {
      this.dialogVisible = true
      this.workUserId = item.userId
    },
    /** 下载模板操作 */
    importTemplate() {
      this.download('enforceLaw/illegalActivities/importTemplateActivities', {}, `用户数据导入模版_${new Date().getTime()}.xlsx`)
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('enforceLaw/illegalActivities/export', {
        ...this.queryParams
      }, `illegalActivities_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>

<template>
  <el-dialog title="违法事项选择" :visible.sync="visible" width="700" @close="close" append-to-body>
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
      <el-form-item label="违法事项" prop="userName">
        <el-input v-model="queryParams.illegalActivities" placeholder="请输入违法事项" clearable/>
      </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-table v-loading="loading" :data="dataList" border>
      <el-table-column label="违法事项ID" align="center" prop="id" width="110" v-if="false"/>
      <el-table-column label="违法事项" align="center" prop="illegalActivities" />
      <el-table-column label="违反条款" align="center" prop="terms" />
      <el-table-column label="处罚依据" align="center" prop="according" />
      <el-table-column label="处罚类型" align="center" prop="penalty" />
      <el-table-column align="center" fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="select(scope.row)" type="text" size="small">选择</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-dialog>
</template>

<script>
import { listIllegalActivities } from "@/api/enforceLaw/illegalActivities";
/*违法事项选择组件*/
export default {
  name: "IllegalActivitiesSelect",
  props: {
    //用户信息
    value: [Object],
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      //可选项列表
      dataList: [],
      //是否显示
      visible: false,
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        //违法事项
        illegalActivities: null,
      },
    }
  },
  watch: {
    value: {
      handler(val) {
        if (val) {
          return val;
        } else {
          return {};
        }
      },
      deep: true,
      immediate: true
    },
  },
  created() {
  },
  methods: {
    open() {
      if (this.dataList.length === 0){
        this.getList();
      }
      this.visible = true;
    },
    /** 查询售后工单信息列表 */
    getList() {
      this.loading = true;
      listIllegalActivities(this.queryParams).then(response => {
        this.dataList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 选中用户 */
    select(row) {
      console.log(row);
      this.$emit("input", row);
      this.$emit("change", row);
      this.close();
    },
    /** 关闭 */
    close() {
      this.visible = false;
    },
  }
}
</script>

<style scoped>

</style>

<template>
  <div>
    <!-- 获取文书号弹窗 -->
    <el-dialog title="点击选择文书号" :visible.sync="showDocNumList" append-to-body width="500px">
      <div class="docNumItem" v-for="(docNumItem, docNumIndex) in docNumList" :key="docNumIndex"
           @click="selectDocNum(docNumItem.docNum, docNumItem.id)">
        {{ docNumItem.docNum || "" }}
      </div>
    </el-dialog>
    <el-form>
      <el-row style="box-sizing: border-box; padding-left: 20px">
        <el-col :span="24" v-for="(item, key, index) in obj" :key="index">
          <el-form-item :label="item.itemComment || ''" :required="(item.type == 'text' && item.autoType == '1') ||
            item.isRequired == 'Y'
            " v-if="judgeExpression(item.display, obj)">
            <!-- 日期选择 -->
            <el-date-picker v-if="item.type == 'date'" v-model="obj[key].value" type="date" :placeholder="`请选择`+item.itemComment"
                            :disabled="isDisabled(item)" value-format="yyyy-MM-dd">
            </el-date-picker>
            <!-- 日期时间选择 -->
            <el-date-picker v-if="item.type == 'dateTime'" v-model="obj[key].value" type="datetime" :placeholder="`请选择`+item.itemComment"
                            width="100%"
                            :disabled="isDisabled(item)" value-format="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm">
            </el-date-picker>
            <!-- 单选 -->
            <el-radio-group v-model="obj[key].value" v-if="item.type == 'radio'" :disabled="isDisabled(item)"
                            style="width: 100%;">
              <div v-for="(optionItem, optionIndex) in item.rangeList"
                   :style="optionIndex != item.rangeList.length - 1 ? 'marginBottom:12px' : ''" :key="optionIndex">
                <el-radio :label="optionItem.value">{{ optionItem.name }}</el-radio>
              </div>
            </el-radio-group>
            <!-- 输入框-取文号 -->
            <div style="position: relative" v-else-if="item.type === 'text' && item.autoType === '1'">
              <el-input v-model="obj[key].valueStr" readonly :placeholder="`点击右侧按钮获取`+item.itemComment" :maxlength="item.max"
                        clearable></el-input>
              <el-button style="height: 36px" type="primary" class="getDocNumBtn"
                         @click.stop="getDocNumNumber(item.columnName, key)" v-if="processType === 20">获取文书号
              </el-button>
            </div>
            <!-- 文本输入框 -->
            <el-input v-else-if="item.type === 'text'" v-model="obj[key].value" :disabled="isDisabled(item)"
                      :placeholder="`请输入`+item.itemComment" :maxlength="item.max" clearable></el-input>
            <!-- 数字输入框 -->
            <el-input v-else-if="item.type === 'number'" type="number" v-model="obj[key].value"
                      :disabled="isDisabled(item)" :placeholder="`请输入`+item.itemComment" :maxlength="item.max" clearable></el-input>
            <!-- 多行文本 -->
            <el-input v-else-if="item.type === 'textarea'" type="textarea" :disabled="isDisabled(item)" autosize
                      v-model="obj[key].value" :placeholder="`请输入`+item.itemComment" :rows="4" :maxlength="item.max"></el-input>
            <!-- 下拉框 -->
            <el-select v-else-if="item.type === 'select'" filterable v-model="obj[key].value"
                       :disabled="isDisabled(item)"
                       :placeholder="`请选择`+item.itemComment">
              <el-option v-for="(optionItem, optionIndex) in item.rangeList" :key="optionIndex" :label="optionItem.name"
                         :value="optionItem.value">
              </el-option>
            </el-select>
            <!-- 多选框 -->
            <el-select v-else-if="item.type === 'multiSelect'" v-model="obj[key].value" :disabled="isDisabled(item)" multiple :placeholder="`请选择`+item.itemComment">
              <el-option v-for="(optionItem, optionIndex) in item.rangeList" :key="optionIndex" :label="optionItem.name"
                         :value="optionItem.value">
              </el-option>
            </el-select>
            <!-- 用户 -->
            <!-- <treeselect v-else-if="item.type === 'user'||item.type=='userSelectSign'" v-model="obj[key].value" :disabled="isDisabled(item)"
              :defaultExpandLevel="1" :options="deptOptions" :show-count="true" placeholder="请选择" /> -->
            <!-- 附件上传 -->
            <file-upload v-else-if="item.type === 'file'" v-model="obj[key].value"/>
            <!-- 部门人员多选 -->
            <span
              v-else-if="item.type === 'user' || item.type === 'userSign' || item.type === 'userSelectSign'|| item.type === 'userMulti'"
              @click="changeOperationField(item);">
            <treeselect v-model="obj[key].value"
                        :options="deptOptions" :defaultExpandLevel="1"
                        :multiple="item.type === 'userSelectSign'|| item.type === 'userMulti'"
                        :disable-branch-nodes="true"
                        :disabled="isDisabled(item)" :placeholder="`请选择`+item.itemComment" @select="userSelectChange">
            </treeselect>
            </span>
            <!-- 当事人选择 -->
            <el-input v-else-if="item.type === 'litigantSelect'" type="text" v-model="obj[key].value"
                      :disabled="isDisabled(item)" :placeholder="`点击右侧选择`+item.itemComment">
              <el-button slot="append" icon="el-icon-search"
                         @click="changeLitigantIsShow();changeOperationField(item);"></el-button>
            </el-input>
            <!-- 违法事项选择-->
            <el-input v-else-if="item.type === 'illegalActivitiesSelect'" type="text" v-model="obj[key].value"
                      :disabled="isDisabled(item)" :placeholder="`点击右侧选择`+item.itemComment">
              <el-button slot="append" icon="el-icon-search"
                         @click="changeIllegalActivitiesIsShow();changeOperationField(item);"></el-button>
            </el-input>
            <!-- 文书文号选择-->
            <el-input v-else-if="item.type === 'approveDocNumSelect'" type="text" v-model="obj[key].value"
                      :disabled="isDisabled(item)" :placeholder="`点击右侧选择`+item.itemComment">
              <el-button slot="append" icon="el-icon-search"
                         @click="changeApproveDocNumIsShow();changeOperationField(item);"></el-button>
            </el-input>
            <!--富文本编辑器 -->
            <span v-if="item.type === 'richText'||item.type === 'questionRecord'||item.type === 'spotRecord'">
              <el-button v-if="item.type === 'questionRecord'" size="mini" type="primary"
                         @click="changeRecordTemplateIsShow(20);changeOperationField(item);"
                         icon="el-icon-search">选择询问笔录模板</el-button>
              <el-button v-if="item.type === 'spotRecord'" size="mini" type="primary"
                         @click="changeRecordTemplateIsShow(10);changeOperationField(item);"
                         icon="el-icon-search">选择现场笔录模板</el-button>
            <editor v-model="obj[key].value" :min-height="192" :toolbar-status="0"/>
            </span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!--当事人选择组件    -->
    <LitigantSelect ref="litigantSelect" :value="litigantObj" @change="fieldPappingProcessing"/>
    <!-- 违法事项选择组件   -->
    <IllegalActivitiesSelect ref="illegalActivitiesSelect" :value="illegalActivitiesObj"
                             @change="fieldPappingProcessing"/>
    <!-- 笔录模板选择组件   -->
    <RecordTemplateSelect ref="recordTemplateSelect" :value="recordTemplateObj"
                          @change="fieldPappingProcessing"/>
    <ApproveDocNumSelect ref="approveDocNumSelect" :caseId="caseId" :value="approveDocNumObj" @change="fieldPappingProcessing"/>
  </div>
</template>

<script>
import {getDocNum} from "@/api/enforceLaw/approve";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import LitigantSelect from "@/components/LitigantSelect/index";
import IllegalActivitiesSelect from "@/components/Base/IllegalActivitiesSelect/index";
import th from "element-ui/src/locale/lang/th";
import RecordTemplateSelect from "@/components/RecordTemplateSelect/index.vue";
import ApproveDocNumSelect from "@/components/ApproveDocNumSelect/index.vue";

export default {
  name: "dynamic-form",
  components: {ApproveDocNumSelect, RecordTemplateSelect, LitigantSelect, Treeselect, IllegalActivitiesSelect},
  props: {
    lawFormItemObj: {
      type: Object,
      default: function () {
        return {};
      },
    },
    caseId: {
      type: [String],
      default: null,
    },
    formId: {
      type: [Number],
      default: null,
    },
    deptOptions: {
      type: Array,
      default: null,
    },
    processType: {
      type: [Number],
      default: 20,
    },
    isDisabledAll: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      tt: true,
      obj: {},
      showDocNumList: false,
      objKeyActive: "",
      loading: true,
      docNumList: [],
      //违法事项选择对象
      illegalActivitiesObj: {
        name: null,
        mobile: null,
        address: null,
        certNo: null
      },
      //当事人选择对象
      litigantObj: {
        name: null,
        mobile: null,
        address: null,
        certNo: null
      },
      recordTemplateType: null,
      //笔录模板选择对象
      recordTemplateObj: {
        name: null,
        type: null,
        questionAnswer: null
      },
      //文书选择对象
      approveDocNumObj: {
        approveTitle: null,
        docNum: null
      },
      //当前操作字段
      operationField: {}
    }
  },
  watch: {
  },
  mounted() {
    console.log(this.deptOptions)
    this.obj = JSON.parse(JSON.stringify(this.lawFormItemObj));
    this.$nextTick(() => {
      this.loading = false;
    });
  },
  methods: {
    /**
     * 根据map对象的值判断逻辑表达式是true或者false
     * @param {String} expression 逻辑表达式
     * @param {Map} map Map对象
     * @return {Boolean} true或者false
     */
    judgeExpression(expression, map) {
      if (expression === "true") return true;
      if (expression === "false") return false;
      if (!expression) return true;
      //对Map进行排序，字符越长越靠前
      let keySorts = Object.keys(map).sort((a, b) => {
        return b.length - a.length;
      });
      // 遍历map对象，将map中的值替换到expression中
      for (let i = 0; i < keySorts.length; i++) {
        let key = keySorts[i];
        expression = expression.replace(key, `'${map[key].value}'` || "");
      }
      // 计算表达式的值
      let result = eval(expression);
      // 返回表达式的值
      return result;
    },
    // 点击选择文书号-多选
    selectDocNum(docNum, id) {
      this.obj[this.objKeyActive].valueStr = docNum;
      this.obj[this.objKeyActive].value = id;
      this.docNumList = [];
      this.showDocNumList = false;
    },
    // 获取文书号
    getDocNumNumber(columnName, key) {
      this.loading = true;
      getDocNum({
        caseId: this.caseId,
        formId: this.formId,
        columnName,
      })
        .then((response) => {
          this.loading = false;
          if (response.code == 200) {
            if (response.data.length === 1) {
              this.obj[key].valueStr = response.data[0].docNum || "";
              this.obj[key].value = response.data[0].id || null;
            } else if (response.data.length > 1) {
              this.objKeyActive = key;
              this.docNumList = response.data;
              this.$nextTick(() => {
                this.showDocNumList = true;
              });
            }
          }
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    // 提交
    submit() {
      let params = this.getSubmitParams();
      if (params !== null) {
        this.$emit("onSubmit", params);
      }else {
        console.log("3.5、参数不通过，提交暂存失败")
        this.$emit("onError");
        return Promise.reject(new Error('参数校验不通过'))
      }
    },
    // 提交
    temp(stepType) {
      console.log("3.1、开始暂存")
      let params = this.getSubmitParams();
      console.log(params)
      if (params !== null) {
        console.log("3.5、开始提交暂存")
        this.$emit("onTemp", params, stepType);
        console.log("3.6、提交暂存完毕")
      } else {
        console.log("3.5、参数不通过，提交暂存失败")
        this.$emit("onError");
        return Promise.reject(new Error('参数校验不通过'))
      }
    },
    // 获取提交参数
    getSubmitParams() {
      console.log("3.2、获取暂存参数")
      let verificationPassed = true;
      // 必填校验
      for (let key in this.obj) {
        if (this.judgeExpression(this.obj[key].display, this.obj)) {
          if (
            this.obj[key].isRequired === "Y" ||
            (this.obj[key].type === "text" && this.obj[key].autoType === "1")
          ) {
            if (
              String(this.obj[key].value).replace(/s+/g, "") === "" ||
              String(this.obj[key].value).replace(/s+/g, "") === "null"
            ) {
              verificationPassed = false;
              this.$message({
                message: `${this.obj[key].itemComment}不能为空`,
                type: "warning",
              });
              console.log("3.3、参数校验失败有未必填的字段")
              break;
            }
          }
        }
      }
      if (verificationPassed) {
        console.log("3.4、参数校验成功")
        return this.getParams();
      } else {
        console.log("3.4、参数校验失败有未必填的字段")
        return null;
      }
    },
    //获取params
    getParams() {
      let params = {};
      for (let key in this.obj) {
        let item = this.obj[key]
        //用户提交值处理，数组变成逗号分隔字符串
        if (["user", "userMulti", "userSign", "userSelectSign"].includes(item.type)) {
          if (item.value && item.value.length > 0) {
            let userStr = '';
            item.value.forEach(item => {
              userStr += item + ','
            })
            params[key] = userStr.substring(0, userStr.length - 1);
          }
        } else {
          params[key] = this.obj[key].value;
        }
      }
      console.log("getParams", params)
      return params;
    },
    // 生成预览文件图片
    genPreviewFile() {
      this.$emit("onGenPreviewFile", this.getParams());
    },
    isDisabled(item) {
      //初审终审阐述不允许修改
      if (this.isDisabledAll) {
        return true;
      } else {
        return item.isDisabled === 'N';
      }
    },
    //字段映射处理
    fieldPappingProcessing(obj, isErr = true) {
      console.log("333", obj, isErr)
      //获取字段映射
      let fieldMapStr = this.operationField.fieldMap;
      let fieldMap = JSON.parse(fieldMapStr);

      //fieldMap没有映射则提示
      if (fieldMap == null || fieldMap.length === 0) {
        if (isErr) {
          this.$modal.msgError(this.operationField.itemName + "未配置字段映射,请联系管理员！");
        }
        return;
      }
      for (let fieldMapKey in fieldMap) {
        if (obj[fieldMapKey] != null) {
          this.obj[fieldMap[fieldMapKey]].value = obj[fieldMapKey];
        }
      }

      console.log("已选中", obj, this.obj)
    },
    //显示当事人选择组件
    changeLitigantIsShow() {
      this.$refs.litigantSelect.open();
    },
    //变更当前操作字段
    changeOperationField(field) {
      this.operationField = field;
    },
    //显示违法事项选择组件
    changeIllegalActivitiesIsShow() {
      this.$refs.illegalActivitiesSelect.open();
    },
    //显示文书号选择组件
    changeApproveDocNumIsShow() {
      this.$refs.approveDocNumSelect.open();
    },
    //用户选择变更事件
    userSelectChange(user) {
      this.fieldPappingProcessing(user, false);
    },
    //显示笔录模板选择组件
    changeRecordTemplateIsShow(type) {
      this.$refs.recordTemplateSelect.open(type);
    },

  },
};
</script>
<style lang="scss" scoped>
</style>