crm_extend/src/pages/indent-manage/indent/list.vue

<template>
  <div class="page-indent-list py-4 px-2 shadow max-w-[1800px] mx-auto">
    <el-form
      ref="searchForm"
      v-loading="loading"
      :inline="true"
      :model="form"
      label-width="120px"
    >
      <div class="flex flex-wrap items-center search-form">
        <el-form-item :label="$t(prefix + 'label_project_name') + ':'">
          <el-input v-model="form.deal_name"></el-input>
        </el-form-item>

        <el-form-item :label="$t(prefix + 'label_customer_name') + ':'">
          <el-input v-model="form.custom_name"></el-input>
        </el-form-item>

        <el-form-item :label="$t(prefix + 'label_product_name') + ':'">
          <el-input v-model="form.product_name"></el-input>
        </el-form-item>

        <el-form-item
          :label="$t(prefix + 'label_supplier_product') + ':'"
          label-width="130px"
        >
          <el-input
            v-model="form.enquiry_product_name"
            style="width: 180px"
          ></el-input>
        </el-form-item>

        <el-form-item :label="$t(prefix + 'label_category') + ':'">
          <el-select v-model="form.product_category">
            <el-option
              v-for="item in categoryOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item :label="$t(prefix + 'label_supplier') + ':'">
          <el-input v-model="form.vendor_name"></el-input>
        </el-form-item>

        <el-form-item :label="$t(prefix + 'label_print_method') + ':'">
          <el-select v-model="form.print_method">
            <el-option
              v-for="item in printOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item :label="$t(prefix + 'label_require_material') + ':'">
          <el-select v-model="form.require_material">
            <el-option
              v-for="item in materialOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="SKU: ">
          <el-input v-model="form.product_sku"></el-input>
        </el-form-item>

        <el-form-item :label="$t(prefix + 'label_number') + ':'">
          <div class="flex justify-between items-center">
            <el-input
              v-model="form.number_min"
              style="width: 80px"
            ></el-input>
            <span>&nbsp;-&nbsp;</span>
            <el-input
              v-model="form.number_max"
              style="width: 80px"
            ></el-input>
          </div>
        </el-form-item>

        <el-form-item
          :label="$t('table_created_time') + ':'"
          label-width="100px"
        >
          <el-date-picker
            v-model="form.date_range"
            style="width: 210px; padding-right: 0"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            type="daterange"
            range-separator="~"
            :start-placeholder="$t(prefix + 'ph_time_start')"
            :end-placeholder="$t(prefix + 'ph_time_end')"
          ></el-date-picker>
        </el-form-item>

        <el-form-item :label="$t(prefix + 'label_quoter') + ':'">
          <el-select
            v-model="form.creator"
            filterable
          >
            <el-option
              v-for="item in creatorOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item :label="$t(prefix + 'label_status') + ':'">
          <el-select v-model="form.status">
            <el-option
              v-for="item in stateOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <div class="flex items-center btn-group">
          <el-button
            type="primary"
            @click="search"
          >
            {{ $t('btn_search') }}
          </el-button>
          <el-button
            type="success"
            @click="create"
          >
            {{ $t(prefix + 'btn_new_indent') }}
          </el-button>

          <el-button
            :disabled="checkedQuotes.length < 1"
            type="primary"
            @click="quota"
          >
            {{ $t(prefix + 'btn_quote') }}
          </el-button>
          <el-button
            :disabled="checkedIndent.length < 1 && checkedQuotes.length < 1"
            type="danger"
            @click="onDeleteIndent"
          >
            {{ $t('btn_delete') }}
          </el-button>
          <el-button @click="reset">
            {{ $t('btn_reset') }}
          </el-button>
          <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
          <el-button
            type="warning"
            @click="componentFreightVisible = true"
          >
            {{ $t(prefix + 'btn_set_freight') }}
          </el-button>
        </div>
      </div>
    </el-form>

    <el-table
      ref="tableIndent"
      v-loading="loading"
      :header-cell-style="{ backgroundColor: '#F2F6FC' }"
      :row-style="{ backgroundColor: '#F2F6FC' }"
      :data="indentList"
      default-expand-all
      border
    >
      <!-- 子表格内容 -->
      <el-table-column type="expand">
        <template #default="props">
          <el-table
            v-if="props.row.lists && props.row.lists.length"
            :ref="`tableSubIndent-${props.row.id}`"
            :data="props.row.lists"
            class="tableSubIndent"
            :class="`tableSubIndent-${props.row.id}`"
            :row-class-name="
              ({ row }) => {
                return props.row.default_quote === row.id
                  ? 'default-quote-row'
                  : 'ddd-ddd'
              }
            "
            style="margin-left: 48px"
            stripe
            border
          >
            <el-table-column
              v-for="value in subTableConfig"
              :key="value.field"
              :align="value.align || 'center'"
              :width="value.width || ''"
              :prop="value.field"
              :label="$t(value.label)"
            >
              <template #default="scope">
                <div v-if="value.type === 'checkbox'">
                  <el-checkbox
                    v-model="scope.row[value.field]"
                    @change="($e) => onSubSelect($e, props.row)"
                  ></el-checkbox>
                </div>
                <div
                  v-else-if="value.type === 'imageList'"
                  class="table-img-wrap"
                  :style="{
                    width: `${Number(value.width) - 20}px`,
                  }"
                >
                  <el-tooltip content="点击可查看大图">
                    <img
                      style="width: 100%; cursor: pointer"
                      :src="scope.row[value.field][0]"
                      @click="imgClick(scope.row[value.field][0])"
                    />
                  </el-tooltip>
                </div>
                <div
                  v-else-if="value.field === 'vendor_name'"
                  style="text-align: left"
                >
                  <div>{{ scope.row[value.field] }}</div>
                  <div v-show="scope.row.vendor_contact">
                    联系人:&nbsp;{{ scope.row.vendor_contact }}
                  </div>
                  <div v-show="scope.row.vendor_phone">
                    联系电话:&nbsp;{{ scope.row.vendor_phone }}
                  </div>
                </div>
                <el-tooltip
                  v-else
                  :content="$t(value.label)"
                >
                  <div
                    class="table-cell-content"
                    :style="value.style || {}"
                  >
                    {{ scope.row[value.field] }}
                  </div>
                </el-tooltip>
              </template>
            </el-table-column>

            <el-table-column
              prop="status"
              width="280"
              :label="$t('table_operation')"
            >
              <template #default="scope">
                <el-button
                  size="small"
                  type="warning"
                  @click="editInfo(scope.row)"
                >
                  {{ $t('btn_edit') }}
                </el-button>
                <el-button
                  size="small"
                  type="primary"
                  @click="valuation(scope.row)"
                >
                  {{ $t(prefix + 'btn_calc_price') }}
                </el-button>
                <el-button
                  v-if="props.row.default_quote !== scope.row.id"
                  size="small"
                  type="success"
                  :disabled="props.row.default_quote === scope.row.id"
                  @click="adopt(scope.row, props.row)"
                >
                  {{
                    props.row.default_quote === scope.row.id
                      ? $t(prefix + 'btn_adopted')
                      : $t(prefix + 'btn_adopt')
                  }}
                </el-button>
                <el-button
                  v-if="props.row.default_quote === scope.row.id"
                  size="small"
                  type="warning"
                  @click="onBtnChangeOrderClick(scope.row, props.row)"
                >
                  转单
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div
            v-else
            class="flex justify-center items-center"
          >
            <div>暂无报价</div>
          </div>
        </template>
      </el-table-column>
      <!-- 子表格内容 end -->
      <!-- 主表格 内容 -->

      <el-table-column
        v-for="value in mainTableConfig"
        :key="value.field"
        :align="value.align || 'center'"
        :width="value.width || ''"
        :prop="value.field"
        :label="$t(value.label)"
      >
        <template
          v-if="value.type === 'checkbox'"
          #header
        >
          <el-checkbox
            v-model="checkedAll"
            @change="onSelectAll"
          ></el-checkbox>
        </template>
        <template #default="scope">
          <div v-if="value.type === 'checkbox'">
            <el-checkbox
              v-model="scope.row[value.field]"
              @change="($e) => onSelect($e, scope.$index)"
            ></el-checkbox>
          </div>
          <el-tooltip
            v-else-if="value.field === 'quote_name'"
            :content="$t(value.label) + ', 双击可编辑'"
          >
            <div
              class="table-cell-content"
              :style="value.style || {}"
              @dblclick="onEdit(scope.row)"
            >
              {{ scope.row[value.field] }}
            </div>
          </el-tooltip>
          <el-tooltip
            v-else
            :content="$t(value.label)"
          >
            <div
              class="table-cell-content"
              :style="value.style || {}"
            >
              {{ scope.row[value.field] }}
            </div>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <div class="flex justify-end my-4">
      <el-pagination
        v-show="total > 0"
        v-model:current-page="pageForm.page"
        v-model:page-size="pageForm.limit"
        v-model:total="total"
        layout="prev, pager, next, jumper, sizes"
        @current-change="getList"
        @size-change="getList"
      />
    </div>
    <edit
      v-model:visible="componentEditVisible"
      :indent-data="indentData"
      :quota-data="quotaData"
      :category-options="categoryOptions"
      :print-options="printOptions"
      :material-options="materialOptions"
      @create="getList"
    ></edit>
    <freight v-model:visible="componentFreightVisible"></freight>

    <compEditInfo
      v-model:visible="componentEditInfoVisible"
      :data-for-edit="quoteForEdit"
      :parent-id="infoParentId"
      @create="getList"
    ></compEditInfo>

    <calcPrice
      v-model:visible="componentCalcPriceVisible"
      :creator-options="creatorOptions"
      :data-for-calc="quoteForEdit"
      @save-price-calc="getList"
    ></calcPrice>
    <el-dialog
      v-model="bigImageVisible"
      style="margin: 5vh auto"
      width="800"
    >
      <div class="flex justify-center">
        <img
          :src="currentBigImage"
          style="max-width: 100%; height: auto"
          alt=""
        />
      </div>
    </el-dialog>
    <dialogQuoteRecord
      :id="changeOrderID"
      :indent-data="indentData"
      v-model:visible="dialogChangeOrderVisible"
      @success="onDialogChangeOrderClose"
    ></dialogQuoteRecord>
  </div>
</template>

<script setup lang="ts">
import { defineComponent, ref, computed, watch, inject } from 'vue'
import {
  ElButton,
  ElForm,
  ElFormItem,
  ElInput,
  ElTable,
  ElTableColumn,
  ElSelect,
  ElOption,
  ElMessageBox,
  ElTooltip,
  ElNotification,
  ElPagination,
  ElDatePicker,
  ElCheckbox,
  ElDialog,
} from 'element-plus'
import { $t } from '@/i18n/index'
import {
  getIndentList,
  getCreator,
  deleteIndent,
  cloneQuote,
  setDefaultQuote,
} from '@/api/indent'
import userAPI from '@/api/user'
import edit from './edit.vue'
import freight from './components/freight.vue'
import compEditInfo from './components/info.vue'
import calcPrice from './components/calcPrice/index.vue'
import dialogQuoteRecord from './components/quoteRecord.vue'

defineComponent({
  name: 'PageIndentList',
})
const $mediaRegExp = inject('mediaRegExp') as RegExp
const prefix = 'order.indent.'
const form = ref({
  product_name: '',
  product_sku: '',
  deal_name: '',
  custom_name: '',
  product_category: '',
  require_material: '',
  print_method: '',
  date_range: [],
  creator: '',
  enquiry_product_name: '',
  vendor_name: '',
  number_min: '',
  number_max: '',
  status: '',
})

const total = ref(0)
const pageForm = ref({
  page: 1,
  limit: 20,
})
const categoryOptions = [
  {
    label: $t('text_please_select'),
    value: '',
  },
  {
    label: 'Lanyards',
    value: 'Lanyards',
  },
  {
    label: 'PIN BADGES',
    value: 'PIN BADGES',
  },
  {
    label: 'WRISTBANDS',
    value: 'WRISTBANDS',
  },
  {
    label: 'KEYRINGS',
    value: 'KEYRINGS',
  },
  {
    label: 'NEOPRENE',
    value: 'NEOPRENE',
  },
  {
    label: 'STATIONERY',
    value: 'STATIONERY',
  },
  {
    label: 'LIFESTYLE',
    value: 'LIFESTYLE',
  },
  {
    label: 'POS',
    value: 'POS',
  },
  {
    label: '其它',
    value: '其它',
  },
]
const printOptions = [
  {
    label: $t('text_please_select'),
    value: '',
  },
  {
    label: '全彩印刷',
    value: '全彩印刷',
  },
  {
    label: '专色印刷',
    value: '专色印刷',
  },
  {
    label: '热转印',
    value: '热转印',
  },
  {
    label: '丝印',
    value: '丝印',
  },
  {
    label: '镭雕',
    value: '镭雕',
  },
  {
    label: '凹印',
    value: '凹印',
  },
  {
    label: '刺绣',
    value: '刺绣',
  },
  {
    label: '其它',
    value: '其它',
  },
]
const materialOptions = [
  {
    label: $t('text_please_select'),
    value: '',
  },
  {
    label: '布料',
    value: '布料',
  },
  {
    label: '塑料',
    value: '塑料',
  },
  {
    label: '纸质',
    value: '纸质',
  },
  {
    label: '五金',
    value: '五金',
  },
  {
    label: '其它',
    value: '其它',
  },
]
const stateOptions = [
  {
    label: '全部',
    value: '',
  },
  {
    label: '未报价',
    value: '0',
  },
  {
    label: '已报价',
    value: '1',
  },
]
const mainTableConfig: any[] = [
  {
    type: 'checkbox',
    field: 'checked',
    width: '55',
  },
  {
    label: 'Reference',
    field: 'Reference',
    width: '110',
  },
  {
    label: 'order.indent.table_indent_name',
    field: 'quote_name',
    style: 'cursor: default',
  },
  {
    label: 'order.indent.label_project_name',
    field: 'deal_name',
    width: '120',
  },
  {
    label: 'order.indent.label_customer_name',
    field: 'custom_name',
    width: '180',
  },
  {
    label: 'order.indent.label_product_name',
    field: 'product_name',
  },
  {
    label: 'order.indent.label_status',
    field: 'status',
    width: '80',
    style: 'font-weight: bold;',
  },
  {
    label: 'order.indent.table_creator',
    field: 'creator',
    width: '90',
    style: 'font-weight: bold;',
  },
  {
    label: 'table_created_time',
    field: 'create_time',
    width: '120',
  },
]
const subTableConfig: any = [
  {
    type: 'checkbox',
    field: 'checked',
    width: '55',
  },
  {
    label: 'order.indent.table_image',
    type: 'imageList',
    width: '80',
    field: 'product_image',
  },
  {
    label: 'order.indent.table_supplier',
    field: 'vendor_name',
  },
  {
    label: 'order.indent.table_url',
    field: 'product_url',
  },
  {
    label: 'order.indent.table_price',
    field: 'quote_price',
    width: '75',
  },
  {
    label: 'order.indent.label_number',
    field: 'quote_num',
    width: '150',
  },
  {
    label: 'order.indent.table_days',
    field: 'large_days',
    width: '90',
  },
  {
    label: 'order.indent.label_quoter',
    field: 'creator',
    width: '90',
    style: 'font-weight: bold;',
  },
  {
    label: 'table_updated_time',
    field: 'update_time',
    width: '115',
  },
]
const componentEditVisible = ref(0) // 1 新增, 2编辑. 0关闭
const componentFreightVisible = ref(false) // 设置运费参数
const componentEditInfoVisible = ref(0) // 编辑报价信息
const componentCalcPriceVisible = ref(false) // 计价
const indentData = ref({}) // 修改询价和转单的时候使用, 记录的是询价的行数据.
const quoteForEdit = ref({}) // 修改和计价时共用, 只是用作传递给子组件数据的变量
const infoParentId = ref(0)
const loading = ref(false)
const checkedAll = ref(false)
const quotaData = ref({}) // 引用报价信息后得到的克隆数据, 传递给创建询价组件, 当作新创建的报价信息.

const indentList = ref([] as any[])

const checkedQuotes = computed(() => {
  return indentList.value.reduce((total: any, current: any) => {
    if (current.lists?.length) {
      current.lists.forEach((i: any) => {
        if (i.checked) {
          total.push(i)
        }
      })
    }
    return total
  }, [])
})

const checkedIndent = computed(() => {
  return indentList.value.filter((i: any) => i.checked)
})

const getList = function () {
  quotaData.value = {} // 重置引用数据, 否则创建询价完成之后再次创建询价, 会把之前的引用数据再次带到创建询价组件

  const timeSeparator = '～'
  const temp = JSON.parse(JSON.stringify(form.value))
  const p = Object.assign({}, temp, pageForm.value)
  // 组装日期范围数据
  if (Array.isArray(p.date_range) && p.date_range.length) {
    p.date_range = p.date_range.join(timeSeparator)
  } else {
    p.date_range = ''
  }
  loading.value = true

  // const getlist = function () {
  getIndentList(p)
    .then((res: any) => {
      indentList.value =
        res.result?.data.map((main: any) => {
          return {
            ...main,
            create_time: main.create_time.split(' ')[0],
            checked: false,

            lists: main.lists.map((i: any) => {
              const temp = { ...i, checked: false }

              if (
                Array.isArray(temp.product_image) &&
                temp.product_image.length
              ) {
                temp.product_image = temp.product_image.map((img: string) =>
                  $mediaRegExp.test(img)
                    ? img
                    : import.meta.env.VITE_APP_OSS_PREFIX + img,
                )
              } else {
                temp.product_image = []
              }

              return temp
            }),
          }
        }) || []

      total.value = res.result.total
    })
    .finally(() => {
      loading.value = false
    })
}

const creatorOptions = ref([] as any[])
// 获取报价人下拉框候选数据.
const getCreatorOption = function () {
  getCreator().then((res: any) => {
    creatorOptions.value = res.result.map((i: any) => {
      return { label: i.username, value: i.id }
    })
    creatorOptions.value.unshift({
      label: $t(prefix + 'ph_quoter'),
      value: '',
    })
  })
}

const search = function () {
  pageForm.value = {
    page: 1,
    limit: 20,
  }
  getList()
}

const create = function () {
  componentEditVisible.value = 1
}
const onEdit = function (row: any) {
  quotaData.value = {}
  indentData.value = row
  componentEditVisible.value = 2
}

const quota = function () {
  const ids = checkedQuotes.value.map((i: any) => i.id)
  cloneQuote({ ids }).then((response: any) => {
    if (response.code === 1) {
      quotaData.value = response.result
      create()
    }
  })
}
const onDeleteIndent = function () {
  ElMessageBox.confirm('将删除该报价, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    const p = {
      indent_ids: checkedIndent.value.map((i: any) => `${i.id}`), // 询价id
      quote_ids: checkedQuotes.value.map((i: any) => `${i.parent_id}_${i.id}`), // 报价id数据. 单个格式为 '询价id_报价id'
    }
    deleteIndent(p).then((response: any) => {
      if (response.code === 1) {
        getList()
        ElNotification({
          title: '删除成功',
          message: '删除成功',
          duration: 3000,
        })
      }
    })
  })
}
const reset = function () {
  form.value = {
    product_name: '',
    product_sku: '',
    deal_name: '',
    custom_name: '',
    product_category: '',
    require_material: '',
    print_method: '',
    date_range: [],
    creator: '',
    enquiry_product_name: '',
    vendor_name: '',
    number_min: '',
    number_max: '',
    status: '',
  }
  pageForm.value = {
    page: 1,
    limit: 20,
  }
  total.value = 0
  getList()
}
const editInfo = function (row: any) {
  infoParentId.value = row.parent_id
  quoteForEdit.value = row
  componentEditInfoVisible.value = 2
}
// 计价
const valuation = function (row: any) {
  quoteForEdit.value = row
  componentCalcPriceVisible.value = true
}
// 采纳
const adopt = function (row: any, parentRow: any) {
  const p = {
    id: parentRow.id,
    quote_id: row.id,
  }
  setDefaultQuote(p).then((res: any) => {
    if (res.code === 1) {
      ElNotification({
        type: 'success',
        title: '操作成功',
        message: '正在刷新数据',
        duration: 3000,
      })
    } else {
      ElNotification({
        type: 'error',
        title: '操作出错了',
        message: '请稍后重试, 或者联系管理员',
        duration: 3000,
      })
    }
    getList()
  })
}
const onSelect = function (bool: any, index: number) {
  // console.log('onSelect', bool, index)
  // 每次勾选主表的某行, 立刻计算主表的全选
  checkedAll.value = indentList.value.every((i) => i.checked)

  // 勾选主表格的某行, 将该行所属的 子表格 给全部勾选/取消勾选
  indentList.value[index].lists = indentList.value[index].lists.map(
    (i: any) => {
      return {
        ...i,
        checked: bool,
      }
    },
  )
}
// 主表格全勾选, 遍历数据将所有子表格全勾选
const onSelectAll = function (boolean: any) {
  // console.log('onSelectAll', boolean)
  indentList.value = indentList.value.map((i: any) => {
    return {
      ...i,
      checked: boolean,
      lists: i.lists.map((j: any) => {
        return {
          ...j,
          checked: boolean,
        }
      }),
    }
  })
}

// 勾选子表格的某行
const onSubSelect = function (bool: any, row: any) {
  // console.log('onSelect-sub', bool, row)
  // 判断该行对应 在主表的父行 的勾选状态
  row.checked = row.lists.every((i: any) => i.checked)

  // 变更主表某行的勾选状态后, 立刻计算主表的全选
  checkedAll.value = indentList.value.every((i: any) => i.checked)
}
getList()
getCreatorOption()

const currentBigImage = ref('')
const bigImageVisible = ref(false)
const imgClick = (url: string) => {
  currentBigImage.value = url
  bigImageVisible.value = true
}
watch(bigImageVisible, () => {
  if (!bigImageVisible.value) currentBigImage.value = ''
})

const changeOrderID = ref('')
const dialogChangeOrderVisible = ref(false)
const onBtnChangeOrderClick = (row: any, parentRow: any) => {
  // console.log(row, 'row', parentRow, 'parentRow')
  if (['Temporary Indent Product', '申请中'].includes(parentRow.product_sku)) {
    ElNotification({
      type: 'warning',
      title: '提示',
      message: `SKU在申请中无法直接转单, 需要联系: ${auditUser.value}`,
      duration: 6000,
    })
  } else {
    if (parentRow.crm_so_id) {
      ElMessageBox.confirm(
        '当前报价已转单, 如果二次转单将会全面覆盖之前的SO',
        '提示',
        {
          confirmButtonText: '确定重新转单',
          cancelButtonText: '取消',
          type: 'warning',
        },
      ).then(() => {
        changeOrderID.value = row.id
        indentData.value = parentRow
        dialogChangeOrderVisible.value = true
      })
    } else {
      changeOrderID.value = row.id
      indentData.value = parentRow
      dialogChangeOrderVisible.value = true
    }
  }
}
const onDialogChangeOrderClose = () => {
  getList()
  dialogChangeOrderVisible.value = false
  changeOrderID.value = ''
  indentData.value = {}
}
watch(dialogChangeOrderVisible, () => {
  if (!dialogChangeOrderVisible.value) {
    indentData.value = {}
    changeOrderID.value = ''
  }
})

const auditUser = ref('')
const getCurrentAuditUser = () => {
  userAPI.getAuditUser().then((res: any) => {
    // console.log(res, 'res')
    if (
      res.code === 1 &&
      Array.isArray(res.result.data) &&
      res.result.data.length
    ) {
      const temp = res.result.data.filter((i: any) => i.type === 2)
      // console.log(temp, 'temp')
      if (temp.length) auditUser.value = temp[0].email
    }
  })
}
getCurrentAuditUser()
</script>

<style lang="scss">
.page-indent-list {
  .default-quote-row {
    color: #ef4135;
  }
}
</style>
<style lang="scss" scoped>
.search-form {
  .el-form-item {
    width: 310px;
  }

  .el-input,
  .el-select,
  .el-date-editor {
    width: 190px;
  }
  .btn-group {
    margin: 0 0 22px 8px;
  }
}
.table-cell-content {
  word-break: break-word;
}
</style>