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-col>
                  <el-form-item label="模板标识" prop="ifAbroad">
                    <el-select
                      v-model="formTemplate.ifAbroad"
                      style="width: 100%"
                      clearable
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in options"
                        :key="item.id"
                        :label="item.name"
                        :value="item.value"
                      />
                    </el-select>
                  </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>
          </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
                  @row-click="rowClick"
                  @selection-change="handleSettingChange"
                >
                  <el-table-column type="selection" width="50" />
                  <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="tableStartRow"
                    width="100"
                  />
                  <el-table-column
                    align="center"
                    label="检验项目起始行"
                    prop="affiliatedTableStartRow"
                    width="100"
                  />
                  <el-table-column
                    align="left"
                    label="检验项目起始行"
                    prop="affiliatedTableStartRow"
                  />
                  <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="sort" />
                  <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)"
                      />
                    </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
                  @row-click="rowClick1"
                  @selection-change="toggleFn"
                >
                  <el-table-column type="selection" width="50" />
                  <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="fieldMode"
                    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 class="bottomBox">
          <el-button type="primary" @click="update">
            保存修改
          </el-button>
          <el-button @click="drawer = false">
            取消
          </el-button>
        </div>
      </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>
  </div>
</template>
<script>
import Pagination from '@/components/Pagination'

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: {},
      formLabelAlign: {
        field: '',
        fieldMode: '',
        indexFromRight: '',
        templateId: '', // 模板id
        templateSettingId: '' // 配置id
      },
      // 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: []
    }
  },
  mounted() {},
  methods: {
    open() {
      this.getList()
      this.getDemoList()
      this.loadFormData(this.index)
      this.getSbList(undefined, undefined, 1)
      this.getBglxList()
      this.getJylbList()
      this.getTemplateIdentification()
    },
    getJylbList() {
      this.getCategoryList('jylb', null, null)
    },
    changeState() {},
    getList() {
      // 查询列表
      this.api({
        url: '/templateSetting/getList',
        method: 'get',
        params: this.listQuery
      }).then((data) => {
        this.list = data.list
        this.totalCount = data.total * 1
      })
    },
    deleteFn(row, index) {
      const arr = this.multipleSelection.toString
      this.api({
        url: '/templateJyxm',
        method: 'delete',
        params: {
          id: arr
        }
      }).then((data) => {
        this.getDemoList()
      })
    },
    getIndex($index) {
      // 表格序号
      return (this.listQuery.pageNum - 1) * this.listQuery.pageRow + $index + 1
    },
    getDemoList() {
      // 查询列表
      this.api({
        url: '/templateJyxm/getList',
        method: 'get',
        params: {
          id: this.id
        }
      }).then((data) => {
        this.gridData = data.list
        console.log(data, '返回参数')
      })
    },
    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() {
      console.log(this.formLabelAlign)
      this.api({
        url: '/templateJyxm',
        method: 'post',
        data: this.formLabelAlign
      }).then((res) => {
        this.dialogVisible = false
        this.getList()
        this.getDemoList()
      })
    },
    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) {
      console.log(row, '每行切换', 1)
    },
    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) {
      console.log(index, this.templateList[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) {
      console.log(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>