diantou/src_product/iam/audit/maintain/audit-false-problem.vue

<template>
  <div :class="$style.wrapHeight">
    <div :class="$style.rowHeight">
      <audit-advanced-query
        :expand="expand"
        :search-data="searchData"
        :ref-name="searchform"
        :search-style="{ height: '230px', left: '20px', top: '57px' }"
        :search-fun="handleSearch"
        @searchedClick="searchedClick"
      >
        <!-- 插槽放置搜索内容 -->
        <template>
          <a-row>
            <!-- <a-col :span="12">
              <a-form-model-item :label="'非问题标签编号'" prop="code">
                <a-input v-model="searchData.code" allow-clear />
              </a-form-model-item>
            </a-col> -->
            <a-col :span="12">
              <a-form-model-item :label="'非问题标签名称'" prop="name">
                <a-input v-model="searchData.name" allow-clear />
              </a-form-model-item>
            </a-col>
          </a-row>

          <a-col :span="12">
            <a-form-model-item :label="'时间'" prop="operationTime">
              <a-range-picker v-model="searchData.operationTime" />
            </a-form-model-item>
          </a-col>
        </template>
      </audit-advanced-query>
      <a-card>
        <SdDataTableEx
          ref="sddataTable"
          :form-id="formId"
          :page-id="pageId"
          :data-url="dataUrl"
          :columns="columns"
          :actions="actions"
          :filter-expressions="expressions"
          show-selection
          :search-fields="['name']"
          :show-advance-query="true"
          @searchbtnClick="searchbtnClick"
        >
          <!-- 表格列 -->
          <template slot="link" slot-scope="text, record">
            <a @click="showFormModal(record.id)">{{ text }}</a>
          </template>
          <!-- 插槽放置表格内容 -->
          <template v-slot:form="{ model }" v-sd-watermark="waterMark" @saved="onSaved">
            <!-- <sdFormItem name="" /> -->
            <!-- code name description -->
            <!-- <SdFormItem name="code" label="非问题标签编号" /> -->
            <SdFormItem name="name" label="非问题标签名称" />
            <SdFormItem name="type" label="非问题标签类型" />
            <SdFormItem name="description" label="非问题标签内容">
              <a-textarea v-model="model.description" />
            </SdFormItem>
          </template>
        </SdDataTableEx>
      </a-card>
    </div>
  </div>
</template>

<script>
// 筛选组件
import auditAdvancedQuery from '../../components/audit-advanced-query.vue'
import auditAdvancedQueryMixins from '../../components/audit-advanced-query-mixins'
// 表格组件 + 表格扩展组件
import SdDataTableEx from '@/common/components/sd-data-table-ex.vue'
// 表格按钮类型
import TableActionTypes from '@/common/services/table-action-types'
import TableColumnTypes from '@/common/services/table-column-types'
// 请求
import SdFormItem from '@/common/components/sd-form-item.vue'
export default {
  // 大驼峰文件名
  name: 'AuditFalseProblem',
  metaInfo: {
    // 页面标题
    title: '非问题说明',
  },
  components: {
    // 引入组件
    SdFormItem,
    SdDataTableEx,
    auditAdvancedQuery,
  },
  mixins: [auditAdvancedQueryMixins],
  data() {
    return {
      // 搜索条件
      searchData: {
        name: '',
        // code: '',
        operationTime: [],
      },
      // 搜索接口传参
      expressions: [],
      // 搜索组件ref
      searchform: 'searchform',
      // 搜索条件展开
      expand: false,
      // 列表请求地址
      dataUrl: 'api/xcoa-mobile/v1/iam-page/businessList',
      // pageId
      pageId: 'audit/maintain/iamProblemStatement',
      // formId
      formId: 'iamProblemStatement',
      // 表头
      columns: [
        {
          title: '序号',
          dataIndex: 'sortNumber',
          width: '80px',
          customRender: (text, record, index) => `${index + 1}`,
        },
        // code name description
        {
          title: '非问题标签编号',
          dataIndex: 'id',
        },
        {
          title: '非问题标签名称',
          dataIndex: 'name',
          scopedSlots: { customRender: 'link' },
        },
        {
          title: '非问题标签类型',
          dataIndex: 'type',
        },
        {
          title: '非问题标签内容',
          dataIndex: 'description',
        },
        {
          title: '创建时间',
          dataIndex: 'creationTime',
          sdRender: TableColumnTypes.date,
        },
      ],

      // 按钮
      actions: [
        {
          label: '新增',
          id: 'create',
          permission: 'create',
          type: TableActionTypes.primary,
          callback: this.showFormModal,
        },
        // 删除
        {
          label: '删除',
          id: 'delete',
          type: TableActionTypes.ex.delete, // 删除按钮，不需要回调，会自动处理（对sd-data-table无效）
        },
      ],
      // 表单提交地址
      pagePath: 'audit/maintain/iamProblemStatement',
      // 领域数据
      areaOption: [],
    }
  },

  methods: {
    // 搜索方法
    handleSearch() {
      // 搜索条件
      this.expressions = []
      const searchDataKeys = Object.keys(this.searchData)
      searchDataKeys.map((item) => {
        if (item !== 'operationTime' && this.searchData[item] !== '') {
          this.expressions.push({
            dataType: 'str',
            name: item,
            op: 'like',
            stringValue: `%${this.searchData[item]}%`,
          })
        }
      })
      if (this.searchData.operationTime.length === 2) {
        this.searchData.operationTime.map((item, index) => {
          this.expressions.push({
            dataType: 'long',
            name: 'creationTime',
            op: index === 0 ? 'ge' : 'lt',
            longValue: item._d.getTime(),
          })
        })
      }
    },
    // 显示表单
    showFormModal(id = null) {
      this.$refs.sddataTable.showDetailModal(id, this.pagePath)
    },
  },
}
</script>

<style lang="scss" module>
@use '@/common/design' as *;
.wrap-height {
  height: 100%;
  .row-height {
    position: relative;
    display: flex;
    flex: auto;
    height: 100%;
    .rightcard {
      flex: 1;
      width: calc(100% - 20%);
      height: 100%;
    }
  }
}
</style>