equipment/src/components/drawerDialog/index.vue

<template>
  <div class="drawerRoot">
    <el-drawer
      title="编辑模板"
      :visible.sync="drawer"
      size="90%"
      show-
      @open="open"
    >
      <div class="root">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="基本信息" name="0">
            <el-form
              ref="formTemplate"
              :model="formTemplate"
              class="small-space"
              label-position="left"
              label-width="80px"
              style="margin-left: 50px"
            >
              <el-form-item label="模板名称" prop="tempName" required>
                <el-input v-model="formTemplate.tempName" type="text" />
              </el-form-item>
              <el-form-item label="模板类型" prop="tempCategory" required>
                <el-select
                  v-model="formTemplate.tempCategory"
                  placeholder="模板类型"
                  style="width: 200px"
                  clearable
                >
                  <el-option
                    v-for="item in categoryList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
                <el-select
                  v-model="formTemplate.bglx"
                  placeholder="报告类型"
                  style="width: 215px"
                  clearable
                >
                  <!-- @change="getDicCodeList" -->
                  <el-option
                    v-for="item in bglxList"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="检验类别">
                <el-select
                  v-model="formTemplate.jianyanleibie"
                  placeholder="检验类别"
                  style="width: 200px"
                  clearable
                  @change="getNblbListByJylb"
                >
                  <el-option
                    v-for="item in jylbList"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  />
                </el-select>
                <el-select
                  v-model="neibuleibie"
                  placeholder="内部类别"
                  multiple
                  style="width: 215px"
                  clearable
                >
                  <el-option
                    v-for="item in nblbList"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="设备种类">
                <el-select
                  v-model="formTemplate.shebeizhongleidaima"
                  placeholder="设备种类"
                  style="width: 200px"
                  clearable
                  @change="getSblbList"
                >
                  <el-option
                    v-for="item in sbzlList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
                <el-select
                  v-model="formTemplate.shebeileibiedaima"
                  placeholder="设备类别"
                  style="width: 215px"
                  clearable
                >
                  <el-option
                    v-for="item in sblbList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
                <el-switch
                  v-model="sbpzLevelStatus"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  @change="getSbpzList"
                />
              </el-form-item>
              <el-form-item label="设备品种">
                <el-select
                  v-model="shebeipinzhongdaima"
                  placeholder="设备品种"
                  multiple
                  style="width: 420px"
                  clearable
                >
                  <el-option
                    v-for="item in sbpzList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="模板路径" prop="tempPath">
                <el-input v-model="formTemplate.tempPath" type="text" />
              </el-form-item>
              <el-form-item label="检验依据" prop="jianyanyiju">
                <el-input v-model="formTemplate.jianyanyiju" type="text" />
              </el-form-item>
              <el-form-item label="对应字典" prop="withDicCode">
                <el-select
                  v-model="formTemplate.withDicCode"
                  placeholder="对应字典"
                  style="width: 420px"
                  clearable
                >
                  <el-option
                    v-for="item in dicCodeList"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="父类模板" prop="parentId">
                <el-select
                  v-model="formTemplate.parentId"
                  placeholder="父类模板"
                  style="width: 420px"
                  clearable
                >
                  <el-option
                    v-for="item in parentList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-row :gutter="10">
                <el-col>
                  <el-form-item label="版本号" prop="version" required>
                    <el-input
                      v-model="formTemplate.version"
                      type="text"
                      style="width: 200px"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item label="排序号" prop="sort">
                <el-input
                  v-model="formTemplate.sort"
                  type="text"
                  style="width: 200px"
                />
              </el-form-item>
              <el-form-item label="是否消红" prop="sort">
                <el-switch
                  v-model="formTemplate.cleanState"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  @change="changeState"
                />
              </el-form-item>
            </el-form>
            <div class="bottomBox">
              <el-button type="primary" @click="update">
                保存修改
              </el-button>
              <el-button @click="drawer = false">
                取消
              </el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="模板配置" name="1">
            <div class="boxRoot">
              <div class="left">
                <el-table
                  ref="settingList"
                  :data="list"
                  border
                  fit
                  highlight-current-row
                  @current-change="rowClick"
                >
                  <el-table-column align="center" label="序号" width="50">
                    <template slot-scope="scope">
                      <span v-text="getIndex(scope.$index)" />
                    </template>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    label="检验项目行个数"
                    prop="affiliatedTableRowCount"
                    width="100"
                  />
                  <el-table-column
                    align="center"
                    label="检验项目起始页码"
                    prop="tableStartRow"
                    width="100"
                  />
                  <el-table-column
                    align="center"
                    label="检验项目起始行"
                    prop="affiliatedTableStartRow"
                    width="100"
                  />
                  <el-table-column
                    align="left"
                    label="表格索引"
                    prop="tableIndex"
                  />
                  <el-table-column
                    :formatter="fmBglx"
                    align="center"
                    label="表格类型"
                    prop="tableType"
                    width="80"
                  >
                    <template slot-scope="scope">
                      <div>
                        {{ scope.row.tableType == 1 ? "检验项目" : "目录页" }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    label="是否是子报告模板"
                    prop="isChild"
                  >
                    <template slot-scope="scope">
                      <div>
                        {{ scope.row.isChild ? "是" : "否" }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    label="表格模式"
                    prop="tableMode"
                  >
                    <template slot-scope="scope">
                      <div>
                        {{ scope.row.tableMode == 1 ? "DN模式" : "KV模式" }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="排序" prop="sort" />
                  <el-table-column
                    align="center"
                    label="操作"
                    width="150"
                    fixed="right"
                  >
                    <template slot-scope="scope">
                      <el-button
                        type="primary"
                        size="mini"
                        icon="el-icon-edit"
                        circle
                        title="编辑"
                        @click="editFnTem(scope.row)"
                      />
                      <el-button
                        type="danger"
                        size="mini"
                        icon="el-icon-delete"
                        circle
                        title="编辑"
                        @click="deleteModelFn(scope.row)"
                      />
                    </template>
                  </el-table-column>
                </el-table>
                <div class="bottomPage">
                  <pagination
                    v-show="totalCount > 0"
                    :total="totalCount"
                    :page-num.sync="listQuery.pageNum"
                    :page-row.sync="listQuery.pageRow"
                    @pagination="getList"
                  />
                </div>
              </div>
              <div class="right">
                <div class="funbox">
                  <p>模板详情</p>
                  <el-button
                    type="primary"
                    icon="el-icon-plus"
                    size="mini"
                    @click="addFn"
                  >
                    新增
                  </el-button>
                </div>
                <el-table :data="gridData" border>
                  <el-table-column align="center" label="序号" width="50">
                    <template slot-scope="scope">
                      <span v-text="getIndex(scope.$index)" />
                    </template>
                  </el-table-column>
                  <el-table-column
                    property="field"
                    label="列名"
                    width="150"
                    align="center"
                  />

                  <el-table-column
                    property="indexFromRight"
                    label="排序"
                    width="150"
                    align="center"
                  />
                  <el-table-column
                    property="modeName"
                    label="模式"
                    width="150"
                    align="center"
                  />
                  <el-table-column align="center" label="操作" width="190">
                    <template slot-scope="scope">
                      <el-button
                        type="primary"
                        size="mini"
                        icon="el-icon-edit"
                        circle
                        title="编辑"
                        @click="editFn(scope.row)"
                      />
                      <el-button
                        type="danger"
                        size="mini"
                        icon="el-icon-delete"
                        circle
                        title="删除"
                        @click="deleteFn(scope.row)"
                      />
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-drawer>
    <el-dialog title="新增" :visible.sync="dialogVisible" width="30%">
      <el-form label-width="80px" :model="formLabelAlign">
        <el-form-item
          label="列名称"
          :rules="[{ required: true, message: '请输入列名', trigger: 'blur' }]"
        >
          <el-input v-model="formLabelAlign.field" />
        </el-form-item>
        <el-form-item
          label="列数值"
          :rules="[
            { required: true, message: '请输入列数值', trigger: 'blur' },
          ]"
        >
          <el-input v-model="formLabelAlign.fieldMode" />
        </el-form-item>
        <el-form-item label="排序">
          <el-input-number
            v-model="formLabelAlign.indexFromRight"
            :min="1"
            :max="10"
            @change="handleChange"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onsubmit">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="新增" :visible.sync="dialogVisible1" width="50%">
      <el-form>
        <el-form-item
          label="检验项目行个数"
          prop="tableRowCount"
          label-width="150px"
        >
          <el-input-number
            v-model="form.affiliatedTableRowCount"
            :min="0"
            :max="100"
          />
        </el-form-item>
        <el-form-item
          label="检验项目起始行"
          prop="affiliatedTableStartRow"
          label-width="150px"
        >
          <el-input-number
            v-model="form.affiliatedTableStartRow"
            :min="0"
            :max="100"
          />
        </el-form-item>
        <el-form-item
          label="检验项目起始页码"
          prop="tableStartRow"
          label-width="150px"
        >
          <el-input-number
            v-model="form.tableStartRow"
            :min="0"
            :max="100"
          />
          <el-alert
            type="warning"
            title="建议先尝试如果是第1页则为1！"
            style="display: inline"
            :closable="false"
          />
        </el-form-item>
        <el-form-item
          label="表格索引"
          prop="tableIndex"
          label-width="150px"
        >
          <el-input-number
            v-model="form.tableIndex"
            :min="0"
            :max="100"
          />
        </el-form-item>
        <el-form-item label="排序" prop="sort" label-width="150px">
          <el-input-number v-model="form.sort" :min="0" :max="100" />
        </el-form-item>
        <el-form-item
          label="表格类型"
          prop="form.tableType"
          label-width="150px"
        >
          <el-radio v-model="form.tableType" label="1">
            检验项目
          </el-radio>
          <el-radio v-model="form.tableType" label="2">
            目录页
          </el-radio>
        </el-form-item>

        <el-form-item
          label="是否是子报告模板"
          prop="isChild"
          label-width="150px"
        >
          <el-switch
            v-model="form.showPageStatus"
            active-text="是"
            inactive-text="不是"
          />
        </el-form-item>
        <el-form-item
          label="表格类型"
          prop="form.tableMode"
          label-width="150px"
        >
          <el-radio v-model="form.tableMode" label="1">
            DN模式
          </el-radio>
          <el-radio v-model="form.tableMode" label="2">
            KV模式
          </el-radio>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="onsubmit1">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import Pagination from '@/components/Pagination'
import { deleteSettingFn, deleteModuleFn } from '@/api/template.js'

export default {
  components: { Pagination },
  props: {
    id: {
      type: Number,
      default: 0
    },
    drawer: {
      type: Boolean,
      default: false
    },
    index: {
      type: Number,
      default: 0
    },
    templateList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      activeName: 0,
      settingList: [],
      formTemplate: {},
      dialogVisible1: false,
      formLabelAlign: {
        field: '',
        fieldMode: '',
        indexFromRight: '',
        templateId: '', // 模板id
        templateSettingId: '' // 配置id
      },
      form: {
        affiliatedTableRowCount: '',
        affiliatedTableStartRow: '',
        isChild: '',
        sort: '',
        tableIndex: '',
        tableMode: '',
        tableRowCount: '',
        tableStartRow: '',
        tableType: '1',
        writeMode: '1'
      },
      // formTemplate:{},
      dialogVisible: false,
      bglxList: [],
      categoryList: [],
      jylbList: [],
      neibuleibie: [],
      nblbList: [],
      dicCodeList: [],
      parentList: [],
      options: [],
      sbzlList: [],
      shebeipinzhongdaima: [],
      sblbList: [],
      sbpzList: [],
      totalCount: 0,
      listQuery: {
        pageNum: 1, // 页码
        pageRow: 20, // 每页条数
        searchTemplate: {
          neibuleibie: null
        }
      },
      list: [],
      gridData: [],
      sbpzLevelStatus: false,
      multipleSelection: [],
      moduleArr: []
    }
  },
  mounted() {},
  methods: {
    open() {
      this.getList()
      this.loadFormData(this.index)
      this.getSbList(undefined, undefined, 1)
      this.getBglxList()
      this.getJylbList()
      this.getTemplateIdentification()
    },
    getJylbList() {
      this.getCategoryList('jylb', null, null)
    },
    editFnTem(row) {
      this.dialogVisible1 = true
      row.tableType = row.tableType + ''
      row.tableMode = row.tableMode + ''
      this.form = row
    },
    changeState() {},
    getList() {
      // 查询列表
      this.api({
        url: '/templateSetting/getList',
        method: 'get',
        params: this.listQuery
      }).then((data) => {
        // data.list((item)=>{
        //   if(item.tableMode)
        // })
        this.list = data.list
        this.totalCount = data.total * 1
        this.getDemoList(data.list[0].id)
      })
    },
    deleteModelFn(row) {
      const arr = []
      arr.push(row.id)
      deleteModuleFn({
        id: arr
      }).then((data) => {
        this.getList()
      })
    },
    deleteFn(row, index) {
      const arr = []
      arr.push(row.id)
      // this.api({
      //   url: '/templateJyxm',
      //   method: 'delete',
      //   params: {
      //     id: arr
      //   }
      // }).then((data) => {
      //   this.getDemoList()
      // })
      deleteSettingFn({
        id: arr
      }).then((data) => {
        this.getDemoList()
      })
    },
    getIndex($index) {
      // 表格序号
      return (this.listQuery.pageNum - 1) * this.listQuery.pageRow + $index + 1
    },
    getDemoList(id) {
      // 查询列表
      this.api({
        url: '/templateJyxm/getList',
        method: 'get',
        params: {
          id: id
        }
      }).then((data) => {
        data.list.map((item) => {
          if (item.fieldMode === 0) {
            item.modeName = '普通模式'
          } else if (item.fieldMode === 1) {
            item.modeName = 'USI模式'
          } else {
            item.modeName = 'UNN模式'
          }
        })
        this.gridData = data.list
      })
    },
    toggleFn(val) {
      this.multipleSelection = val
    },
    editFn(row) {
      this.dialogVisible = true
      this.formLabelAlign.field = row.filed
      this.formLabelAlign.fieldMode = row.fieldMode
      this.formLabelAlign.indexFromRight = row.indexFromRight
      this.formLabelAlign.id = row.id
    },
    handleChange(value) {
      this.formLabelAlign.indexFromRight = value
    },
    onsubmit() {
      this.api({
        url: '/templateJyxm',
        method: 'post',
        data: this.formLabelAlign
      }).then((res) => {
        this.dialogVisible = false
        this.getDemoList()
      })
    },
    onsubmit1() {
      this.api({
        url: '/templateJyxm',
        method: 'post',
        data: this.form
      }).then((res) => {
        this.dialogVisible1 = false
        this.getList()
      })
    },
    fmBglx(row, column, cellValue) {
      for (let i = 0; i < this.bglxList.length; i++) {
        if (this.bglxList[i].value === cellValue) {
          return this.bglxList[i].name
        }
      }
    },
    fmSbzl(row, column, cellValue) {
      for (let i = 0; i < this.sbzlList.length; i++) {
        if (this.sbzlList[i].value === cellValue) {
          return this.sbzlList[i].label
        }
      }
    },
    handleSettingChange(row) {
      this.moduleArr = row
      // this.getDemoList(row.id)
    },
    getTemplateIdentification() {
      this.api({
        url: '/dicData/getDicDataByTypeCode',
        method: 'get',
        params: {
          typeCode: 'TEMPLATE_IDENTIFICATION'
        }
      }).then((data) => {
        this.options = data
      })
    },
    getDicDataByTypeCode(val, type, parentId) {
      this.api({
        url: '/dicData/getDicDataByTypeCode',
        method: 'get',
        params: {
          typeCode: val,
          parentId: parentId
        }
      }).then((data) => {
        if (type === 'dicCode') {
          this.dicCodeList = data
        }
      })
    },
    getSbpzList() {
      this.shebeipinzhongdaima = []
      this.getSbList(
        this.formTemplate.shebeizhongleidaima,
        this.sbpzLevelStatus ? this.formTemplate.shebeileibiedaima : undefined,
        this.sbpzLevelStatus ? 3 : 4
      )
    },
    getBglxList() {
      this.api({
        url: '/dicData/getDicDataByTypeCode',
        method: 'get',
        params: {
          typeCode: 'REPORT_CLASS'
        }
      }).then((data) => {
        this.bglxList = data
      })
    },
    getNblbListByJylb(val) {
      const sbzl = this.formTemplate.shebeizhongleidaima
      this.neibuleibie = []
      this.getCategoryList('nblb', val, sbzl)
    },
    handleClick(e) {
      this.activeName = e.index
    },
    getSblbList(val) {
      this.formTemplate.shebeileibiedaima = ''
      this.sbpzList = []
      this.shebeipinzhongdaima = []
      this.getSbList(val, undefined, 2)
      // 新增与内部类别级联关系
      const jylb = this.formTemplate.jianyanleibie
      this.neibuleibie = []
      this.getCategoryList('nblb', jylb, val)

      this.shebeipinzhongdaima = []
      this.sbpzLevelStatus = false
      this.getSbList(
        this.formTemplate.shebeizhongleidaima,
        this.sbpzLevelStatus ? this.formTemplate.shebeileibiedaima : undefined,
        this.sbpzLevelStatus ? 3 : 4
      )
    },
    getSbList(sbzl, sblb, level) {
      this.api({
        url: '/sedirectory/getList',
        method: 'get',
        params: {
          sbzl: sbzl,
          sblb: sblb,
          level: level
        }
      }).then((data) => {
        switch (level) {
          case 1:
            this.sbzlList = data
            break
          case 2:
            this.sblbList = data
            break
          case 3:
            this.sbpzList = data
            break
          default:
            this.sbpzList = data
            break
        }
      })
    },
    getDicCodeList(val) {
      for (let i = 0; i < this.bglxList.length; i++) {
        if (val === 1) {
          this.dicCodeList = []
          break
        } else if (val === this.bglxList[i].value) {
          this.getDicDataByTypeCode(
            this.bglxList[i].code,
            'dicCode',
            this.bglxList[i].id
          )
          break
        }
      }
    },
    getCategoryList(type, parentCode, species) {
      this.api({
        url: '/category/getCategoryList',
        method: 'get',
        params: {
          parentCode: parentCode,
          species: species
        }
      }).then((data) => {
        switch (type) {
          case 'jylb':
            this.jylbList = data
            return ''
          case 'nblb':
            this.nblbList = data
            return ''
        }
      })
    },
    loadFormData(index) {
      this.$set(this, 'formTemplate', this.templateList[index])
      this.getSbList(this.formTemplate.shebeizhongleidaima, undefined, 2)
      this.sbpzLevelStatus = false
      this.getSbList(
        this.formTemplate.shebeizhongleidaima,
        this.sbpzLevelStatus ? this.formTemplate.shebeileibiedaima : undefined,
        this.sbpzLevelStatus ? 3 : 4
      )
      this.shebeipinzhongdaima = JSON.parse(
        this.formTemplate.shebeipinzhongdaima
      )
      this.neibuleibie = JSON.parse(this.formTemplate.neibuleibie)
      this.getDicCodeList(this.formTemplate.bglx)
      this.getCategoryList(
        'nblb',
        this.formTemplate.jianyanleibie,
        this.formTemplate.shebeizhongleidaima
      )
    },
    update() {
      this.api({
        url: '/template',
        method: 'put',
        data: this.formTemplate
      }).then((data) => {
        this.drawer = false
      })
    },
    rowClick(row) {
      this.$refs.settingList.toggleRowSelection(row)
      this.getDemoList(row.id)
    },
    addFn() {
      this.dialogVisible = true
    }
  }
}
</script>

<style scoped>
.root {
  padding: 0 30px;
  height: auto;
  overflow-y: scroll;
}
.boxRoot {
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: space-between;
}
.boxRoot .left {
  width: 50%;
  border: 1px solid #eeeeee;
  padding: 20px;
}
.boxRoot .right {
  width: 49%;
  border: 1px solid #eeeeee;
  padding: 20px;
}
.funbox {
  width: 100%;
  box-sizing: border-box;
  padding: 0 30px;
  text-align: right;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.bottomBox {
  width: 100%;
  padding: 20px;
  text-align: center;
}
>>> .el-drawer__header {
  margin-bottom: 10px !important;
}
</style>