shanghaiQLvue/src/views/modules/property/propertyTemplate.vue

<template>
  <div>
    <div style="width: 1000px">
      <el-form :model="templateQuery" ref="queryForm" label-position="top">
        <el-row :gutter="10">
          <el-col :span="4">
            <el-form-item label="模板编码" prop="codeNo">
              <el-input v-model="templateQuery.codeNo" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="模板描述" prop="codeDesc">
              <el-input v-model="templateQuery.codeDesc" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="模板分组" prop="functionType">
              <el-select v-model="templateQuery.functionType" placeholder="模板分组" clearable style="width: 100%;">
                <el-option label="全部" value=""></el-option>
                <el-option v-for="dict in dict.type.function_type_desc" :key="dict.value" :label="dict.label"
                  :value="dict.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="状态" prop="active">
              <el-select v-model="templateQuery.active">
                <el-option label="全部" value=""></el-option>
                <el-option label="启用" value="Y"></el-option>
                <el-option label="停用" value="N"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label=" ">
              <el-button type="primary" @click="handleQueryByPage">查询</el-button>
              <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
              <el-button type="primary" @click="handleSave(null)">新增</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <el-table :data="dataList" v-loading="queryLoading" border style="width: 100%;margin-top: 5px" height="80vh">
      <el-table-column v-for="(item,index) in columns" :key="index" :sortable="item.columnSortable"
        :prop="item.columnProp" :header-align="item.headerAlign" :show-overflow-tooltip="item.showOverflowTooltip"
        :align="item.align" :fixed="item.fixed==''?false:item.fixed" :min-width="item.columnWidth"
        :label="item.columnLabel">
        <template slot-scope="scope">
          <div v-if="item.columnProp !== 'active' && item.columnProp !== 'functionType'">
            <span v-if="!item.columnHidden">{{ scope.row[scope.column.property] }}</span>
            <span v-if="item.columnImage"><img :src="scope.row[scope.column.property]"
                style="width: 100px; height: 80px" /></span>
          </div>
          <dict-tag v-else-if="item.columnProp == 'functionType'" :options="dict.type.function_type_desc"
            :value="scope.row.functionType" />
          <span v-else
            :style="{color:scope.row.active === 'Y'?'#67C23A':'red'}">{{ scope.row.active === 'Y' ? '启用' : '停用' }}</span>
        </template>
      </el-table-column>
      <el-table-column header-align="center" fixed="right" align="center" width="160" label="操作">
        <template slot-scope="scope">
          <el-link style="cursor: pointer" @click="handleSave(scope.row)">编辑</el-link>
          <el-link style="cursor: pointer" @click="handleRemove(scope.row)">删除</el-link>
          <el-link style="cursor: pointer" @click="handleItem(scope.row)">属性项目</el-link>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination @size-change="handleSizeChange" @current-change="handlePageChange" :current-page="pageIndex"
      :page-sizes="[20, 50, 100, 200, 500]" :page-size="pageSize" :total="total"
      layout="total,sizes, prev, pager, next, jumper">
    </el-pagination>

    <!-- /*属性模板弹框 */ -->
    <el-dialog title="属性模板" :close-on-click-modal="false" v-drag :visible.sync="saveVisible" width="400px">
      <el-form :model="saveForm" ref="saveForm" :rules="rules" label-position="top" label-width="100px">
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="工厂" prop="site" :show-message="false">
              <el-select v-model="saveForm.site" style="width: 100%">
                <el-option v-for="(item,index) in userSiteList" :key="index" :label="item.deptName"
                  :value="item.deptId">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- </el-row>
        <el-row :gutter="10">
          <el-col :span="10">
            <el-form-item label="模板编码" prop="codeNo" :show-message="false">
              <el-input v-model="saveForm.codeNo" :disabled="saveForm.id > 0"></el-input>
            </el-form-item>
          </el-col> -->
          <el-col :span="12">
            <el-form-item label="模板描述" prop="codeDesc" :show-message="false">
              <el-input v-model="saveForm.codeDesc"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="模板分组" prop="functionType" :show-message="false">
              <el-select v-model="saveForm.functionType" style="width: 100%;">
                <el-option label="全部" value=""></el-option>
                <el-option v-for="dict in dict.type.function_type_desc" :key="dict.value" :label="dict.label"
                  :value="dict.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="14">
            <el-form-item label=" " :show-message="false" prop="active">
              <el-checkbox v-model="saveForm.active" true-label="Y" false-label="N">状态</el-checkbox>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" :loading="saveLoading" @click="handleSaveOrUpdate">确 定</el-button>
        <el-button @click="saveVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- /*属性项目弹框*/ -->
    <el-dialog title="属性项目清单" :close-on-click-modal="false" v-drag :visible.sync="itemVisible" width="1000px">
      <el-form :model="propertyTemplateItem" label-position="top">
        <el-row :gutter="10">
          <el-col :span="4">
            <el-form-item label="属性模板编码">
              <el-input v-model="propertyTemplateItem.codeNo" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="属性模板名称">
              <el-input v-model="propertyTemplateItem.codeDesc" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label=" ">
              <el-button type="primary" @click="handleSaveItem(null)">新增</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table :height="300" :data="itemList2" border style="width: 100%;" class="itemListClass"
        :loading="itemListLoading">
        <el-table-column header-align="center" align="left" width="70" label="排序">
          <template slot-scope="scope">
            <el-link style="cursor: pointer" @click="updateItemSort(scope.row,scope.$index,-1)"
              v-if="scope.$index !== 0">上移</el-link>
            <el-link style="cursor: pointer" @click="updateItemSort(scope.row,scope.$index,1)"
              v-if="scope.$index < itemList2.length-1">下移</el-link>
          </template>
        </el-table-column>
        <el-table-column v-for="(item,index) in columnDetailList" :key="index" :sortable="item.columnSortable"
          :prop="item.columnProp" :header-align="item.headerAlign" :show-overflow-tooltip="item.showOverflowTooltip"
          :align="item.align" :fixed="item.fixed==''?false:item.fixed" :min-width="item.columnWidth"
          :label="item.columnLabel">
          <template slot-scope="scope">
            <span v-if="!item.columnHidden">
              <!-- <template
                v-if="item.columnProp==='valueType'">{{ scope.row[item.columnProp] === 'text' ? '文本' : '数字' }}</template>
              <template
                v-else-if="item.columnProp==='valueChooseFlag'">{{ scope.row[item.columnProp] === 'Y' ? '是' : '否' }}</template>
              <template v-else>{{ scope.row[item.columnProp] }}</template> -->
              <template v-if="item.columnProp==='daysNumber'">
                <el-input :controls="false" :ref="`daysNumber${scope.$index}`" v-model="scope.row.daysNumber"
                  @keyup.enter.native="focusNextInput(scope.$index, 'daysNumber')"
                  style="height: 11px; width: 98%;"></el-input>
              </template>
              <template v-else-if="item.columnProp==='ismainFlag'">
                <el-switch style="height: 15px; width: 50px;margin-top: -2px;" :ref="`ismainFlag${scope.$index}`"
                  v-model="scope.row.ismainFlag" active-value="Y" inactive-value="N"
                  @keyup.enter.native="focusNextInput(scope.$index, 'ismainFlag')" active-color="#13ce66"
                  inactive-color="#ff4949"></el-switch>
              </template>
              <template v-else-if="item.columnProp==='roleId'">
                <el-select v-model="scope.row.roleId" :ref="`roleId${scope.$index}`" placeholder="请选择">
                  <el-option v-for="(item,index) in roleIdList " :key="index" :label="item.roleName"
                    :value="item.roleId">
                  </el-option>
                </el-select>
              </template>
              <template v-else>{{ scope.row[item.columnProp] }}</template>
            </span>
            <span v-if="item.columnImage"><img :src="scope.row[item.columnProp]"
                style="width: 100px; height: 80px" /></span>
          </template>
        </el-table-column>
        <el-table-column header-align="center" align="center" width="130" label="操作">
          <template slot-scope="scope">
            <a v-if="scope.row.valueChooseFlag === 'Y'" @click="handleChooseValue(scope.row)">可选值</a>
            <a @click="handleRemoveItem(scope.row)">删除属性</a>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" :loading="itemListLoading" @click="itemListBatchSave">保 存</el-button>
        <el-button type="primary" @click="itemVisible = false">关 闭</el-button>
      </div>
    </el-dialog>

    <!-- /*添加模板属性弹框 */ -->
    <el-dialog title="新增属性" :close-on-click-modal="false" v-drag :visible.sync="itemSaveVisible" width="1000px">
      <div style="font-size: 12px">
        <el-form label-position="top" :model="item">
          <el-row :gutter="10">
            <el-col :span="3">
              <el-form-item label="属性编码">
                <el-input v-model="item.itemNo"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item label="属性名称">
                <el-input v-model="item.itemDesc"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item label=" ">
                <el-button type="primary" @click="handleQueryItem">查询</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <el-container style="margin-top: 0px;">
        <el-main style="width: 350px;padding: 1px">
          <span style="font-size: 12px">可选属性：</span>
          <el-table height="400px" :data="itemList1" border @selection-change="selectionItem1"
            @row-click="handleRowClick1" ref="itemTable1" style="width: 100%">
            <el-table-column type="selection" header-align="center" align="center" width="50">
            </el-table-column>
            <el-table-column prop="itemNo" header-align="center" align="center" min-width="80" label="属性编码">
            </el-table-column>
            <el-table-column prop="itemDesc" header-align="center" align="center" min-width="200" label="属性名称">
            </el-table-column>
          </el-table>
        </el-main>
        <el-main style="width: 10px;padding: 1px">
          <div style="margin-top: 200px;margin-left: 18px">
            <el-button type="primary" @click="handleAddItem">添加>></el-button>
          </div>
          <div style="margin-top: 15px;margin-left: 18px">
            <el-button type="primary" @click="handleRemoveBatchItem">&lt;&lt;删除</el-button>
          </div>
        </el-main>
        <el-main style="width: 350px;padding: 1px">
          <span style="font-size: 12px">已有属性：</span>
          <el-table height="400px" border ref="itemTable2" @selection-change="selectionItem2"
            @row-click="handleRowClick2" :data="itemList2" style="width: 100%">
            <el-table-column type="selection" header-align="center" align="center" width="50">
            </el-table-column>
            <el-table-column prop="itemNo" header-align="center" align="center" min-width="80" label="属性编码">
            </el-table-column>
            <el-table-column prop="itemDesc" header-align="center" align="center" min-width="200" label="属性名称">
            </el-table-column>
          </el-table>
        </el-main>
      </el-container>
      <el-footer style="height:40px;margin-top: 20px;text-align:center">
        <el-button type="primary" @click="itemSaveVisible = false">关闭</el-button>
      </el-footer>
    </el-dialog>

    <el-dialog title="可选值" :close-on-click-modal="false" v-drag :visible.sync="valueChooseFlagVisible" width="500px">
      <el-form :model="availableForm" label-position="top">
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="属性编码" prop="itemNo" :show-message="false">
              <el-input v-model="availableForm.itemNo" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="属性描述" prop="itemDesc" :show-message="false">
              <el-input v-model="availableForm.itemDesc" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table :data="availableList" border style="width: 100%" :height="200">
        <el-table-column prop="availableValue" header-align="center" align="left" min-width="200" label="属性值">
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
import { getSiteByUserName } from '@/api/dept.js'
import { getRoleSelect } from '@/api/role.js'
import {
  savePropertyTemplate,
  queryPropertyTemplateByPage,
  updatePropertyTemplate,
  queryPropertyTemplateDetail,
  queryPropertyTemplateDetailItem,
  batchSavePropertyTemplateDetail,
  batchUpdatePropertyTemplateDetail,
  removePropertyTemplateDetail,
  removeBatchPropertyTemplateDetail,
  removePropertyTemplate
} from '@/api/property/property.js'

export default {
  name: 'propertyTemplate',
  dicts: ['function_type_desc'],
  components: {},
  data() {
    return {
      pageIndex: 1,
      pageSize: 20,
      total: 0,
      menuId: 888001,
      dataList: [],
      roleIdList: [],
      queryLoading: false,
      itemListLoading: false,
      templateQuery: {
        codeNo: '',
        codeDesc: '',
        functionType: '',
        active: '',
      },
      userSiteList: [],
      saveVisible: false,
      saveLoading: false,
      columns: [
        {
          userId: this.$store.state.user.name,
          functionId: 888001,
          serialNumber: '180002TableFunctionTypeDesc',
          tableId: '180002Table',
          tableName: '属性项目表',
          columnProp: 'functionType',
          headerAlign: 'center',
          align: 'left',
          columnLabel: '模板分组',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
        },
        {
          userId: this.$store.state.user.name,
          functionId: 888001,
          serialNumber: '180002TableCodeNo',
          tableId: '180002Table',
          tableName: '属性模板表',
          columnProp: 'codeNo',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '属性模板编码',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
        },
        {
          userId: this.$store.state.user.name,
          functionId: 888001,
          serialNumber: '180002TableCodeDesc',
          tableId: '180002Table',
          tableName: '属性模板表',
          columnProp: 'codeDesc',
          headerAlign: 'center',
          align: 'left',
          columnLabel: '属性模板描述',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 150,
          showOverflowTooltip: true,
        },
        {
          userId: this.$store.state.user.name,
          functionId: 888001,
          serialNumber: '180002TableActive',
          tableId: '180002Table',
          tableName: '属性模板表',
          columnProp: 'active',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '状态',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
        },
        {
          userId: this.$store.state.user.name,
          functionId: 888001,
          serialNumber: '180002TableCreateDate',
          tableId: '180002Table',
          tableName: '属性模板表',
          columnProp: 'createDate',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '创建时间',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          columnWidth: 100,
          sortLv: 0,
          status: true,
          fixed: '',
        },
        {
          userId: this.$store.state.user.name,
          functionId: 888001,
          serialNumber: '180002TableCreateBy',
          tableId: '180002Table',
          tableName: '属性模板表',
          columnProp: 'createBy',
          headerAlign: 'center',
          align: 'left',
          columnLabel: '创建人',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 80,
        },
        {
          userId: this.$store.state.user.name,
          functionId: 888001,
          serialNumber: '180002TableUpdateDate',
          tableId: '180002Table',
          tableName: '属性模板表',
          columnProp: 'updateDate',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '更新时间',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          columnWidth: 100,
          sortLv: 0,
          status: true,
          fixed: '',
        },
        {
          userId: this.$store.state.user.name,
          functionId: 888001,
          serialNumber: '180002TableUpdateBy',
          tableId: '180002Table',
          tableName: '属性模板表',
          columnProp: 'updateBy',
          headerAlign: 'center',
          align: 'left',
          columnLabel: '更新人',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 80,
        },
      ],
      saveForm: {
        active: 'Y',
      },
      rules: {
        site: [{ required: true, message: '请选择site', trigger: 'change' }],
        codeNo: [
          { required: true, message: '请输入模板编码', trigger: 'blur' },
        ],
        codeDesc: [
          { required: true, message: '请输入模板描述', trigger: 'blur' },
        ],
        functionType: [
          { required: true, message: '请选择模板分组', trigger: 'change' },
        ],
      },
      propertyTemplateItem: {},
      itemVisible: false,
      detailList: [],
      columnDetailList: [
        {
          userId: this.$store.state.user.name,
          functionId: 180002,
          serialNumber: '180002Table2PropertiesItemNo',
          tableId: '180002Table2',
          tableName: '属性项目表',
          columnProp: 'propertiesItemNo',
          headerAlign: 'center',
          align: 'left',
          columnLabel: '属性项目编码',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 80,
        },
        {
          userId: this.$store.state.user.name,
          functionId: 180002,
          serialNumber: '180002Table2ItemDesc',
          tableId: '180002Table2',
          tableName: '属性项目表',
          columnProp: 'itemDesc',
          headerAlign: 'center',
          align: 'left',
          columnLabel: '属性项目名称',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
        },
        {
          userId: this.$store.state.user.name,
          functionId: 180002,
          serialNumber: '180002Table2ValueType',
          tableId: '180002Table2',
          tableName: '属性项目表',
          columnProp: 'daysNumber',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '天数',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 60,
        },
        {
          userId: this.$store.state.user.name,
          functionId: 180002,
          serialNumber: '180002Table2DefaultValue',
          tableId: '180002Table2',
          tableName: '属性项目表',
          columnProp: 'ismainFlag',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '是否关键事项',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 60,
        },
        {
          userId: this.$store.state.user.name,
          functionId: 180002,
          serialNumber: '180002Table2MaxValue',
          tableId: '180002Table2',
          tableName: '属性项目表',
          columnProp: 'roleId',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '角色',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 70,
        },
      ],
      itemSaveVisible: false,
      item: {},
      selectionList1: [],
      selectionList2: [],
      itemList1: [],
      itemList2: [],
      valueChooseFlagVisible: false,
      availableForm: {},
      availableList: [],
    }
  },
  created() {
    this.handleQueryByPage()
  },
  watch: {},
  methods: {
    handleQueryByPage() {
      let params = {
        ...this.templateQuery,
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        createBy: this.$store.state.user.name,
      }
      this.queryLoading = true
      queryPropertyTemplateByPage(params)
        .then(({ data }) => {
          if (data && data.code === 0) {
            this.dataList = data.page.records
            this.total = data.page.total
            this.pageIndex = data.page.current
          } else {
            this.$message.warning(data.msg)
          }
          this.queryLoading = false
        })
        .catch((error) => {
          this.$message.error(error)
          this.queryLoading = false
        })
    },
    handleSave(row) {
      this.getSiteByUserName()
      this.$nextTick(() => {
        if (this.$refs.saveForm) {
          this.$refs.saveForm.clearValidate()
        }
      })
      this.saveForm = JSON.parse(JSON.stringify(this.saveForm))
      if (row) {
        this.saveForm = {
          ...row,
        }
      } else {
        this.saveForm = JSON.parse(JSON.stringify({}))
        
        this.$set(this.saveForm,'active','Y')
      }
      this.saveVisible = true
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.handleQueryByPage()
    },
    handlePageChange(val) {
      this.pageIndex = val
      this.handleQueryByPage()
    },
    handleSaveOrUpdate() {
      this.$refs.saveForm.validate((valid, obj) => {
        if (valid) {
          if (this.saveForm.id) {
            this.handleTemplateUpdate()
          } else {
            this.handleTemplateSave()
          }
        } else {
          let i = 1
          for (let key in obj) {
            if (i === 1) {
              this.$message.error(obj[key][0].message)
              break
            }
            i++
          }
        }
      })
    },
    handleTemplateUpdate() {
      let params = {
        ...this.saveForm,
      }
      this.saveLoading = true
      updatePropertyTemplate(params)
        .then(({ data }) => {
          this.saveLoading = false
          if (data && data.code === 0) {
            this.$message.success(data.msg)
            this.handleQueryByPage()
            this.saveVisible = false
          } else {
            this.$message.warning(data.msg)
          }
        })
        .catch((error) => {
          this.saveLoading = false
          this.$message.error(error)
        })
    },
    handleTemplateSave() {
      let params = {
        ...this.saveForm,
      }
      this.saveLoading = true
      savePropertyTemplate(params)
        .then(({ data }) => {
          this.saveLoading = false
          if (data && data.code === 0) {
            this.$message.success(data.msg)
            this.handleQueryByPage()
            this.saveVisible = false
          } else {
            this.$message.warning(data.msg)
          }
        })
        .catch((error) => {
          this.saveLoading = false
          this.$message.error(error)
        })
    },
    handleRemove(row) {
      this.$alert('确认删除该属性模板吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          let params = { ...row }
          removePropertyTemplate(params)
            .then(({ data }) => {
              if (data && data.code === 0) {
                this.$message.success(data.msg)
                this.handleQueryByPage()
              }
            })
        })
        .catch(() => {})
    },
    handleItem(row) {
      this.propertyTemplateItem = { ...row }
      this.handleQueryPropertyTemplateDetail()
      this.getRoleSelect()
      this.itemVisible = true
    },
    handleSaveItem(row) {
      this.item = {
        itemNo: '',
        itemDesc: '',
        site: this.propertyTemplateItem.site,
        itemType: this.propertyTemplateItem.functionType,
        headerId: this.propertyTemplateItem.id,
      }
      this.handleQueryItem()
    },
    handleQueryItem() {
      let params = {
        ...this.item,
      }
      queryPropertyTemplateDetailItem(params)
        .then(({ data }) => {
          if (data && data.code === 0) {
            this.itemList1 = data.rows
            this.itemSaveVisible = true
          } else {
            this.$message.warning(data.msg)
          }
        })
        .catch((error) => {
          this.$message.error(error)
        })
    },
    handleRowClick1(row) {
      this.$refs.itemTable1.toggleRowSelection(row, true)
    },
    handleRowClick2(row) {
      this.$refs.itemTable2.toggleRowSelection(row, true)
    },
    selectionItem1(val) {
      this.selectionList1 = val
    },
    selectionItem2(val) {
      this.selectionList2 = val
    },
    handleAddItem() {
      if (this.selectionList1.length === 0) {
        this.$message.warning('请选择属性项目')
        return
      }
      let params = this.selectionList1.map((item) => {
        return {
          site: this.propertyTemplateItem.site,
          functionType: this.propertyTemplateItem.functionType,
          codeNo: this.propertyTemplateItem.codeNo,
          propertiesItemNo: item.propertiesItemNo,
          createBy: this.$store.state.user.name,
          headerId: this.propertyTemplateItem.id,
        }
      })
      batchSavePropertyTemplateDetail(params)
        .then(({ data }) => {
          if (data && data.code === 0) {
            this.$message.success(data.msg)
            this.handleQueryItem()
            this.handleQueryPropertyTemplateDetail()
          } else {
            this.$message.warning(data.msg)
          }
        })
        .catch((error) => {
          this.$message.error(error)
        })
    },
    handleRemoveBatchItem() {
      if (this.selectionList2.length === 0) {
        this.$message.warning('请选择属性项目')
        return
      }
      this.$confirm('确认删除该属性项目吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          let params = this.selectionList2.map((item) => {
            return {
              id: item.id,
            }
          })
          removeBatchPropertyTemplateDetail(params)
            .then(({ data }) => {
              if (data && data.code === 0) {
                this.$message.success(data.msg)
                this.handleQueryItem()
                this.handleQueryPropertyTemplateDetail()
              } else {
                this.$message.warning(data.msg)
              }
            })
            .catch((error) => {
              this.$message.error(error)
            })
        })
        .catch(() => {})
    },
    handleQueryPropertyTemplateDetail() {
      let params = {
        headerId: this.propertyTemplateItem.id,
      }
      queryPropertyTemplateDetail(params)
        .then(({ data }) => {
          if (data && data.code === 0) {
            this.itemList2 = data.list
          } else {
            this.$message.warning(data.msg)
          }
        })
        .catch((error) => {
          this.$message.error(error)
        })
    },
    handleRemoveItem(row) {
      this.$confirm('确认删除该属性项目吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          let params = {
            id: row.id,
          }
          removePropertyTemplateDetail(params)
            .then(({ data }) => {
              if (data && data.code === 0) {
                this.$message.success(data.msg)
                this.handleQueryPropertyTemplateDetail()
              } else {
                this.$message.warning(data.msg)
              }
            })
            .catch((error) => {
              this.$message.error(error)
            })
        })
        .catch(() => {})
    },
    updateItemSort(row, index, type) {
      let currentSort = row.orderId
      console.log('1111', index, type)
      let nexRow = { ...this.itemList2[index + type] }
      let current = { ...row }
      current.orderId = nexRow.orderId
      nexRow.orderId = currentSort
      let params = [current, nexRow]
      batchUpdatePropertyTemplateDetail(params)
        .then(({ data }) => {
          if (data && data.code === 0) {
            this.$message.success(data.msg)
            this.handleQueryPropertyTemplateDetail()
          } else {
            this.$message.warning(data.msg)
          }
        })
        .catch((error) => {
          this.$message.error(error)
        })
    },
    handleChooseValue(row) {
      this.availableForm = {
        itemNo: row.itemNo,
        itemDesc: row.itemDesc,
        itemId: row.itemId,
      }
      this.handleQueryPropertyItemAvailable()
      this.valueChooseFlagVisible = true
    },
    handleQueryPropertyItemAvailable() {
      let params = {
        itemId: this.availableForm.itemId,
      }
      queryPropertyItemAvailable(params)
        .then(({ data }) => {
          if (data && data.code === 0) {
            this.availableList = data.rows
          } else {
            this.$message.warning(data.msg)
          }
        })
        .catch((error) => {
          this.$message.error(error)
        })
    },
    getSiteByUserName() {
      let params = {
        username: this.$store.state.user.name,
      }
      getSiteByUserName(params)
        .then(({ data }) => {
          if (data && data.code === 0) {
            this.userSiteList = data.list
            this.$set(
              this.saveForm,
              'site',
              this.userSiteList.length > 0 ? this.userSiteList[0].deptId : ''
            )
          } else {
            this.$message.warning(data.msg)
          }
        })
        .catch((error) => {
          this.$message.error(error)
        })
    },
    getRoleSelect() {
      let params = {}
      getRoleSelect(params)
        .then(({ data }) => {
          if (data && data.code === 0) {
            this.roleIdList = data.list
          } else {
            this.$message.warning(data.msg)
          }
        })
        .catch((error) => {
          this.$message.error(error)
        })
    },
    //批量保存所有项目清单
    itemListBatchSave() {
      let nexRow = this.itemList2
      this.itemListLoading = true
      batchUpdatePropertyTemplateDetail(nexRow)
        .then(({ data }) => {
          if (data && data.code === 0) {
            this.$message.success(data.msg)
            this.itemVisible = false
            this.handleQueryByPage()
          } else {
            this.$message.warning(data.msg)
          }
        })
        .catch((error) => {
          this.$message.error(error)
        })
        .finally(() => {
          this.itemListLoading = false
        })
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQueryByPage()
    },
  },
}
</script>

<!-- <style scoped lang="scss">
改变字典中的样式
.el-tag {
  background-color: transparent!important;
  color: red!important;
  border: 0px!important;
}
.itemListClass {
  
/deep/.tableBox {
  th {
    padding: 0 !important;
    height: 10px;
    line-height: 10px;
  }
  td {
    padding: 0 !important;
    height: 30px;
    line-height: 30px;
  }
 }
}
</style> -->
<style scoped>
/deep/ .itemListClass .cell {
  line-height: 20px;
  font-size: 12px;
  height: 20px;
}
</style>