供应商模块

src/components/my-modal-form/my-modal-form.vue

@@ -1,275 +1,402 @@
 <!-- 通用弹窗表单 -->
 <template>
-  <div>
-    <Modal
-      v-model="modal"
-      :width="width"
-      :mask-closable="false"
-      @on-cancel="cancel"
-      class-name="vertical-center-modal"
-    >
-      <div class="title" slot="header">
-        {{ title }}
-      </div>
-      <div slot="footer" class="footer" v-if="type !== 'form'">
-        <Button @click="cfm" class="btn" type="primary">提交</Button>
-        <Button @click="cancel" class="btn">取消</Button>
-      </div>
-      <div slot="footer" class="footer" v-else>
-        <Button @click="cancel" class="btn" type="primary">关闭</Button>
-      </div>
-      <div class="content">
-        <Form ref="form" :model="formData" :rules="ruleValidate">
-          <Col
-            :span="item.span || '24'"
-            v-for="(item, index) in config"
-            :key="index"
-          >
-            <FormItem
-              :prop="item.key"
-              :label="item.label + '：'"
-              :label-width="item.hiddenLabel ? 0 : 100"
-            >
-              <!-- 自定义标签 -->
-              <div slot="label">
-                {{ item.hiddenLabel ? '' : item.label + '：' }}
-              </div>
-              <!-- 输入框 -->
-              <Input
-                v-if="item.type === 'input'"
-                v-model="formData[item.key]"
-                :placeholder="item.placeholder"
-                :type="item.comType"
-                :disabled="item.disabled"
-              />
-              <!-- 日期选择 -->
-              <DatePicker
-                v-if="item.type === 'date'"
-                v-model="formData[item.key]"
-                @on-change="handleDateChange(item.key)"
-                :transfer="true"
-                :type="item.comType"
-                format="yyyy-MM-dd"
-                :placeholder="item.placeholder"
-                style="width: 100%"
-              >
-              </DatePicker>
-              <!-- 下拉框 -->
-              <Select
-                v-if="item.type === 'select'"
-                :transfer="true"
-                v-model="formData[item.key]"
-                style="max-width: 400px;"
-                :disabled="item.disabled"
-              >
-                <Option
-                  v-for="option in item.list"
-                  :value="option.value"
-                  :key="option.value"
-                  >{{ option.label || '未知' }}</Option
-                >
-              </Select>
-              <!-- 树下拉框 -->
-              <my-tree-select
-                ref="myTreeSelect"
-                v-if="item.type === 'treeSelect'"
-                v-model="formData[item.key]"
-                :treeData="item.list"
-              ></my-tree-select>
-              <!-- 搜索下拉框 -->
-              <Select
-                v-if="item.type === 'selectSearch'"
-                filterable
-                :transfer="true"
-                v-model="formData[item.key]"
-                style="max-width: 400px;"
-                :disabled="item.disabled"
-              >
-                <Option
-                  v-for="option in item.list"
-                  :value="option.value"
-                  :key="option.value"
-                  >{{ option.label || '未知' }}</Option
-                >
-              </Select>
-              <!-- 单选框 -->
-              <RadioGroup
-                v-if="item.type === 'radio'"
-                v-model="formData[item.key]"
-              >
-                <Radio
-                  :label="radio.value"
-                  v-for="radio in item.list"
-                  :key="radio.value"
-                >
-                  <span>{{ radio.label }}</span>
-                </Radio>
-              </RadioGroup>
-              
-              <!-- 图片上传 -->
-              <div
-                class="upload-input"
-                v-if="item.type === 'upload' && !item.disabled"
-              >
-                <Input v-model="formData[item.key]" />
-                <Upload
-                  ref="upload"
-                  :before-upload="uploadOther"
-                  :format="['jpg', 'jpeg', 'png']"
-                  accept=".jpg,.png,.jpeg"
-                  action=""
-                  style="display: flex;align-items: center"
-                >
-                  <Button
-                    type="primary"
-                    style="width: 120px;height: 32px;border-radius: 0 4px 4px 0 ;"
-                    >{{ item.text }}</Button
-                  >
-                </Upload>
-              </div>
-              <div class="upload-flie" v-if="item.type === 'upload-flie'">
-                <Upload
-                  ref="upload-flie"
-                  :before-upload="(flie)=>upload(flie,item)"
-                  :format="['jpg','jpeg','png']"
-                  accept=".jpg,.png,.jpeg"
-                  action=""
-                  style="display: inline">
-                  <Tooltip :content="item.text">
-                      <Button type="primary">上传图片</Button>
-                  </Tooltip>
-                  <span>{{formData[item.key]}}</span>
-                </Upload>
-              </div>
-              <Input
-                v-if="item.type === 'upload' && item.disabled"
-                v-model="formData[item.key]"
-                disabled
-              />
-              <!-- 选择物料特殊按钮 -->
-              <Button
-                type="primary"
-                v-if="item.type === 'materialBtn'"
-                @click="materialHandle(item)"
-                >+&nbsp;&nbsp;选择物料&nbsp;</Button
-              >
-              <div
-                v-if="item.type === 'materialBtn'"
-                class="material-list"
-                style="border: 1px solid #dcdee2; border-radius: 4px;padding:0 10px;margin-top: 10px"
-              >
-                <div
-                  v-if="codeListShow"
-                  class="material-item"
-                  v-for="(code, codeIndex) in formData.materialNames"
-                  :key="codeIndex"
-                >
-                  {{ code }}
-                  <Icon
-                    type="md-close"
-                    class="icon"
-                    @click="removeCode(codeIndex)"
-                  />
-                </div>
-              </div>
-              <my-modal-material
-                v-if="item.type === 'materialBtn'"
-                :selected-list="selectedList"
-                ref="materialModal"
-                :multiple="item.multiple"
-                v-model="show"
-                @getselectedList="getselectedList"
-              ></my-modal-material>
-              <!-- 选项卡 -->
-              <div v-if="item.type === 'tabs'">
-                <Tabs :value="tabName">
-                  <TabPane
-                    v-for="(tab, tabIndex) in item.tabs"
-                    :key="tabIndex"
-                    :label="tab.title"
-                    :name="tabIndex + ''"
-                  >
-                    <!-- 选项卡普通表单内容 -->
-                    <Col
-                      v-if="!tab.type"
-                      :span="tabItem.span || '24'"
-                      v-for="(tabItem, tabItemIndex) in tab.forms"
-                      :key="tabItemIndex"
-                    >
-                      <FormItem
-                        :prop="tabItem.key"
-                        :label="tabItem.label + '：'"
-                        :label-width="tabItem.hiddenLabel ? 0 : 100"
-                        label-position="left"
-                      >
-                        <!-- 自定义标签 -->
-                        <div slot="label">
-                          {{ tabItem.hiddenLabel ? '' : tabItem.label + ':' }}
-                        </div>
-                        <!-- 输入框 -->
-                        <Input
-                          v-if="tabItem.type === 'input'"
-                          v-model="formData[tabItem.key]"
-                          :placeholder="tabItem.placeholder"
-                          :type="tabItem.comType"
-                          :disabled="tabItem.disabled"
-                          style="width: calc(100% - 100px)"
-                        />
-                        <!-- 日期选择 -->
-                        <DatePicker
-                          v-if="tabItem.type === 'date'"
-                          v-model="formData[item.key]"
-                          :transfer="true"
-                          :disabled="tabItem.disabled"
-                          :type="tabItem.comType"
-                          :placeholder="tabItem.placeholder"
-                          style="width: calc(100% - 100px)"
-                        >
-                        </DatePicker>
-                      </FormItem>
-                    </Col>
-                    <!-- 维护记录 -->
-                    <Col
-                      span="24"
-                      v-if="tab.type === 'picList'"
-                      style="position: relative;height: 100%"
-                    >
-                      <div
-                        style="text-align: right;width: 100%;margin-bottom: 10px;"
-                      >
-                        <Button type="primary" @click="historyShow = true"
-                          >添加</Button
-                        >
-                        <my-history-form
-                          v-model="historyShow"
-                          @getData="historyAdd"
-                        ></my-history-form>
-                      </div>
-                      <Table
-                        :columns="piclistColumns"
-                        :data="formData.facKeepRecordList"
-                      ></Table>
-                    </Col>
-                    <!-- 主营价格 -->
-                    <Col span="24" v-if="tab.type === 'material'">
-                      <material-table :id="formData.id"></material-table>
-                    </Col>
-                    <!-- 采购分析 -->
-                    <Col span="24" v-if="tab.type === 'charts'">
-                      <charts :show="modal" :id="formData.id"></charts>
-                    </Col>
-                  </TabPane>
-                </Tabs>
-              </div>
-              <div v-if="item.type === ''" style="cursor: auto;">
-                <Input style="opacity: 0;cursor: auto;" disabled />
-              </div>
-            </FormItem>
-          </Col>
-        </Form>
-      </div>
-    </Modal>
-  </div>
+	<div>
+		<Modal
+			v-model="modal"
+			:width="width"
+			:mask-closable="false"
+			@on-cancel="cancel"
+			class-name="vertical-center-modal"
+		>
+			<div class="title" slot="header">
+				{{ title }}
+			</div>
+			<div slot="footer" class="footer" v-if="type !== 'form'">
+				<Button @click="cfm" class="btn" type="primary">提交</Button>
+				<Button @click="cancel" class="btn">取消</Button>
+			</div>
+			<div slot="footer" class="footer" v-else>
+				<Button @click="cancel" class="btn" type="primary">关闭</Button>
+			</div>
+			<div class="content">
+				<Form ref="form" :model="formData" :rules="ruleValidate">
+					<Col
+						:span="item.span || '24'"
+						v-for="(item, index) in config"
+						:key="index"
+					>
+						<FormItem
+							:prop="item.key"
+							:label="item.label + '：'"
+							:label-width="item.hiddenLabel ? 0 : 100"
+						>
+							<!-- 自定义标签 -->
+							<div slot="label">
+								{{ item.hiddenLabel ? '' : item.label + '：' }}
+							</div>
+							<!-- 输入框 -->
+							<Input
+								v-if="item.type === 'input'"
+								v-model="formData[item.key]"
+								:placeholder="item.placeholder"
+								:type="item.comType"
+								:disabled="item.disabled"
+							/>
+							<!-- 日期选择 -->
+							<DatePicker
+								v-if="item.type === 'date'"
+								v-model="formData[item.key]"
+								@on-change="handleDateChange(item.key)"
+								:transfer="true"
+								:type="item.comType"
+								format="yyyy-MM-dd"
+								:placeholder="item.placeholder"
+								style="width: 100%"
+							>
+							</DatePicker>
+							<!-- 下拉框 -->
+							<Select
+								v-if="item.type === 'select'"
+								:transfer="true"
+								v-model="formData[item.key]"
+								style="max-width: 400px"
+								:disabled="item.disabled"
+							>
+								<Option
+									v-for="option in item.list"
+									:value="option.value"
+									:key="option.value"
+									>{{ option.label || '未知' }}</Option
+								>
+							</Select>
+							<!-- 树下拉框 -->
+							<my-tree-select
+								ref="myTreeSelect"
+								v-if="item.type === 'treeSelect'"
+								v-model="formData[item.key]"
+								:treeData="item.list"
+							></my-tree-select>
+							<!-- 搜索下拉框 -->
+							<Select
+								v-if="item.type === 'selectSearch'"
+								filterable
+								:transfer="true"
+								v-model="formData[item.key]"
+								style="max-width: 400px"
+								:disabled="item.disabled"
+							>
+								<Option
+									v-for="option in item.list"
+									:value="option.value"
+									:key="option.value"
+									>{{ option.label || '未知' }}</Option
+								>
+							</Select>
+							<!-- 单选框 -->
+							<RadioGroup
+								v-if="item.type === 'radio'"
+								v-model="formData[item.key]"
+							>
+								<Radio
+									:label="radio.value"
+									v-for="radio in item.list"
+									:key="radio.value"
+								>
+									<span>{{ radio.label }}</span>
+								</Radio>
+							</RadioGroup>
+
+							<!-- 图片上传 -->
+							<div
+								class="upload-input"
+								v-if="item.type === 'upload' && !item.disabled"
+							>
+								<Input v-model="formData[item.key]" />
+								<Upload
+									ref="upload"
+									:before-upload="uploadOther"
+									:format="['jpg', 'jpeg', 'png']"
+									accept=".jpg,.png,.jpeg"
+									action=""
+									style="display: flex; align-items: center"
+								>
+									<Button
+										type="primary"
+										style="
+											width: 120px;
+											height: 32px;
+											border-radius: 0 4px 4px 0;
+										"
+										>{{ item.text }}</Button
+									>
+								</Upload>
+							</div>
+							<div
+								class="upload-flie"
+								v-if="item.type === 'upload-flie'"
+							>
+								<Upload
+									ref="upload-flie"
+									:before-upload="
+										(flie) => upload(flie, item)
+									"
+									:format="['jpg', 'jpeg', 'png']"
+									accept=".jpg,.png,.jpeg"
+									action=""
+								>
+									<Tooltip :content="item.text">
+										<Button type="primary">上传图片</Button>
+									</Tooltip>
+								</Upload>
+								<span style="margin-left: 10px">{{
+									formData[item.key]
+								}}</span>
+							</div>
+							<Input
+								v-if="item.type === 'upload' && item.disabled"
+								v-model="formData[item.key]"
+								disabled
+							/>
+							<!-- 选择物料特殊按钮 -->
+							<Button
+								type="primary"
+								v-if="item.type === 'materialBtn'"
+								@click="materialHandle(item)"
+								>+&nbsp;&nbsp;选择物料&nbsp;</Button
+							>
+							<div
+								v-if="item.type === 'materialBtn'"
+								class="material-list"
+								style="
+									border: 1px solid #dcdee2;
+									border-radius: 4px;
+									padding: 0 10px;
+									margin-top: 10px;
+								"
+							>
+								<div
+									v-if="codeListShow"
+									class="material-item"
+									v-for="(
+										code, codeIndex
+									) in formData.materialNames"
+									:key="codeIndex"
+								>
+									{{ code }}
+									<Icon
+										type="md-close"
+										class="icon"
+										@click="removeCode(codeIndex)"
+									/>
+								</div>
+							</div>
+							<my-modal-material
+								v-if="item.type === 'materialBtn'"
+								:selected-list="selectedList"
+								ref="materialModal"
+								:multiple="item.multiple"
+								v-model="show"
+								@getselectedList="getselectedList"
+							></my-modal-material>
+							<!-- 选项卡 -->
+							<div v-if="item.type === 'tabs'">
+								<Tabs :value="tabName">
+									<TabPane
+										v-for="(tab, tabIndex) in item.tabs"
+										:key="tabIndex"
+										:label="tab.title"
+										:name="tabIndex + ''"
+									>
+										<!-- 选项卡普通表单内容 -->
+										<Col
+											v-if="!tab.type"
+											:span="tabItem.span || '24'"
+											v-for="(
+												tabItem, tabItemIndex
+											) in tab.forms"
+											:key="tabItemIndex"
+										>
+											<FormItem
+												:prop="tabItem.key"
+												:label="tabItem.label + '：'"
+												:label-width="
+													tabItem.hiddenLabel
+														? 0
+														: 100
+												"
+												label-position="left"
+											>
+												<!-- 自定义标签 -->
+												<div slot="label">
+													{{
+														tabItem.hiddenLabel
+															? ''
+															: tabItem.label +
+															  ':'
+													}}
+												</div>
+												<!-- 输入框 -->
+												<Input
+													v-if="
+														tabItem.type === 'input'
+													"
+													v-model="
+														formData[tabItem.key]
+													"
+													:placeholder="
+														tabItem.placeholder
+													"
+													:type="tabItem.comType"
+													:disabled="tabItem.disabled"
+													style="
+														width: calc(
+															100% - 100px
+														);
+													"
+												/>
+												<!-- 日期选择 -->
+												<DatePicker
+													v-if="
+														tabItem.type === 'date'
+													"
+													v-model="formData[item.key]"
+													:transfer="true"
+													:disabled="tabItem.disabled"
+													:type="tabItem.comType"
+													:placeholder="
+														tabItem.placeholder
+													"
+													style="
+														width: calc(
+															100% - 100px
+														);
+													"
+												>
+												</DatePicker>
+											</FormItem>
+										</Col>
+										<!-- 维护记录 -->
+										<Col
+											span="24"
+											v-if="tab.type === 'picList'"
+											style="
+												position: relative;
+												height: 100%;
+											"
+										>
+											<div
+												style="
+													text-align: right;
+													width: 100%;
+													margin-bottom: 10px;
+												"
+											>
+												<Button
+													type="primary"
+													@click="historyShow = true"
+													>添加</Button
+												>
+												<my-history-form
+													v-model="historyShow"
+													@getData="historyAdd"
+												></my-history-form>
+											</div>
+											<Table
+												:columns="piclistColumns"
+												:data="
+													formData.facKeepRecordList
+												"
+											></Table>
+										</Col>
+										<!-- 其他资质 -->
+										<Col
+											span="24"
+											v-if="tab.type === 'quaList'"
+											style="
+												position: relative;
+												height: 100%;
+											"
+										>
+											<Table
+												:columns="quaColumns"
+												:data="formData.attr"
+											></Table>
+											<div
+												style="
+													text-align: center;
+													width: 60px;
+													margin: 10px auto 0;
+												"
+											>
+												<div class="upload-flie">
+													<Upload
+														ref="upload-flie"
+														:before-upload="
+															(flie) =>
+																upload(
+																	flie,
+																	item,
+																	'attr'
+																)
+														"
+														:format="[
+															'jpg',
+															'jpeg',
+															'png',
+														]"
+														accept=".jpg,.png,.jpeg"
+														action=""
+													>
+														<Button type="primary"
+															>新增证书</Button
+														>
+													</Upload>
+												</div>
+											</div>
+										</Col>
+										<Modal
+											v-model="showImgUrlModal"
+											title="查看"
+										>
+											<div style="text-align: center">
+												<img :src="showImgUrl" alt="" />
+											</div>
+										</Modal>
+
+										<!-- 主营价格 -->
+										<Col
+											span="24"
+											v-if="tab.type === 'material'"
+										>
+											<material-table
+												:id="formData.id"
+											></material-table>
+										</Col>
+										<!-- 采购分析 -->
+										<Col
+											span="24"
+											v-if="tab.type === 'charts'"
+										>
+											<charts
+												:show="modal"
+												:id="formData.id"
+											></charts>
+										</Col>
+									</TabPane>
+								</Tabs>
+							</div>
+							<div v-if="item.type === ''" style="cursor: auto">
+								<Input
+									style="opacity: 0; cursor: auto"
+									disabled
+								/>
+							</div>
+						</FormItem>
+					</Col>
+				</Form>
+			</div>
+		</Modal>
+	</div>
 </template>
 
 <script>
@@ -282,403 +409,518 @@ import Charts from './charts'
 import MyTreeSelect from '_c/my-tree-select/my-tree-select'
 import { UploadBase64 } from '@/api/upload'
 export default {
-  components: {
-    MyTable,
-    MyModalMaterial,
-    MaterialTable,
-    Charts,
-    MyHistoryForm,
-    MyTreeSelect
-  },
-  props: {
-    // 标题
-    title: {
-      type: String,
-      default: ''
-    },
-    // 修改表单时的数据
-    data: {
-      type: Object,
-      default () {
-        return {}
-      }
-    },
-    // 表单类型 add新增 edit修改 form查看
-    type: {
-      type: String,
-      default: 'add'
-    },
-    // 表单校验格式
-    ruleValidate: {
-      type: Object,
-      default () {
-        return {}
-      }
-    },
-    // 表单显示格式
-    config: {
-      type: Array,
-      default () {
-        return []
-      }
-    },
-    // 是否显示表单
-    value: {
-      type: Boolean,
-      default: false,
-      require: true
-    },
-    width: {
-      type: String,
-      default: '500px'
-    }
-  },
-  watch: {
-    isMaterial () {
-      console.log('isMaterial', this.isMaterial)
-    },
-    value: {
-      handler (n) {
-        this.modal = n
-        // 表单数组绑定问题
-        if (n) {
-          this.tabName = '0'
-          setTimeout(() => {
-            this.isFirst = false
-          }, 100)
-          if (this.data.categoryCode) {
-            this.$refs.myTreeSelect[0].init(this.data.categoryCode)
-          }
-        } else {
-          this.isFirst = true
-          this.tabName = 0
-        }
-      },
-      immediate: true
-    },
-    modal (n) {
-      this.$emit('input', n)
-    }
-  },
-  data () {
-    return {
-      selectedList: [],
-      tabName: '0',
-      isFirst: true,
-      codeListShow: true,
-      historyShow: false,
-      show: false,
-      modal: false,
-      formData: {
-        materialCodeList: [],
-        facKeepRecordList: []
-      },
-      piclistColumns: [
-        {
-          title: '序号',
-          type: 'index',
-          width: 60,
-          align: 'center'
-        },
-        {
-          title: '维护记录',
-          align: 'center',
-          key: 'title'
-        },
-        {
-          title: '日期',
-          align: 'center',
-          key: 'createdTime'
-        },
-        {
-          title: '附件',
-          key: 'picUrl',
-          tooltip: true,
-          minWidth: 200,
-          align: 'center',
-          render: (h, params) => {
-            let list = params.row.picUrl.split(',')
-            let showList = []
-            list.forEach(item => {
-              showList.push(
-                h(
-                  'div',
-                  {
-                    style: {
-                      color: 'blue',
-                      overflow: 'hidden',
-                      whiteSpace: 'nowrap',
-                      textOverflow: 'ellipsis',
-                      lineClamp: '2',
-                      cursor: 'pointer'
-                    },
-                    on: {
-                      click () {
-                        let newWindow = window.open()
-                        newWindow.document.write(
-                          "<br><div style='padding: 0'><img width='" +
-                            100 +
-                            '%' +
-                            "' src='" +
-                            item +
-                            "'/></div>"
-                        )
-                        newWindow.document.close()
-                      }
-                    }
-                  },
-                  item
-                )
-              )
-            })
-            return h('div', showList)
-          }
-        }
-      ]
-    }
-  },
-  methods: {
-    // 图片上传
-    upload (file,item) {
-      const reader = new FileReader()
-      reader.readAsDataURL(file)
-      reader.onload = (event) => {
-        UploadBase64({
-          fileBase64: event.srcElement.result,
-          fileName: file.name,
-          floder: 'order'
-        }).then(res => {
-          if (res.code === 0) {
-            console.log(this.formData)
-            this.formData[item.key] = res.result
-            // this.form.picUrl = res.result
-          }
-        })
-      }
-      return false
-    },
-    // 维护记录新增数据
-    historyAdd (data) {
-      if (!this.formData.facKeepRecordList) {
-        this.$set(this.formData, 'facKeepRecordList', [])
-      }
-      this.formData.facKeepRecordList.push({ ...data })
-    },
-    // 时间控件选择
-    handleDateChange (key) {
-      this.formData[key] = this.$dayjs(this.formData[key]).format('YYYY-MM-DD')
-    },
-    // 上传运营执照 自动获取相关信息并回填
-    uploadOther (file) {
-      const reader = new FileReader()
-      reader.readAsDataURL(file)
-      reader.onload = event => {
-        UploadBusinessLicense({
-          base64str: event.srcElement.result
-        }).then(res => {
-          if (res.code === 0) {
-            this.formData = { ...this.formData }
-            this.$set(this.formData, 'name', res.result.name)
-            this.$set(this.formData, 'legalPerson', res.result.legalPerson)
-            this.$set(
-              this.formData,
-              'societyCreditCode',
-              res.result.societyCreditCode
-            )
-            this.$set(
-              this.formData,
-              'registeredAddress',
-              res.result.registeredAddress
-            )
-            this.$set(
-              this.formData,
-              'establishDate',
-              res.result.establishDate
-                .replace('年', '-')
-                .replace('月', '-')
-                .replace('日', '')
-            )
-            this.$set(
-              this.formData,
-              'enterpriseType',
-              res.result.enterpriseType
-            )
-            this.$set(this.formData, 'businessScope', res.result.businessScope)
-            this.$set(
-              this.formData,
-              'registeredCapital',
-              res.result.registeredCapital
-            )
-            this.$set(
-              this.formData,
-              'businessTerm',
-              res.result.businessTerm
-                .replace('年', '-')
-                .replace('月', '-')
-                .replace('日', '')
-            )
-          }
-        })
-      }
-      return false
-    },
-    // 选择物料
-    materialHandle (item) {
-      this.selectedList = this.formData.materialCodeList.map((item, index) => {
-        return {
-          code: item,
-          name: this.formData.materialNames[index]
-        }
-      })
-      this.show = true
-    },
-    // 获从面料组件获取取选中面料
-    getselectedList (list, multiple) {
-      if (multiple) {
-        for (const key in list[0]) {
-          this.formData[key] = list[0][key]
-        }
-      } else {
-        this.formData.materialCodeList = list.map(item => item.code)
-        this.formData.materialNames = list.map(item => item.name)
-      }
-    },
-    removeCode (index) {
-      console.log(index)
-      this.formData.materialCodeList.splice(index, 1)
-      this.formData.materialNames.splice(index, 1)
-      this.codeListShow = false
-      setTimeout(() => {
-        this.codeListShow = true
-      })
-    },
-    cancel () {
-      this.modal = false
-      this.formData = {
-        materialCodeList: [],
-        facKeepRecordList: []
-      }
-      this.$refs.form.resetFields()
-    },
-    cfm () {
-      this.$refs.form.validate(valid => {
-        if (valid) {
-          if (this.type === 'edit') {
-            this.$emit('confirm', 'edit', { ...this.formData })
-            // this.formData = {}
-            // this.$refs.form.resetFields()
-          } else {
-            this.$emit('confirm', 'add', { ...this.formData })
-            // this.formData = {}
-            // this.$refs.form.resetFields()
-          }
-        }
-      })
-    }
-  },
-  mounted () {
-    // 不加第一次进来数据会绑定失败 修改的时候会校验失败
-    this.formData = {}
-  },
-  beforeUpdate () {
-    if (!this.modal) {
-      this.cancel()
-    }
-    // 防止input type为number时绑定数据 校验失败
-    if (this.isFirst) {
-      if (this.modal && (this.type === 'edit' || this.type === 'form')) {
-        for (const key in this.data) {
-          if (
-            Number.parseFloat(this.data[key]) === 'NaN' ||
-            typeof this.data[key] === 'object'
-          ) {
-            this.formData[key] = this.data[key]
-          } else if (key === 'sex') {
-            this.$set(this.formData, 'sex', this.data.sexCode)
-          } else if (this.data[key] || this.data[key] === 0) {
-            this.formData[key] = this.data[key].toString()
-          }
-        }
-      }
-    }
-  }
+	components: {
+		MyTable,
+		MyModalMaterial,
+		MaterialTable,
+		Charts,
+		MyHistoryForm,
+		MyTreeSelect,
+	},
+	props: {
+		// 标题
+		title: {
+			type: String,
+			default: '',
+		},
+		// 修改表单时的数据
+		data: {
+			type: Object,
+			default() {
+				return {}
+			},
+		},
+		// 表单类型 add新增 edit修改 form查看
+		type: {
+			type: String,
+			default: 'add',
+		},
+		// 表单校验格式
+		ruleValidate: {
+			type: Object,
+			default() {
+				return {}
+			},
+		},
+		// 表单显示格式
+		config: {
+			type: Array,
+			default() {
+				return []
+			},
+		},
+		// 是否显示表单
+		value: {
+			type: Boolean,
+			default: false,
+			require: true,
+		},
+		width: {
+			type: String,
+			default: '500px',
+		},
+	},
+	watch: {
+		isMaterial() {
+			console.log('isMaterial', this.isMaterial)
+		},
+		value: {
+			handler(n) {
+				this.modal = n
+				// 表单数组绑定问题
+				if (n) {
+					this.tabName = '0'
+					setTimeout(() => {
+						this.isFirst = false
+					}, 100)
+					if (this.data.categoryCode) {
+						this.$refs.myTreeSelect[0].init(this.data.categoryCode)
+					}
+				} else {
+					this.isFirst = true
+					this.tabName = 0
+				}
+			},
+			immediate: true,
+		},
+		modal(n) {
+			this.$emit('input', n)
+		},
+	},
+	data() {
+		const v = this
+		return {
+			selectedList: [],
+			tabName: '0',
+			isFirst: true,
+			codeListShow: true,
+			historyShow: false,
+			show: false,
+			modal: false,
+			formData: {
+				materialCodeList: [],
+				facKeepRecordList: [],
+			},
+			showImgUrl: null,
+			showImgUrlModal: false,
+			quaColumns: [
+				{
+					title: '序号',
+					type: 'index',
+					width: 60,
+					align: 'center',
+				},
+				{
+					title: '资质类型',
+					align: 'center',
+					key: 'realName',
+				},
+				{
+					title: '操作',
+					align: 'center',
+					key: 'title',
+					render(h, p) {
+						return h('div', [
+							h(
+								'Button',
+								{
+									props: {
+										type: 'primary',
+										size: 'small',
+									},
+									style: {
+										marginRight: '5px',
+									},
+									on: {
+										click: () => {
+											v.showImgUrl = p.row.path
+											v.showImgUrlModal = true
+										},
+									},
+								},
+								'查看'
+							),
+							// h(
+							// 	'Upload',
+							// 	{
+							// 		props: {
+							// 			type: 'primary',
+							// 			size: 'small',
+							// 		},
+							// 		style: {
+							// 			marginRight: '5px',
+							// 		},
+							// 		on: {
+							// 			click: () => {
+							// 				this.show(params.index)
+							// 			},
+							// 		},
+							// 	},
+							// 	'修改'
+							// ),
+							h(
+								'Button',
+								{
+									props: {
+										type: 'error',
+										size: 'small',
+									},
+									style: {
+										marginRight: '5px',
+									},
+									on: {
+										click: () => {
+											v.formData.attr.splice(p.index, 1)
+										},
+									},
+								},
+								'删除'
+							),
+						])
+					},
+				},
+			],
+			piclistColumns: [
+				{
+					title: '序号',
+					type: 'index',
+					width: 60,
+					align: 'center',
+				},
+				{
+					title: '维护记录',
+					align: 'center',
+					key: 'title',
+				},
+				{
+					title: '日期',
+					align: 'center',
+					key: 'createdTime',
+				},
+				{
+					title: '附件',
+					key: 'picUrl',
+					tooltip: true,
+					minWidth: 200,
+					align: 'center',
+					render: (h, params) => {
+						let list = params.row.picUrl.split(',')
+						let showList = []
+						list.forEach((item) => {
+							showList.push(
+								h(
+									'div',
+									{
+										style: {
+											color: 'blue',
+											overflow: 'hidden',
+											whiteSpace: 'nowrap',
+											textOverflow: 'ellipsis',
+											lineClamp: '2',
+											cursor: 'pointer',
+										},
+										on: {
+											click() {
+												let newWindow = window.open()
+												newWindow.document.write(
+													"<br><div style='padding: 0'><img width='" +
+														100 +
+														'%' +
+														"' src='" +
+														item +
+														"'/></div>"
+												)
+												newWindow.document.close()
+											},
+										},
+									},
+									item
+								)
+							)
+						})
+						return h('div', showList)
+					},
+				},
+			],
+		}
+	},
+	methods: {
+		// 图片上传
+		upload(file, item, type) {
+			const reader = new FileReader()
+			reader.readAsDataURL(file)
+			reader.onload = (event) => {
+				UploadBase64({
+					fileBase64: event.srcElement.result,
+					fileName: file.name,
+					floder: 'order',
+				}).then((res) => {
+					if (res.code === 0) {
+						console.log(this.formData)
+						if (type == 'attr') {
+							if (!this.formData.attr) {
+								this.$set(this.formData, 'attr', [])
+							}
+							this.formData.attr.push({
+								realName: file.name,
+								temName: file.name,
+								path: res.result,
+							})
+						}else{
+							this.$set(this.formData, item.key, res.result)
+						}
+					}
+				})
+			}
+			return false
+		},
+		// 维护记录新增数据
+		historyAdd(data) {
+			if (!this.formData.facKeepRecordList) {
+				this.$set(this.formData, 'facKeepRecordList', [])
+			}
+			this.formData.facKeepRecordList.push({ ...data })
+		},
+		// 时间控件选择
+		handleDateChange(key) {
+			this.formData[key] = this.$dayjs(this.formData[key]).format(
+				'YYYY-MM-DD'
+			)
+		},
+		// 上传运营执照 自动获取相关信息并回填
+		uploadOther(file) {
+			const reader = new FileReader()
+			reader.readAsDataURL(file)
+			reader.onload = (event) => {
+				UploadBusinessLicense({
+					base64str: event.srcElement.result,
+				}).then((res) => {
+					if (res.code === 0) {
+						this.formData = { ...this.formData }
+						this.$set(this.formData, 'name', res.result.name)
+						this.$set(
+							this.formData,
+							'legalPerson',
+							res.result.legalPerson
+						)
+						this.$set(
+							this.formData,
+							'societyCreditCode',
+							res.result.societyCreditCode
+						)
+						this.$set(
+							this.formData,
+							'registeredAddress',
+							res.result.registeredAddress
+						)
+						this.$set(
+							this.formData,
+							'establishDate',
+							res.result.establishDate
+								.replace('年', '-')
+								.replace('月', '-')
+								.replace('日', '')
+						)
+						this.$set(
+							this.formData,
+							'enterpriseType',
+							res.result.enterpriseType
+						)
+						this.$set(
+							this.formData,
+							'businessScope',
+							res.result.businessScope
+						)
+						this.$set(
+							this.formData,
+							'registeredCapital',
+							res.result.registeredCapital
+						)
+						this.$set(
+							this.formData,
+							'businessTerm',
+							res.result.businessTerm
+								.replace('年', '-')
+								.replace('月', '-')
+								.replace('日', '')
+						)
+					}
+				})
+			}
+			return false
+		},
+		// 选择物料
+		materialHandle(item) {
+			this.selectedList = this.formData.materialCodeList.map(
+				(item, index) => {
+					return {
+						code: item,
+						name: this.formData.materialNames[index],
+					}
+				}
+			)
+			this.show = true
+		},
+		// 获从面料组件获取取选中面料
+		getselectedList(list, multiple) {
+			if (multiple) {
+				for (const key in list[0]) {
+					this.formData[key] = list[0][key]
+				}
+			} else {
+				this.formData.materialCodeList = list.map((item) => item.code)
+				this.formData.materialNames = list.map((item) => item.name)
+			}
+		},
+		removeCode(index) {
+			console.log(index)
+			this.formData.materialCodeList.splice(index, 1)
+			this.formData.materialNames.splice(index, 1)
+			this.codeListShow = false
+			setTimeout(() => {
+				this.codeListShow = true
+			})
+		},
+		cancel() {
+			this.modal = false
+			this.formData = {
+				materialCodeList: [],
+				facKeepRecordList: [],
+			}
+			this.$refs.form.resetFields()
+		},
+		cfm() {
+			this.$refs.form.validate((valid) => {
+				if (valid) {
+					if (this.type === 'edit') {
+						this.$emit('confirm', 'edit', { ...this.formData })
+						// this.formData = {}
+						// this.$refs.form.resetFields()
+					} else {
+						this.$emit('confirm', 'add', { ...this.formData })
+						// this.formData = {}
+						// this.$refs.form.resetFields()
+					}
+				}
+			})
+		},
+	},
+	mounted() {
+		// 不加第一次进来数据会绑定失败 修改的时候会校验失败
+		this.formData = {}
+		
+	},
+	beforeUpdate() {
+		
+		if (!this.modal) {
+			this.cancel()
+		}
+		this.$set(this, 'formData', this.data)
+		// 防止input type为number时绑定数据 校验失败
+		if (this.isFirst) {
+			if (this.modal && (this.type === 'edit' || this.type === 'form')) {
+				for (const key in this.data) {
+					if (
+						Number.parseFloat(this.data[key]) === 'NaN' ||
+						typeof this.data[key] === 'object'
+					) {
+						this.formData[key] = this.data[key]
+					} else if (key === 'sex') {
+						this.$set(this.formData, 'sex', this.data.sexCode)
+					} else if (this.data[key] || this.data[key] === 0) {
+						this.formData[key] = this.data[key].toString()
+					}
+				}
+			}
+		}
+		
+		console.log(this.formData)
+		console.log(this.data)
+	},
 }
 </script>
 
 <style lang="less" scoped>
+.upload-flie {
+	height: 70px;
+}
+/deep/ .upload-flie .ivu-upload {
+	height: 50px;
+	width: 100px;
+}
 .content {
-  .material-list {
-    max-height: 300px;
-    overflow: auto;
-    .material-item {
-      position: relative;
-      .icon {
-        position: absolute;
-        right: 5px;
-        top: 50%;
-        transform: translateY(-50%);
-        cursor: pointer;
-      }
-    }
-  }
-  .col {
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    .label {
-      width: 100px;
-      text-align: right;
-    }
-  }
+	.material-list {
+		max-height: 300px;
+		overflow: auto;
+		.material-item {
+			position: relative;
+			.icon {
+				position: absolute;
+				right: 5px;
+				top: 50%;
+				transform: translateY(-50%);
+				cursor: pointer;
+			}
+		}
+	}
+	.col {
+		width: 100%;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		.label {
+			width: 100px;
+			text-align: right;
+		}
+	}
 }
 .upload-input {
-  display: flex;
-  align-items: center;
-  /deep/.ivu-upload {
-    display: flex;
-    align-items: center;
-  }
-  /deep/.ivu-input {
-    flex: 1;
-    border-radius: 4px 0 0 4px;
-  }
+	display: flex;
+	align-items: center;
+	/deep/.ivu-upload {
+		display: flex;
+		align-items: center;
+	}
+	/deep/.ivu-input {
+		flex: 1;
+		border-radius: 4px 0 0 4px;
+	}
 }
 /deep/ .vertical-center-modal {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  .ivu-modal {
-    top: 0;
-  }
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	.ivu-modal {
+		top: 0;
+	}
 }
 ///deep/ .ivu-modal-content {
 //  height: 80vh;
 //  overflow: hidden;
 //}
 /deep/ .ivu-modal-body {
-  max-height: ~'calc(80vh - 68px)';
-  overflow: auto;
-  background: #f5f7fa;
+	max-height: ~'calc(80vh - 68px)';
+	overflow: auto;
+	background: #f5f7fa;
 }
 /deep/ .ivu-form-item {
-  .ivu-form-item {
-    margin-bottom: 24px;
-  }
+	.ivu-form-item {
+		margin-bottom: 24px;
+	}
 }
 /deep/ .ivu-form-item-label {
-  display: flex;
-  justify-content: flex-end;
+	display: flex;
+	justify-content: flex-end;
 }
 /deep/ .ivu-tabs {
-  background-color: #f2f2f2;
-  padding: 10px;
+	background-color: #f2f2f2;
+	padding: 10px;
 }
 /deep/ .ivu-upload-select {
-  width: 100%;
+	width: 100%;
 }
 /deep/ .ivu-tabs-tabpane {
-  max-height: 310px;
-  overflow-y: auto;
+	max-height: 310px;
+	overflow-y: auto;
 }
 </style>

src/components/my-table/my-table2.vue

@@ -0,0 +1,476 @@
+<template>
+  <div class="container-2">
+    <!-- 检索 -->
+    <div class="table-filter" v-if="isShowFilter" @keyup.enter="enterHandle">
+      <div
+        class="filter-item"
+        v-for="(item, index) in tableFilter"
+        :key="index"
+        :style="{
+          float: item.align === 'right' ? 'right' : 'left'
+        }"
+      >
+        <component
+          v-model="filterData[item.value]"
+          @click="filterClick(item)"
+          :placeholder="item.placeholder"
+          :is="item.name"
+          :type="item.type && item.type"
+          :format="item.format"
+          :icon="item.icon"
+          :style="{
+            width: item.width || getComWidth(item)
+          }"
+          :disabled="item.disabled"
+          :clearable="!item.unClearable"
+          filterable
+          @on-change="onChange($event, item)"
+          @on-click="onChange($event, item)"
+        >
+          <!-- span 显示的字段 -->
+          <span v-if="item.name === 'span'" :style="item.style">{{
+            item.text
+          }}</span>
+          <!-- 按钮 显示的字段 -->
+          <span v-if="item.name === 'Button'">{{ item.text }}</span>
+          <!-- 单选框 显示列表 -->
+          <Radio
+            :label="radio.value"
+            v-if="item.name === 'RadioGroup'"
+            v-for="(radio, index) in item.list"
+            :key="index"
+          >
+            {{ radio.label }}
+          </Radio>
+          <!-- 下拉框 显示列表 -->
+          <Option
+            v-if="item.name === 'Select'"
+            v-for="select in item.list"
+            :value="select.value"
+            :key="select.value"
+            >{{ select.label }}</Option
+          >
+        </component>
+      </div>
+    </div>
+    <!-- 表格 -->
+    <div ref="table-content" class="table-content">
+      <Table
+        ref="table"
+        :columns="newColumns"
+        :data="data"
+        :border="border"
+        :row-class-name="rowClassName"
+        @on-select="onselect"
+        @on-select-cancel="onselectCancel"
+        @on-select-all="onselectAll"
+        @on-selection-change="onselectAllCancel"
+        @on-row-click="rowClick"
+      ></Table>
+    </div>
+    <!-- 分页 -->
+    <div class="table-page" v-if="isShowPage">
+      <slot name="total"></slot>
+      <Page
+        :current="tablePage.pageNum"
+        :page-size="tablePage.pageSize"
+        :total="tablePage.total"
+        :show-total="true"
+        show-elevator
+        @on-change="changePage"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    tooltip: {
+      type: Boolean,
+      default: false
+    },
+    height: {
+      type: Number | String
+    },
+    // 是否显示边框
+    border: {
+      type: Boolean,
+      default: false
+    },
+    // 是否单选
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    // 已选择物料
+    selectedList: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    // 根据key来获取选中的数据
+    selectKey: {
+      type: String,
+      default: 'code'
+    },
+    // 分页参数
+    tablePage: {
+      type: Object,
+      default () {
+        return {
+          pageNum: 1,
+          pageSize: 10,
+          total: 0
+        }
+      }
+    },
+    // 是否显示检索功能
+    isShowFilter: {
+      type: Boolean,
+      default: true
+    },
+    // 是否显示分页功能
+    isShowPage: {
+      type: Boolean,
+      default: true
+    },
+    /*
+      检索配置信息
+      align 组件位置
+      name 组件名
+      value 绑定值
+      type 组件类型
+      text 按钮的名称
+      radios 单选框时显示的列表
+    */
+    tableFilter: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    // 表格数据
+    data: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    // 表格配置信息
+    columns: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    rowClassNameFn:{
+      type:Function
+    },
+    // 判断表单显示时的标识
+    showFlag: Boolean,
+    calcHeight:Number,
+  },
+  computed: {
+    newColumns () {
+      return this.columns.map(item => {
+        return {
+          ...item,
+          tooltip: this.tooltip
+        }
+      })
+    }
+  },
+  watch: {
+    showFlag (val) {
+      if (val) {
+        this.historySelected()
+      }
+    },
+    data () {
+      this.resize()
+    }
+  },
+  data () {
+    return {
+      valid: false,
+      computedHeight: '',
+      selectRow: '',
+      filterData: {},
+      tempList: []
+    }
+  },
+  methods: {
+    resize () {
+      if (this.$refs['table-content']) {
+        this.computedHeight = this.$refs['table-content'].clientHeight
+        if (
+          this.$refs['table-content'].getElementsByClassName(
+            'ivu-table-overflowY'
+          )[0]
+        ) {
+          this.$refs['table-content'].getElementsByClassName(
+            'ivu-table-overflowY'
+          )[0].scrollTop = 0
+          this.$refs['table-content'].getElementsByClassName(
+            'ivu-table-overflowX'
+          )[0].scrollLeft = 0
+        }
+      } else {
+        setTimeout(() => {
+          this.resize()
+        }, 500)
+      }
+    },
+    rowClassName (row, index) {
+      if (row.color === 'red') {
+        return 'color-red'
+      }
+      return ''
+    },
+    rowClick (row, index) {
+      this.selectRow = index
+      this.$refs.table.toggleSelect(index)
+    },
+    /* 给检索框设置绑定一个值 */
+    setModel (key, value) {
+      this.$set(this.filterData, key, value)
+      this.$emit('event-handle', { _evnet: 'search', ...this.filterData })
+    },
+    /* 数据回填时历史勾选 */
+    historySelected () {
+      if (!this.multiple && this.selectedList.length > 0) {
+        this.tempList = this.selectedList
+        this.data.forEach(item => {
+          this.$set(item, '_checked', false)
+        })
+        this.setHistoryChecked()
+        this.$emit('on-select', [...this.tempList], {})
+      }
+    },
+    /* 清除历史勾选 */
+    clearHistoryChecked () {},
+    /* 清空临时勾选数据 */
+    clearTempList () {
+      this.tempList = []
+    },
+    /* 分页时勾选历史勾选 */
+    setHistoryChecked () {
+      this.data.forEach(item => {
+        this.tempList.forEach(selected => {
+          if (selected.code && item.code === selected.code) {
+            this.$set(item, '_checked', true)
+          }
+        })
+      })
+    },
+    onChange (data, item) {
+      if (item.name === 'DatePicker') {
+        console.log('DatePicker')
+        if (item.type === 'daterange') {
+          console.log('daterange')
+          this.filterData[(item.value || '') + 'StartTime'] = data[0]
+          this.filterData[(item.value || '') + 'EndTime'] = data[1]
+        } else {
+          this.filterData[item.value] = data
+        }
+        this.$emit('event-handle', { _evnet: item.e, ...this.filterData })
+      } else if (item.name === 'RadioGroup') {
+        this.$emit('event-handle', { _evnet: 'search', ...this.filterData })
+      } else if (item.name === 'Input') {
+        this.$emit('event-handle', { _evnet: item.e, ...this.filterData })
+      } else if (item.name === 'Select') {
+        this.$emit('event-handle', { _evnet: 'search', ...this.filterData })
+      }
+    },
+    clear () {
+      console.log('clear--------------')
+      this.tempList = []
+      this.$refs.table.selectAll(false)
+    },
+    // 表格复选框选择 获取选中数据
+    onselect (selection, row) {
+      if (!this.multiple) {
+        let flag = false
+        this.tempList.forEach(item => {
+          if (item[this.selectKey] === row[this.selectKey]) {
+            flag = true
+          }
+        })
+        if (!flag) {
+          this.tempList.push(row)
+        }
+        // 返回已选中的数据和单前数据
+        this.$emit('on-select', [...this.tempList], { ...row })
+      } else {
+        setTimeout(() => {
+          this.$refs.table.selectAll(false)
+          let index = this.data.findIndex(item => item.id === row.id)
+          this.$refs.table.$refs.tbody.objData[index]._isChecked = true
+          this.$emit('on-select', [...selection], { ...row })
+        }, 100)
+      }
+    },
+    onselectAllCancel (selection) {
+      if (!this.multiple && selection.length === 0) {
+        for (const select of this.data) {
+          this.tempList.forEach((item, index) => {
+            if (item.code === select.code) {
+              this.tempList.splice(index, 1)
+            }
+          })
+        }
+        this.$emit('on-select', [...this.tempList], {})
+      }
+    },
+    onselectAll (selection) {
+      // 多选时处理数据
+      if (!this.multiple) {
+        for (const select of selection) {
+          let flag = false
+          for (const item of this.tempList) {
+            if (select[this.selectKey] === item[this.selectKey]) {
+              flag = true
+              break
+            }
+          }
+          if (!flag) {
+            this.tempList.push(select)
+          }
+        }
+        this.$emit('on-select', [...this.tempList], {})
+      } else {
+        this.$refs.table.selectAll(false)
+      }
+    },
+    onselectCancel (selection, row) {
+      if (selection.length !== 0) {
+        this.tempList.forEach((item, index) => {
+          if (item[this.selectKey] === row[this.selectKey]) {
+            this.tempList.splice(index, 1)
+          }
+        })
+      }
+      this.$emit('on-select', [...selection], { ...row })
+    },
+    // 过滤器功能点击
+    filterClick (option) {
+      if (option.name === 'Button') {
+        this.$emit('event-handle', { _evnet: option.e, ...this.filterData })
+      }
+    },
+    /* enter搜索 */
+    enterHandle () {
+      this.$emit('event-handle', { _evnet: 'search', ...this.filterData })
+    },
+    // 换页
+    changePage (pageNum) {
+      this.$emit('on-change', pageNum)
+    },
+    // 获取控件宽度
+    getComWidth (item) {
+      if (item.name === 'Button') {
+        return '90px'
+      } else if (['Input', 'Select'].includes(item.name)) {
+        return '200px'
+      }
+    },
+    // 获取表格高度
+    getComHeight () {
+      if(this.calcHeight){
+        console.log(this.isShowPage)
+        return 'calc(100% - '+ this.calcHeight +'px)'
+      }else if (this.isShowFilter && this.isShowPage) {
+        return 'calc(100% - 85px)'
+      } else if (this.isShowFilter && !this.isShowPage) {
+        return 'calc(100% - 42px)'
+      } else if (!this.isShowFilter && this.isShowPage) {
+        return 'calc(100% - 43px)'
+      } else {
+        return '100%'
+      }
+    },
+    /* 节流 */
+    throttle (fn, delay) {
+      let _this = this
+      this.valid = true
+      return function () {
+        if (!_this.valid) {
+          // 休息时间 暂不接客
+          return false
+        }
+        // 工作时间，执行函数并且在间隔期内把状态位设为无效
+        _this.valid = false
+        setTimeout(() => {
+          fn()
+          _this.valid = true
+        }, delay)
+      }
+    }
+  },
+  created () {
+    /* 实时计算表格的高度 */
+    this.$nextTick(() => {
+      this.resize()
+      window.onresize = this.throttle(() => {
+        this.resize()
+      }, 100)
+    })
+    // 单选框默认选中第一个
+    this.tableFilter.forEach(item => {
+      if (item.name === 'RadioGroup') {
+        this.$set(this.filterData, item.value, item.list[0].value)
+      }
+    })
+  },
+  beforeUpdate () {
+    if (this.data !== null) {
+      this.setHistoryChecked()
+    }
+  }
+}
+</script>
+<style>
+.color-red{
+  color: red!important;
+}
+</style>
+<style lang="less" scoped>
+
+.container-2 {
+  height: 500px;
+  width: 100%;
+  
+  .table-filter {
+    padding-bottom: 10px;
+    line-height: 32px;
+    overflow: hidden;
+    .filter-item {
+      margin-right: 10px;
+      float: left;
+      //&:last-child {
+      //  margin-right: 0;
+      //}
+    }
+  }
+  .table-content {
+    
+    overflow: hidden;
+  }
+  .table-page {
+    padding-top: 10px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 43px;
+    overflow: hidden;
+  }
+}
+/deep/ .select-row-bg {
+  background: #b1e0ff;
+  td {
+    background: transparent;
+  }
+}
+</style>

src/components/my-table/renderListimgs.vue

@@ -0,0 +1,57 @@
+<template>
+    <div>
+        <div class="supplier-title">
+            
+            <img v-if="row.certificate  && row.businessLicense" src="@/assets/images/dun.png" alt="">
+            <img v-if="row.warningCount > 0" src="@/assets/images/gaojin.png" alt="">
+            <div class="qipao-warp" v-if="row.warningTypeCount > 0">
+              <img src="@/assets/images/qipao.png" style="" alt="">
+              <div class="num">{{row.warningTypeCount}}</div>
+            </div>
+            <span>{{row.name}}</span>
+          </div>
+    </div>
+</template>
+<script>
+    export default {
+        props: {
+            row: Object
+        },
+        data(){
+            return {
+                supplierDetail:{},
+            }
+        },
+    }
+</script>
+<style lang="less" scoped>
+/deep/ .supplier-title{
+  overflow: hidden;
+  
+  .qipao-warp{
+    position: relative;
+    float: left;
+    .num{
+      position: absolute;
+      top:2px;
+      left: 10px;
+      color: #fff;
+      font-size: 12px;
+      transform:scale(0.8)
+    }
+  }
+  span{
+    margin-left:12px;
+    display: block;
+    float: left;
+    font-size: 14px;
+    color: #1A3AF0;
+  }
+  img{
+    height: 20px;
+    display: block;
+    margin-left: 5px;
+    float: left;
+  }
+}
+</style>

src/locale/lang/zh-CN.js

@@ -60,5 +60,7 @@ export default {
   quality_record_detail: '质检详情',
   provider_tag_manage: '合同标签',
   error_out: '异常出库',
-  purchaseTotal: '* 申购统计'
+  purchaseTotal: '* 申购统计',
+  purchaseList:'* 供应商采购概况',
+  purchaseListDtl:"* 采购详情"
 }

src/router/routers.js

@@ -236,8 +236,22 @@ export default [
         },
         component: () => import('@/view/base-manage/provider-maintenance/provider-maintenance2')
       },
-
-      
+      {
+        path: '/purchaseList',
+        name: 'purchaseList',
+        meta: {
+          title: '供应商采购概况'
+        },
+        component: () => import('@/view/base-manage/provider-maintenance/purchaseList')
+      },
+      {
+        path: '/purchaseListDtl',
+        name: 'purchaseListDtl',
+        meta: {
+          title: '供应商采购概况'
+        },
+        component: () => import('@/view/base-manage/provider-maintenance/purchaseListDtl')
+      },
       {
         path: '/provider_price_maintenance',
         name: 'provider_price_maintenance',
@@ -404,6 +418,15 @@ export default [
         component: () => import('@/view/material-manege/pay/pay-history')
       },
       {
+        path: '/pay-history2',
+        name: 'pay-history2',
+        meta: {
+          title: '历史付款记录'
+        },
+        component: () => import('@/view/material-manege/pay/pay-history2')
+      },
+      
+      {
         path: '/pay_history_detail',
         name: 'pay_history_detail',
         meta: {

src/view/base-manage/provider-maintenance/provider-maintenance2.vue

@@ -0,0 +1,1180 @@
+<!-- 供应商维护 -->
+<template>
+  <div class="container">
+    <div class="tabs-warp">
+      <div 
+        @click="params.TechnologyType = i.technologyType;changePage(1);" 
+        :class="params.TechnologyType == i.technologyType ? 'active' : ''" 
+        v-for="i in statisticsClassifyData" 
+        :key="i.technologyType">
+        {{technologyTypeList[i.technologyType]}}（<span>{{i.categoryCount}}</span>）
+      </div>
+    </div>
+    <my-table :calcHeight="110" :data="data" :columns="columns" :table-filter="tableFilter" :table-page="params" @event-handle="eventHandle" @on-change="changePage"></my-table>
+    <my-modal-form
+      v-model="show"
+      :title="title"
+      :isMaterial="true"
+      width="800px"
+      :config="formType === 'add'? formConfig: formType === 'edit'? editFormConfig : showFormConfig"
+      :rule-validate="ruleValidate"
+      :data="formData"
+      :type="formType"
+      @confirm="cfm">
+    </my-modal-form>
+    <provider-account-form v-model="accountShow"></provider-account-form>
+  </div>
+</template>
+
+<script>
+import { GetFactoryPageList, FactoryAdd, FactoryUpdate, FactoryDelete, GetMaterialCategoryZTree } from '@/api/baseData'
+import { GetUserPageList } from '@/api/user'
+import MyTable from '_c/my-table/my-table2'
+import MyModalForm from '_c/my-modal-form/my-modal-form'
+import ProviderAccountForm from './provider-account-form'
+import axios from 'axios'
+import dun from '@/assets/images/dun.png'
+import renderListimgs from '_c/my-table/renderListimgs'
+
+export default {
+  name: 'provider_maintenance',
+  components: {
+    MyTable,
+    MyModalForm,
+    ProviderAccountForm,
+    renderListimgs
+  },
+  data () {
+    const v = this
+    return {
+      dun:dun,
+      technologyTypeList:['直喷','热转','打纸','墨水','其他'],
+      statisticsClassifyData:[],
+      title: '',
+      show: false,
+      accountShow: false,
+      data: [],
+      deleteId: '',
+      formType: '',
+      formData: {
+        certificate:null,
+        businessLicense:null,
+      },
+      ruleValidate: {
+        
+        // categoryCode: [
+        //   { required: true, message: '物料类型不能为空', trigger: 'blur' }
+        // ],
+        // name: [
+        //   { required: true, message: '供应商名称不能为空', trigger: 'blur' }
+        // ],
+        // accountDate: [
+        //   { required: true, message: '账期不能为空', trigger: 'blur' }
+        // ],
+
+        
+      },
+      formConfig: [
+        {
+          type: 'input',
+          label: '供应商代码',
+          key: 'code',
+          disabled: true,
+          placeholder: '系统自动生成',
+          span: 12
+        },
+        // {
+        //   type: 'selectSearch',
+        //   label: '绑定用户',
+        //   key: 'bingdUserID',
+        //   list: [],
+        //   placeholder: '请输入绑定用户',
+        //   span: 12
+        // },
+        {
+          type: 'input',
+          label: '登录账户',
+          key: 'userAccount',
+          placeholder: '请输入登录账户',
+          span: 12
+        },
+        {
+          type: 'selectSearch',
+          label: '物料类型',
+          key: 'categoryCode',
+          list: [],
+          placeholder: '请选择物料类型',
+          span: 12
+        },
+        {
+          type: 'upload',
+          label: '供应商名称',
+          text: '上传营业执照',
+          key: 'name'
+        },
+        {
+          type: 'input',
+          label: '账期',
+          key: 'accountDate',
+          placeholder: '请输入账期',
+          span: 12
+        },
+        {
+          type: 'input',
+          label: '账期说明',
+          key: 'accountDateRemark',
+          placeholder: '请输入账期说明',
+          span: 12
+        },
+        {
+          type: 'upload-flie',
+          label: '营业执照',
+          text: '上传营业执照',
+          key: 'businessLicense',
+        },
+        {
+          type: 'upload-flie',
+          label: 'ca65',
+          text: '加州65号法令合规测试证书',
+          key: 'certificate'
+        },
+        {
+          type: 'input',
+          comType: 'textarea',
+          label: '备注',
+          key: 'remark',
+          placeholder: '请输入仓库说明'
+        },
+        {
+          type: 'tabs',
+          hiddenLabel: true,
+          tabs: [
+            {
+              title: '工商信息',
+              forms: [
+                {
+                  type: 'input',
+                  label: '法定代表人',
+                  key: 'legalPerson',
+                  placeholder: '请输入法定代表人',
+                  span: 12
+                },
+                {
+                  type: 'input',
+                  label: '社会信用代码',
+                  key: 'societyCreditCode',
+                  placeholder: '请输入社会信用代码',
+                  span: 12
+                },
+                {
+                  type: 'input',
+                  label: '注册地址',
+                  key: 'registeredAddress',
+                  placeholder: '请输入注册地址'
+                },
+                {
+                  type: 'input',
+                  label: '成立日期',
+                  key: 'establishDate',
+                  placeholder: '请输入成立日期',
+                  span: 12
+                },
+                {
+                  type: 'input',
+                  label: '注册资本',
+                  key: 'registeredCapital',
+                  placeholder: '请输入注册资本',
+                  span: 12
+                },
+                {
+                  type: 'input',
+                  label: '企业类型',
+                  key: 'enterpriseType',
+                  placeholder: '请输入企业类型',
+                  span: 12
+                },
+                {
+                  type: 'input',
+                  label: '营业期限',
+                  key: 'businessTerm',
+                  placeholder: '请输入营业期限',
+                  span: 12
+                },
+                {
+                  type: 'input',
+                  comType: 'textarea',
+                  label: '营业范围',
+                  key: 'businessScope',
+                  placeholder: '请输入营业范围'
+                }
+              ]
+            },
+            {
+              title: '联系信息',
+              forms: [
+                {
+                  type: 'input',
+                  label: '联系人',
+                  key: 'linkMen',
+                  placeholder: '请输入联系人',
+                  span: 12
+                },
+                {
+                  type: 'input',
+                  label: '手机号码',
+                  key: 'mobile',
+                  placeholder: '请输入手机号码',
+                  span: 12
+                },
+                {
+                  type: 'input',
+                  label: '固定电话',
+                  key: 'telephone',
+                  placeholder: '请输入固定电话',
+                  span: 12
+                },
+                {
+                  type: 'input',
+                  label: '电子邮箱',
+                  key: 'email',
+                  placeholder: '请输入电子邮箱',
+                  span: 12
+                },
+                {
+                  type: 'input',
+                  label: '传真',
+                  key: 'fax',
+                  placeholder: '请输入传真',
+                  span: 12
+                }
+              ]
+            },
+            {
+              title: '账户信息',
+              forms: [
+                {
+                  type: 'input',
+                  label: '对公户名',
+                  key: 'bankAccoutName',
+                  placeholder: '请输入对公户名',
+                  span: 12
+                },
+                {
+                  type: 'input',
+                  label: '开户银行',
+                  key: 'openBank',
+                  placeholder: '请输入开户银行',
+                  span: 12
+                },
+                {
+                  type: 'input',
+                  label: '对公账号',
+                  key: 'bankAccout',
+                  placeholder: '请输入对公账号',
+                  span: 12
+                },
+                {
+                  type: '',
+                  hiddenLabel: true
+                },
+                {
+                  type: 'input',
+                  label: '对私户名',
+                  key: 'priOpenBank',
+                  placeholder: '请输入对私户名',
+                  span: 12
+                },
+                {
+                  type: 'input',
+                  label: '开户银行',
+                  key: 'priBankAccout',
+                  placeholder: '请输入开户银行',
+                  span: 12
+                },
+                {
+                  type: 'input',
+                  label: '对私账号',
+                  key: 'priBankAccoutName',
+                  placeholder: '请输入对私账号',
+                  span: 12
+                }
+              ]
+            },
+            {
+              title: '维护记录',
+              type: 'picList',
+              key: 'facPicList'
+            },
+            {
+              title: '其他资质',
+              type: 'quaList',
+              key: 'facquaList'
+            }
+          ]
+        }
+      ],
+      editFormConfig: [
+        {
+          type: 'input',
+          label: '供应商代码',
+          key: 'code',
+          placeholder: '请输入供应商代码',
+          span: 12
+        },
+        // {
+        //   type: 'selectSearch',
+        //   label: '绑定用户',
+        //   key: 'bingdUserID',
+        //   list: [],
+        //   placeholder: '请输入绑定用户',
+        //   span: 12
+        // },
+        {
+          type: 'input',
+          label: '登录账户',
+          disabled: true,
+          key: 'userAccount',
+          placeholder: '请输入登录账户',
+          span: 12
+        },
+        {
+          type: 'selectSearch',
+          label: '物料类型',
+          key: 'categoryCode',
+          list: [],
+          placeholder: '请选择物料类型',
+          span: 12
+        },
+        {
+          type: 'upload',
+          label: '供应商名称',
+          text: '上传营业执照',
+          key: 'name'
+        },
+        {
+          type: 'input',
+          label: '账期',
+          key: 'accountDate',
+          placeholder: '请输入账期',
+          span: 12
+        },
+        {
+          type: 'input',
+          label: '账期说明',
+          key: 'accountDateRemark',
+          placeholder: '请输入账期说明',
+          span: 12
+        },
+        {
+          type: 'upload-flie',
+          label: '营业执照',
+          text: '上传营业执照',
+          key: 'businessLicense',
+        },
+        {
+          type: 'upload-flie',
+          label: 'ca65',
+          text: '加州65号法令合规测试证书',
+          key: 'certificate'
+        },
+        {
+          type: 'input',
+          comType: 'textarea',
+          label: '备注',
+          key: 'remark',
+          placeholder: '请输入仓库说明'
+        },
+        {
+          type: 'tabs',
+          hiddenLabel: true,
+          tabs: [
+            {
+              title: '工商信息',
+              forms: [
+                {
+                  type: 'input',
+                  label: '法定代表人',
+                  key: 'legalPerson',
+                  placeholder: '请输入法定代表人',
+                  span: 12
+                },
+                {
+                  type: 'input',
+                  label: '社会信用代码',
+                  key: 'societyCreditCode',
+                  placeholder: '请输入社会信用代码',
+                  span: 12
+                },
+                {
+                  type: 'input',
+                  label: '注册地址',
+                  key: 'registeredAddress',
+                  placeholder: '请输入注册地址'
+                },
+                {
+                  type: 'input',
+                  label: '成立日期',
+                  key: 'establishDate',
+                  placeholder: '请输入成立日期',
+                  span: 12
+                },
+                {
+                  type: 'input',
+                  label: '注册资本',
+                  key: 'registeredCapital',
+                  placeholder: '请输入注册资本',
+                  span: 12
+                },
+                {
+                  type: 'input',
+                  label: '企业类型',
+                  key: 'enterpriseType',
+                  placeholder: '请输入企业类型',
+                  span: 12
+                },
+                {
+                  type: 'input',
+                  label: '营业期限',
+                  disabled: true,
+                  key: 'businessTerm',
+                  placeholder: '请输入营业期限',
+                  span: 12
+                },
+                {
+                  type: 'input',
+                  comType: 'textarea',
+                  label: '营业范围',
+                  key: 'businessScope',
+                  placeholder: '请输入营业范围'
+                }
+              ]
+            },
+            {
+              title: '联系信息',
+              forms: [
+                {
+                  type: 'input',
+                  label: '联系人',
+                  key: 'linkMen',
+                  placeholder: '请输入联系人',
+                  span: 12
+                },
+                {
+                  type: 'input',
+                  label: '手机号码',
+                  key: 'mobile',
+                  placeholder: '请输入手机号码',
+                  span: 12
+                },
+                {
+                  type: 'input',
+                  label: '固定电话',
+                  key: 'telephone',
+                  placeholder: '请输入固定电话',
+                  span: 12
+                },
+                {
+                  type: 'input',
+                  label: '电子邮箱',
+                  key: 'email',
+                  placeholder: '请输入电子邮箱',
+                  span: 12
+                },
+                {
+                  type: 'input',
+                  label: '传真',
+                  key: 'fax',
+                  placeholder: '请输入传真',
+                  span: 12
+                }
+              ]
+            },
+            {
+              title: '账户信息',
+              forms: [
+                {
+                  type: 'input',
+                  label: '对公户名',
+                  key: 'bankAccoutName',
+                  placeholder: '请输入对公户名',
+                  span: 12
+                },
+                {
+                  type: 'input',
+                  label: '开户银行',
+                  key: 'openBank',
+                  placeholder: '请输入开户银行',
+                  span: 12
+                },
+                {
+                  type: 'input',
+                  label: '对公账号',
+                  key: 'bankAccout',
+                  placeholder: '请输入对公账号',
+                  span: 12
+                },
+                {
+                  type: '',
+                  hiddenLabel: true
+                },
+                {
+                  type: 'input',
+                  label: '对私户名',
+                  key: 'priOpenBank',
+                  placeholder: '请输入对私户名',
+                  span: 12
+                },
+                {
+                  type: 'input',
+                  label: '开户银行',
+                  key: 'priBankAccout',
+                  placeholder: '请输入开户银行',
+                  span: 12
+                },
+                {
+                  type: 'input',
+                  label: '对私账号',
+                  key: 'priBankAccoutName',
+                  placeholder: '请输入对私账号',
+                  span: 12
+                }
+              ]
+            },
+            {
+              title: '维护记录',
+              type: 'picList',
+              key: 'facPicList'
+            },
+            {
+              title: '主营价格',
+              type: 'material'
+            },
+            {
+              title: '采购分析',
+              type: 'charts'
+            },
+            {
+              title: '维护记录',
+              type: 'picList',
+              key: 'facPicList'
+            },
+            {
+              title: '其他资质',
+              type: 'quaList',
+              key: 'facquaList'
+            }
+            
+          ]
+        },
+      ],
+      showFormConfig: [
+        {
+          type: 'input',
+          label: '供应商代码',
+          disabled: true,
+          key: 'code',
+          placeholder: '请输入供应商代码',
+          span: 12
+        },
+        // {
+        //   type: 'selectSearch',
+        //   label: '绑定用户',
+        //   disabled: true,
+        //   key: 'bingdUserID',
+        //   list: [],
+        //   placeholder: '请输入绑定用户',
+        //   span: 12
+        // },
+        {
+          type: 'input',
+          label: '登录账户',
+          disabled: true,
+          key: 'userAccount',
+          placeholder: '请输入登录账户',
+          span: 12
+        },
+        {
+          type: 'selectSearch',
+          label: '物料类型',
+          key: 'categoryCode',
+          disabled: true,
+          list: [],
+          placeholder: '请选择物料类型',
+          span: 12
+        },
+        {
+          type: 'upload',
+          label: '供应商名称',
+          disabled: true,
+          text: '上传营业执照',
+          key: 'name'
+        },
+        {
+          type: 'input',
+          label: '账期',
+          disabled: true,
+          key: 'accountDate',
+          placeholder: '请输入账期',
+          span: 12
+        },
+        {
+          type: 'input',
+          label: '账期说明',
+          disabled: true,
+          key: 'accountDateRemark',
+          placeholder: '请输入账期说明',
+          span: 12
+        },
+        {
+          type: 'upload-flie',
+          label: '营业执照',
+          text: '上传营业执照',
+          key: 'businessLicense',
+        },
+        {
+          type: 'upload-flie',
+          label: 'ca65',
+          text: '加州65号法令合规测试证书',
+          key: 'certificate'
+        },
+        {
+          type: 'input',
+          comType: 'textarea',
+          label: '备注',
+          disabled: true,
+          key: 'remark',
+          placeholder: '请输入仓库说明'
+        },
+        {
+          type: 'tabs',
+          hiddenLabel: true,
+          tabs: [
+            {
+              title: '工商信息',
+              forms: [
+                {
+                  type: 'input',
+                  label: '法定代表人',
+                  disabled: true,
+                  key: 'legalPerson',
+                  placeholder: '请输入法定代表人',
+                  span: 12
+                },
+                {
+                  type: 'input',
+                  label: '社会信用代码',
+                  disabled: true,
+                  key: 'societyCreditCode',
+                  placeholder: '请输入社会信用代码',
+                  span: 12
+                },
+                {
+                  type: 'input',
+                  label: '注册地址',
+                  disabled: true,
+                  key: 'registeredAddress',
+                  placeholder: '请输入注册地址'
+                },
+                {
+                  type: 'input',
+                  label: '成立日期',
+                  disabled: true,
+                  key: 'establishDate',
+                  placeholder: '请输入成立日期',
+                  span: 12
+                },
+                {
+                  type: 'input',
+                  label: '注册资本',
+                  disabled: true,
+                  key: 'registeredCapital',
+                  placeholder: '请输入注册资本',
+                  span: 12
+                },
+                {
+                  type: 'input',
+                  label: '企业类型',
+                  disabled: true,
+                  key: 'enterpriseType',
+                  placeholder: '请输入企业类型',
+                  span: 12
+                },
+                {
+                  type: 'input',
+                  label: '营业期限',
+                  disabled: true,
+                  key: 'businessTerm',
+                  placeholder: '请输入营业期限',
+                  span: 12
+                },
+                {
+                  type: 'input',
+                  comType: 'textarea',
+                  label: '营业范围',
+                  disabled: true,
+                  key: 'businessScope',
+                  placeholder: '请输入营业范围'
+                }
+              ]
+            },
+            {
+              title: '联系信息',
+              forms: [
+                {
+                  type: 'input',
+                  label: '联系人',
+                  disabled: true,
+                  key: 'linkMen',
+                  placeholder: '请输入联系人',
+                  span: 12
+                },
+                {
+                  type: 'input',
+                  label: '手机号码',
+                  disabled: true,
+                  key: 'mobile',
+                  placeholder: '请输入手机号码',
+                  span: 12
+                },
+                {
+                  type: 'input',
+                  label: '固定电话',
+                  disabled: true,
+                  key: 'telephone',
+                  placeholder: '请输入固定电话',
+                  span: 12
+                },
+                {
+                  type: 'input',
+                  label: '电子邮箱',
+                  disabled: true,
+                  key: 'email',
+                  placeholder: '请输入电子邮箱',
+                  span: 12
+                },
+                {
+                  type: 'input',
+                  label: '传真',
+                  disabled: true,
+                  key: 'fax',
+                  placeholder: '请输入传真',
+                  span: 12
+                }
+              ]
+            },
+            {
+              title: '账户信息',
+              forms: [
+                {
+                  type: 'input',
+                  label: '对公户名',
+                  disabled: true,
+                  key: 'bankAccoutName',
+                  placeholder: '请输入对公户名',
+                  span: 12
+                },
+                {
+                  type: 'input',
+                  label: '开户银行',
+                  disabled: true,
+                  key: 'openBank',
+                  placeholder: '请输入开户银行',
+                  span: 12
+                },
+                {
+                  type: 'input',
+                  label: '对公账号',
+                  disabled: true,
+                  key: 'bankAccout',
+                  placeholder: '请输入对公账号',
+                  span: 12
+                },
+                {
+                  type: '',
+                  hiddenLabel: true
+                },
+                {
+                  type: 'input',
+                  label: '对私户名',
+                  disabled: true,
+                  key: 'priOpenBank',
+                  placeholder: '请输入对私户名',
+                  span: 12
+                },
+                {
+                  type: 'input',
+                  label: '开户银行',
+                  disabled: true,
+                  key: 'priBankAccout',
+                  placeholder: '请输入开户银行',
+                  span: 12
+                },
+                {
+                  type: 'input',
+                  label: '对私账号',
+                  disabled: true,
+                  key: 'priBankAccoutName',
+                  placeholder: '请输入对私账号',
+                  span: 12
+                }
+              ]
+            },
+            {
+              title: '维护记录',
+              type: 'picList',
+              key: 'facPicList'
+            },
+            {
+              title: '主营价格',
+              type: 'material'
+            },
+            {
+              title: '采购分析',
+              type: 'charts'
+            },
+            {
+              title: '其他资质',
+              type: 'quaList',
+              key: 'facquaList'
+            }
+          ]
+        }
+      ],
+      columns: [
+        {
+          title: '序号',
+          type: 'index',
+          width: 60,
+          align: 'center'
+        },
+        {
+          title: '供应商代码',
+          key: 'code',
+          minWidth: 100
+        },
+        {
+          title: '供应商名称',
+          key: 'name',
+          minWidth: 300,
+          render(h,p){
+            return h(renderListimgs,{
+              props: {
+                row: p.row
+              }
+            })
+          },
+        },
+        {
+          title: '物料类型',
+          key: 'categoryName',
+          minWidth: 150
+        },
+        {
+          title: '账期',
+          key: 'accountDate',
+          minWidth: 100
+        },
+        {
+          title: '账期说明',
+          key: 'accountDateRemark',
+          minWidth: 100
+        },
+        {
+          title: '联系人',
+          key: 'linkMen',
+          minWidth: 100
+        },
+        {
+          title: '联系电话',
+          key: 'telephone',
+          minWidth: 150
+        },
+        {
+          title: '操作',
+          key: 'action',
+          align: 'center',
+          fixed: 'right',
+          width: 150,
+          render: (h, params) => {
+            return h('div', [
+              h(
+                'Icon',
+                {
+                  props: {
+                    custom: 'iconfont icon-chakan',
+                    size: '20',
+                    color: '#6bc01e'
+                  },
+                  style: {
+                    marginRight: '20px'
+                  },
+                  on: {
+                    click: () => {
+                      this.show = true
+                      axios.get('/cloudApi/supplier/detail?id=' + params.row.id,{}).then(res=>{
+                        this.formData = res.data.data
+                        this.formType = 'form'
+                        this.title = '供应商详情'
+                        this.show = true
+                      })
+                    }
+                  }
+                },
+                '查看明细'
+              ),
+              h(
+                'Icon',
+                {
+                  props: {
+                    custom: 'iconfont icon-edit',
+                    size: '20',
+                    color: '#087BE1'
+                  },
+                  style: {
+                    marginRight: '20px'
+                  },
+                  on: {
+                    click: () => {
+                      
+                      axios.get('/cloudApi/supplier/detail?id=' + params.row.id,{}).then(res=>{
+                        this.formData = res.data.data
+                        
+                        this.formType = 'edit'
+                        this.title = '修改'
+                        this.show = true
+                      })
+                    }
+                  }
+                },
+                '修改'
+              ),
+              h(
+                'Icon',
+                {
+                  props: {
+                    custom: 'iconfont icon-delete',
+                    size: '20',
+                    color: 'red'
+                  },
+                  on: {
+                    click: () => {
+                      this.$MyModal.show({ text: '是否删除？' }).$on('confirm', () => {
+                        axios.post('/cloudApi/supplier/delete',{id:params.row.id}).then(res=>{
+                          if (res.data.code == 200) {
+                            v.$Message.info(res.data.msg)
+                            v.getList()
+                          }
+                        })
+                      })
+                    }
+                  }
+                },
+                '删除'
+              )
+            ])
+          }
+        }
+      ],
+      tableFilter: [
+        {
+          name: 'Input',
+          value: 'key',
+          placeholder: '请输入关键字'
+        },
+        {
+          name: 'Button',
+          type: 'primary',
+          text: '查询',
+          e: 'search'
+        },
+        {
+          name: 'Button',
+          type: 'primary',
+          text: '添加',
+          align: 'right',
+          e: 'add'
+        },
+        {
+          name: 'Button',
+          type: 'primary',
+          text: '价格维护',
+          align: 'right',
+          e: 'priceHandle'
+        },
+        {
+          name: 'Button',
+          type: 'primary',
+          text: '收款账号维护',
+          align: 'right',
+          width: '300',
+          e: 'account'
+        }
+      ],
+      params: {
+        pageNum: 1,
+        pageSize: 10,
+        total: 0,
+        TechnologyType:null,
+        Purpose:null,
+        search:null,
+      }
+    }
+  },
+  methods: {
+    cfm (type, formData) {
+      if (type === 'add') {
+        axios.post('/cloudApi/supplier/add',formData).then(res=>{
+          this.show = false
+          this.$Message.info(res.data.msg)
+          this.getList()
+        })
+        // FactoryAdd(formData).then(res => {
+        //   if (res.code === 0) {
+        //     this.show = false
+        //     this.$Message.info(res.msg)
+        //     this.getList()
+        //   }
+        // })
+      } else if (type === 'edit') {
+        
+        axios.post('/cloudApi/supplier/edit',formData).then(res=>{
+          this.show = false
+          this.$Message.info(res.data.msg)
+          this.getList()
+        })
+        
+      }
+    },
+    // 检索条件事件处理
+    eventHandle (option) {
+      switch (option._evnet) {
+        case 'search':
+          console.log(option)
+          this.params.pageNum = 1
+          this.params.search = option.key
+          this.getList()
+          break
+        case 'add':
+          this.formType = 'add'
+          this.title = '添加供应商'
+          this.show = true
+          break
+        case 'priceHandle':
+          this.$router.push({
+            name: 'provider_price_maintenance'
+          })
+          break
+        case 'account':
+          this.accountShow = true
+          break
+      }
+    },
+    changePage (pageNum) {
+      this.params.pageNum = pageNum
+      this.getList()
+    },
+    getMaterialCategoryZTree () {
+      GetMaterialCategoryZTree().then(res => {
+        if (res.code === 0) {
+          let list = res.result.map(item => {
+            return {
+              label: item.name,
+              value: item.value
+            }
+          })
+          this.formConfig[2].list = list
+          this.editFormConfig[2].list = list
+          this.showFormConfig[2].list = list
+        }
+      })
+    },
+    getUserPageList () {
+      GetUserPageList({
+        pageNum: 1,
+        pageSize: 9999
+      }).then(res => {
+        if (res.code === 0) {
+          let list = res.result.list.map(item => {
+            return {
+              label: item.realName,
+              value: item.id
+            }
+          })
+          this.formConfig[1].list = list
+          this.editFormConfig[1].list = list
+          this.showFormConfig[1].list = list
+        }
+      })
+    },
+    getList () {
+      axios
+				.post('/cloudApi/supplier/list', {...this.params})
+				.then((res) => {
+					this.data = res.data.data
+				})
+      axios
+				.post('/cloudApi/supplier/list/count', {...this.params})
+				.then((res) => {
+					
+          this.params.total = res.data.data
+				})
+        
+      // GetFactoryPageList(this.params).then(res => {
+      //   if (res.code === 0) {
+      //     this.data = res.result.list
+      //     this.params.total = res.result.totalCount
+      //   }
+      // })
+    },
+    getStatisticsClassify(){
+      axios
+				.get('/cloudApi/supplier/statisticsClassify', {})
+				.then((res) => {
+					this.statisticsClassifyData = res.data.data
+				})
+      
+    },
+
+    
+  },
+  mounted () {
+    this.getList()
+    // this.getUserPageList()
+    this.getMaterialCategoryZTree()
+    this.getStatisticsClassify()
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.container {
+  
+  .tabs-warp{
+    height: 60px;
+    line-height: 60px;
+    border-bottom: 1px solid #979797;
+    margin-bottom: 10px;
+    display: flex;
+    
+    div{
+      width: 20%;
+      font-size: 16px;
+      text-align: center;
+      position: relative;
+      cursor: pointer;
+      span{
+        color:#EF0000
+      }
+    }
+    div.active::before{
+      position: absolute;
+      content:" ";
+      left: 0;
+      right:0;
+      bottom:0;
+      height:4px;
+      background: #1A3AF0;
+    }
+  }
+}
+</style>

src/view/base-manage/provider-maintenance/purchaseList.vue

@@ -0,0 +1,559 @@
+<!-- 供应商维护 -->
+<template>
+	<div class="container">
+		<div class="tabs-warp">
+			<div
+				@click="
+					params.TechnologyType = i.technologyType
+					changePage(1)
+				"
+				:class="
+					params.TechnologyType == i.technologyType ? 'active' : ''
+				"
+				v-for="i in statisticsClassifyData"
+				:key="i.technologyType"
+			>
+				{{ technologyTypeList[i.technologyType] }}（<span>{{
+					i.categoryCount
+				}}</span
+				>）
+			</div>
+		</div>
+		<my-table
+			:calcHeight="110"
+			:data="data"
+			:columns="columns"
+			:table-filter="tableFilter"
+			:table-page="params"
+			@event-handle="eventHandle"
+			@on-change="changePage"
+		>
+		</my-table>
+		<my-modal-form
+			v-model="show"
+			title="供应商详情"
+			:isMaterial="true"
+			width="800px"
+			:config="showFormConfig"
+			:data="formData"
+			:type="'form'"
+			@confirm="cfm"
+		>
+		</my-modal-form>
+	</div>
+</template>
+
+<script>
+import MyTable from '_c/my-table/my-table2'
+import MyModalForm from '_c/my-modal-form/my-modal-form'
+import ProviderAccountForm from './provider-account-form'
+import renderListimgs from '_c/my-table/renderListimgs'
+import axios from 'axios'
+export default {
+	name: 'provider_maintenance',
+	components: {
+		MyTable,
+		MyModalForm,
+		ProviderAccountForm,
+		renderListimgs,
+	},
+	data() {
+		const v = this
+		return {
+			formData: {},
+			show: false,
+			tableFilter: [
+				{
+					name: 'Input',
+					value: 'key',
+					placeholder: '请输入关键字',
+				},
+				{
+					name: 'Button',
+					type: 'primary',
+					text: '查询',
+					e: 'search',
+				},
+
+				{
+					name: 'Button',
+					type: 'primary',
+					text: '供应商历史付款记录',
+					align: 'right',
+					width: '300',
+					e: 'account',
+				},
+			],
+			data: [],
+			showFormConfig: [
+				{
+					type: 'input',
+					label: '供应商代码',
+					disabled: true,
+					key: 'code',
+					placeholder: '请输入供应商代码',
+					span: 12,
+				},
+				// {
+				//   type: 'selectSearch',
+				//   label: '绑定用户',
+				//   disabled: true,
+				//   key: 'bingdUserID',
+				//   list: [],
+				//   placeholder: '请输入绑定用户',
+				//   span: 12
+				// },
+				{
+					type: 'input',
+					label: '登录账户',
+					disabled: true,
+					key: 'userAccount',
+					placeholder: '请输入登录账户',
+					span: 12,
+				},
+				{
+					type: 'selectSearch',
+					label: '物料类型',
+					key: 'categoryCode',
+					disabled: true,
+					list: [],
+					placeholder: '请选择物料类型',
+					span: 12,
+				},
+				{
+					type: 'upload',
+					label: '供应商名称',
+					disabled: true,
+					text: '上传营业执照',
+					key: 'name',
+				},
+				{
+					type: 'input',
+					label: '账期',
+					disabled: true,
+					key: 'accountDate',
+					placeholder: '请输入账期',
+					span: 12,
+				},
+				{
+					type: 'input',
+					label: '账期说明',
+					disabled: true,
+					key: 'accountDateRemark',
+					placeholder: '请输入账期说明',
+					span: 12,
+				},
+				{
+					type: 'input',
+					comType: 'textarea',
+					label: '备注',
+					disabled: true,
+					key: 'remark',
+					placeholder: '请输入仓库说明',
+				},
+				{
+					type: 'tabs',
+					hiddenLabel: true,
+					tabs: [
+						{
+							title: '工商信息',
+							forms: [
+								{
+									type: 'input',
+									label: '法定代表人',
+									disabled: true,
+									key: 'legalPerson',
+									placeholder: '请输入法定代表人',
+									span: 12,
+								},
+								{
+									type: 'input',
+									label: '社会信用代码',
+									disabled: true,
+									key: 'societyCreditCode',
+									placeholder: '请输入社会信用代码',
+									span: 12,
+								},
+								{
+									type: 'input',
+									label: '注册地址',
+									disabled: true,
+									key: 'registeredAddress',
+									placeholder: '请输入注册地址',
+								},
+								{
+									type: 'input',
+									label: '成立日期',
+									disabled: true,
+									key: 'establishDate',
+									placeholder: '请输入成立日期',
+									span: 12,
+								},
+								{
+									type: 'input',
+									label: '注册资本',
+									disabled: true,
+									key: 'registeredCapital',
+									placeholder: '请输入注册资本',
+									span: 12,
+								},
+								{
+									type: 'input',
+									label: '企业类型',
+									disabled: true,
+									key: 'enterpriseType',
+									placeholder: '请输入企业类型',
+									span: 12,
+								},
+								{
+									type: 'input',
+									label: '营业期限',
+									disabled: true,
+									key: 'businessTerm',
+									placeholder: '请输入营业期限',
+									span: 12,
+								},
+								{
+									type: 'input',
+									comType: 'textarea',
+									label: '营业范围',
+									disabled: true,
+									key: 'businessScope',
+									placeholder: '请输入营业范围',
+								},
+							],
+						},
+						{
+							title: '联系信息',
+							forms: [
+								{
+									type: 'input',
+									label: '联系人',
+									disabled: true,
+									key: 'linkMen',
+									placeholder: '请输入联系人',
+									span: 12,
+								},
+								{
+									type: 'input',
+									label: '手机号码',
+									disabled: true,
+									key: 'mobile',
+									placeholder: '请输入手机号码',
+									span: 12,
+								},
+								{
+									type: 'input',
+									label: '固定电话',
+									disabled: true,
+									key: 'telephone',
+									placeholder: '请输入固定电话',
+									span: 12,
+								},
+								{
+									type: 'input',
+									label: '电子邮箱',
+									disabled: true,
+									key: 'email',
+									placeholder: '请输入电子邮箱',
+									span: 12,
+								},
+								{
+									type: 'input',
+									label: '传真',
+									disabled: true,
+									key: 'fax',
+									placeholder: '请输入传真',
+									span: 12,
+								},
+							],
+						},
+						{
+							title: '账户信息',
+							forms: [
+								{
+									type: 'input',
+									label: '对公户名',
+									disabled: true,
+									key: 'bankAccoutName',
+									placeholder: '请输入对公户名',
+									span: 12,
+								},
+								{
+									type: 'input',
+									label: '开户银行',
+									disabled: true,
+									key: 'openBank',
+									placeholder: '请输入开户银行',
+									span: 12,
+								},
+								{
+									type: 'input',
+									label: '对公账号',
+									disabled: true,
+									key: 'bankAccout',
+									placeholder: '请输入对公账号',
+									span: 12,
+								},
+								{
+									type: '',
+									hiddenLabel: true,
+								},
+								{
+									type: 'input',
+									label: '对私户名',
+									disabled: true,
+									key: 'priOpenBank',
+									placeholder: '请输入对私户名',
+									span: 12,
+								},
+								{
+									type: 'input',
+									label: '开户银行',
+									disabled: true,
+									key: 'priBankAccout',
+									placeholder: '请输入开户银行',
+									span: 12,
+								},
+								{
+									type: 'input',
+									label: '对私账号',
+									disabled: true,
+									key: 'priBankAccoutName',
+									placeholder: '请输入对私账号',
+									span: 12,
+								},
+							],
+						},
+						{
+							title: '维护记录',
+							type: 'picList',
+							key: 'facPicList',
+						},
+						{
+							title: '主营价格',
+							type: 'material',
+						},
+						{
+							title: '采购分析',
+							type: 'charts',
+						},
+						{
+							title: '其他资质',
+							type: 'quaList',
+							key: 'facquaList',
+						},
+					],
+				},
+			],
+			technologyTypeList: ['直喷', '热转', '打纸', '墨水', '其他'],
+			columns: [
+				{
+					title: '序号',
+					type: 'index',
+					width: 60,
+					align: 'center',
+				},
+				{
+					title: '供应商',
+					key: 'name',
+					minWidth: 300,
+					render(h, p) {
+						return h(renderListimgs, {
+							props: {
+								row: p.row,
+							},
+						})
+					},
+				},
+				{
+					title: '物料类型',
+					key: 'categoryName',
+					minWidth: 150,
+				},
+				{
+					title: '采购总额',
+					key: 'sumMoney',
+					minWidth: 100,
+				},
+				{
+					title: '去年采购额',
+					key: 'lastYearMoney',
+					minWidth: 100,
+				},
+				{
+					title: '今年采购额',
+					key: 'yearMoney',
+					minWidth: 100,
+				},
+				{
+					title: '上月采购额',
+					key: 'lastMonthMoney',
+					minWidth: 150,
+				},
+				{
+					title: '本月采购额',
+					key: 'monthMoney',
+					minWidth: 150,
+				},
+				{
+					title: '操作',
+					key: 'action',
+					align: 'center',
+					fixed: 'right',
+					width: 200,
+					render: (h, params) => {
+						return h('div', [
+							h(
+								'span',
+								{
+									style: {
+										marginRight: '20px',
+										color: '#1A3AF0',
+										cursor: 'pointer'
+									},
+									on: {
+										click: () => {
+											this.show = true
+											axios
+												.get(
+													'/cloudApi/supplier/detail?id=' +
+														params.row.id,
+													{}
+												)
+												.then((res) => {
+													this.formData =
+														res.data.data
+													this.formType = 'form'
+													this.title = '供应商详情'
+													this.show = true
+												})
+										},
+									},
+								},
+								'基础资料'
+							),
+							h(
+								'span',
+								{
+									style: {
+										marginRight: '20px',
+										color: '#1A3AF0',
+										cursor: 'pointer'
+									},
+									on: {
+										click: () => {
+											
+											this.$router.push({
+												name:"purchaseListDtl",
+												query:params.row
+											})
+										},
+									},
+								},
+								'采购详情'
+							),
+						])
+					},
+				},
+			],
+			params: {
+				pageNum: 1,
+				pageSize: 10,
+				total: 0,
+				TechnologyType: null,
+				Purpose: null,
+				search: null,
+			},
+			statisticsClassifyData: [],
+		}
+	},
+	methods: {
+		cfm() {},
+		// 检索条件事件处理
+		eventHandle(option) {
+			switch (option._evnet) {
+				case 'search':
+					this.params.pageNum = 1
+					this.params.key = option.key
+					this.getList()
+					break
+				case 'add':
+					this.formType = 'add'
+					this.title = '添加供应商'
+					this.show = true
+					break
+				case 'priceHandle':
+					this.$router.push({
+						name: 'provider_price_maintenance',
+					})
+					break
+				case 'account':
+					this.$router.push('/pay-history2')
+					break
+			}
+		},
+		getStatisticsClassify() {
+			axios
+				.get('/cloudApi/supplier/statisticsClassify', {})
+				.then((res) => {
+					this.statisticsClassifyData = res.data.data
+				})
+		},
+		changePage(pageNum) {
+			this.params.pageNum = pageNum
+			this.getList()
+		},
+		getList() {
+			this.$Spin.show()
+			axios
+				.post('/cloudApi/supplier/purchase/list', { ...this.params,search:this.params.key })
+				.then((res) => {
+					this.$Spin.hide()
+					this.data = res.data.data
+				})
+			axios
+				.post('/cloudApi/supplier/list/count', { ...this.params,search:this.params.key })
+				.then((res) => {
+					this.params.total = res.data.data
+				})
+		},
+	},
+	mounted() {
+		this.getList()
+		this.getStatisticsClassify()
+	},
+}
+</script>
+
+<style lang="less" scoped>
+.container {
+	.tabs-warp {
+		height: 60px;
+		line-height: 60px;
+		border-bottom: 1px solid #979797;
+		margin-bottom: 10px;
+		display: flex;
+
+		div {
+			width: 20%;
+			font-size: 16px;
+			text-align: center;
+			position: relative;
+			cursor: pointer;
+			span {
+				color: #ef0000;
+			}
+		}
+		div.active::before {
+			position: absolute;
+			content: ' ';
+			left: 0;
+			right: 0;
+			bottom: 0;
+			height: 4px;
+			background: #1a3af0;
+		}
+	}
+}
+</style>

src/view/base-manage/provider-maintenance/purchaseListDtl.vue

@@ -0,0 +1,421 @@
+<template>
+    <div>
+        <header>
+            <h2>{{dtl.name}}</h2>
+            <Button @click="$router.push('purchaseList')">返回</Button>
+        </header>
+        <div class="total-warp">
+            <ul style="width:72%">
+                <li>
+                    {{dtl.MaterialTypeCount}}</br>
+                    <span>采购物料数</span>
+                </li>
+                <li>
+                    {{dtl.sumMoney}}</br>
+                    <span>采购总额</span>
+                </li>
+                <li>
+                    {{dtl.lastYearMoney}}</br>
+                    <span>去年采购额</span>
+                </li>
+                <li>
+                    {{dtl.yearMoney}}</br>
+                    <span>今年采购额</span>
+                </li>
+                <li>
+                    {{dtl.lastMonthMoney}}</br>
+                    <span>上月采购额</span>
+                </li>
+                <li>
+                    {{dtl.monthMoney}}</br>
+                    <span>本月采购额</span>
+                </li>
+                
+            </ul>
+            <ul style="width:26%">
+                <li style="width:50%">
+                    {{dtl.BackCount}}</br>
+                    <span>退货次数</span>
+                </li>
+                <li style="width:50%">
+                    {{dtl.warningTypeCount}}</br>
+                    <span>问题记录</span>
+                </li>
+            </ul>
+        </div>
+        <h3>采购物料分析（在该供应商采购物料种类共计<span>{{data1.length}}</span>款）</h3>
+        <Table :columns="columns1" :data="data1"></Table>
+        <Page 
+            style="margin:10px auto 0;text-align: center;" 
+            :total="req1.total" 
+            :current="req1.pageNum" 
+            :page-size="5" 
+            @on-change="(num)=>pageChange(num,'getSpmAnalyse','req1')" 
+        />
+        <h3>
+            月度采购分析
+            <DatePicker format="yyyy" type="year" v-model="req2.date" @on-change="selectDate" placeholder="请选择年份" style="width: 200px;float: right;"></DatePicker>
+        </h3>
+        <Table :columns="columns2" :data="data2"></Table>
+        <h3>
+            单价调整记录
+        </h3>
+        <Table :columns="columns3" :data="data3"></Table>
+        <Page 
+            style="margin:10px auto 0;text-align: center;" 
+            :total="req1.total" 
+            :current="req1.pageNum" 
+            :page-size="5" 
+            @on-change="(num)=>pageChange(num,'getSuList','req3')" 
+        />
+        <h3>
+            退货记录（共计退货面料<span>{{sumTotal.count}}</span>件，<span>{{sumTotal.sumMoney}}</span>元）
+            <DatePicker format="yyyy" type="year" v-model="req2.date" @on-change="selectDate" placeholder="请选择年份" style="width: 200px;float: right;"></DatePicker>
+        </h3>
+        <Table :columns="columns4" :data="data4"></Table>
+        <h3>
+            问题反馈（共计反馈问题<span>{{data5[0].total}}</span>次）
+        </h3>
+        <Table :columns="columns5" :data="data5"></Table>
+    </div>
+</template>
+
+<script>
+    import axios from 'axios'
+    export default {
+        data(){
+            return {
+                dtl:{
+                    BackCount:null,
+                    MaterialTypeCount:null,
+                },
+                columns1:[
+                    {
+                        title: '序号',
+                        type: 'index',
+                        width: 60,
+                        align: 'center'
+                    },
+                    {
+                        title: '物料类型',
+                        key: 'categoryName'
+                    },
+                    {
+                        title: '面料名称',
+                        key: 'materialName',
+                        width:300
+                    },
+                    {
+                        title: '采购总额',
+                        key: 'sumMoney'
+                    },
+                    {
+                        title: '采购占比',
+                        key: 'purProportion',
+                        render:(h,p)=>{
+                            return h('span',{},
+                                p.row.purProportion * 100 + '%'
+                            )
+                        }
+                    },
+                    {
+                        title: '上个月采购额',
+                        key: 'lastMonthMoney'
+                    },
+                     {
+                        title: '本月采购额',
+                        key: 'monthMoney'
+                    },
+                ],
+                data1:[],
+                columns2:[],
+                data2:[],
+                data3:[],
+                columns4:[],
+                columns5:[],
+                data5:[
+                    {
+                        name:"数量",
+                        total:0
+                    }
+                ],
+                data4:[],
+                columns3:[
+                    {
+                        title: '序号',
+                        type: 'index',
+                        width: 60,
+                        align: 'center'
+                    },
+                    {
+                        title: '面料名称',
+                        key: 'materialName'
+                    },
+                    {
+                        title: '调整时间',
+                        key: 'updatedTime'
+                    },
+                    {
+                        title: '原单价',
+                        key: 'oldPrice'
+                    },
+                    {
+                        title: '调整后单价',
+                        key: 'newPrice',
+                        render:(h,p)=>{
+                            return h('span',{
+                                style:{
+                                    color:(p.row.newPrice > p.row.oldPrice) ? 'red' : '#008012'
+                                },
+                            },
+                                p.row.newPrice
+                            )
+                        }
+                    },
+                ],
+                req3:{
+                    pageNum:1,
+                    pageSize:5,
+                    total:0,
+                },
+                req2:{
+                    date:'2022',
+                },
+                req1:{
+                    pageNum:1,
+                    pageSize:5,
+                    total:0,
+                },
+                sumTotal:{
+                    count:0,
+                    sumMoney:0,
+                },
+                supplierProblemDict:{
+                    1:"短少",
+                    2:'抽纱',
+                    3: "褶皱",
+                    4: "脏污",
+                    5: "破洞",
+                    6: "缩水"
+                },
+            }
+        },
+        methods:{
+            selectDate(e){
+                this.req2.date = e
+                this.getMonthSum()
+            },
+            pageChange(num,fnName,reqName){
+                const v = this
+                v[reqName].pageNum = num
+                v[fnName]()
+            },
+            getCount(){
+                const v = this
+                axios
+				.get('/cloudApi/supplier/su/count?id=' + v.dtl.id, {})
+                    .then((res) => {
+                        this.$Spin.hide()
+                        this.dtl.BackCount = res.data.data.BackCount
+                        this.dtl.MaterialTypeCount = res.data.data.MaterialTypeCount
+                    })
+            },
+            //问题统计
+            getStatisticsProblem(){
+                const v = this
+                axios
+				.get('/cloudApi/supplierProblem/statisticsProblem?id=' + v.dtl.id, {})
+                    .then((res) => {
+                        console.log(res)
+                        const columnsCopy = [{
+                            title: ' ',
+                            key: 'name'
+                        },{
+                            title: '合计',
+                            key: 'total'
+                        }]
+                        const dataCopy = [{
+                            name:"数量",
+                            total:0
+                        }]
+                        for (const key in res.data.data) {
+                            columnsCopy.push({
+                                title: v.supplierProblemDict[key],
+                                key: key
+                            })
+                            dataCopy[0][key] = res.data.data[key]
+                            dataCopy[0].total += res.data.data[key]
+                        }
+                        v.columns5 = columnsCopy
+                        v.data5 = dataCopy
+                    })
+                
+            },
+            
+            //采购物料分析
+            getSpmAnalyse(){
+                this.$Spin.show()
+                    axios
+                        .post('/cloudApi/supplier/su/spmAnalyse', { ...this.req1,id:this.dtl.id })
+                        .then((res) => {
+                            this.$Spin.hide()
+                            this.data1 = res.data.data
+                        })
+                    axios
+                        .post('/cloudApi/supplier/su/spmAnalyse/count', { ...this.req1,id:this.dtl.id })
+                        .then((res) => {
+                            this.req1.total = res.data.data
+                        })
+            },
+            //月度采购分析
+            getMonthSum(e){
+                const v = this
+                axios.get('/cloudApi/supplier/purchase/month/sum?id=' + v.dtl.id +"&date=" + v.req2.date, {})
+                    .then((res) => {
+                        this.$Spin.hide()
+                        const columns2Copy = [
+                            {
+                                title: '时间',
+                                key: 'name'
+                            }
+                        ]
+                        const data2Copy = [
+                            {
+                                name:"采购额"
+                            },
+                            {
+                                name:'占公司比例'
+                            },
+                        ]
+                        for (let i = 0; i < res.data.data.length; i++) {
+                            const element = res.data.data[i];
+                            columns2Copy.push({
+                                title: element.createdTime.slice(0,7),
+                                key: element.createdTime
+                            })
+                            data2Copy[0][element.createdTime] = element.money * 1
+                            data2Copy[1][element.createdTime] = element.purProportion
+                        }
+                        v.columns2 = columns2Copy
+                        v.data2 = data2Copy
+                    })
+            },
+            //单价调整记录
+            getSuList(){
+                const v =  this
+                this.$Spin.show()
+                axios
+                    .post('/cloudApi/supplierPricechange/su/list', { ...this.req3,id:this.dtl.id })
+                    .then((res) => {
+                        this.$Spin.hide()
+                        this.data3 = res.data.data
+                    })
+                axios
+                    .post('/cloudApi/supplierPricechange/su/list/count', { ...this.req3,id:this.dtl.id })
+                    .then((res) => {
+                        this.req3.total = res.data.data
+                    })
+            },
+            //退货记录
+            getSum(){
+                const v = this
+                axios.get('/cloudApi/supplier/back/sum?id=' + v.dtl.id +"&date=" + v.req2.date,{}).then(res=>{
+                    this.sumTotal = res.data.data
+                })
+                
+                axios.get('/cloudApi/supplier/month/getSum?id=' + v.dtl.id +"&date=" + v.req2.date, {})
+                    .then((res) => {
+                        this.$Spin.hide()
+                        const columns2Copy = [
+                            {
+                                title: '时间',
+                                key: 'name'
+                            }
+                        ]
+                        const data2Copy = [
+                            {
+                                name:"退货件数"
+                            },
+                            {
+                                name:'退货金额'
+                            },
+                        ]
+                        for (let i = 0; i < res.data.data.length; i++) {
+                            const element = res.data.data[i];
+                            columns2Copy.push({
+                                title: element.createdTime,
+                                key: element.createdTime
+                            })
+                            data2Copy[0][element.createdTime] = element.count * 1
+                            data2Copy[1][element.createdTime] = element.sumMoney * 1
+                        }
+                        v.columns4 = columns2Copy
+                        v.data4 = data2Copy
+                        
+                    })
+            },
+           
+            init(){
+                this.getCount()
+                this.getSpmAnalyse()
+                this.getMonthSum()
+                this.getSuList()
+                this.getSum()
+                this.getStatisticsProblem()
+            },
+        },
+        created(){
+            console.log(this.$route)
+            this.$route.query.BackCount = 0
+            this.$route.query.MaterialTypeCount = 0
+            this.dtl = this.$route.query
+            this.init()
+            
+        },
+    }
+</script>
+
+<style lang="less" scoped>
+h2{
+    font-size: 18px;
+    margin-bottom:20px;
+    float: left;
+    color: #000000;
+}
+header{
+    overflow: hidden;
+    button{
+        float: right;
+    }
+}
+h3{
+    font-size: 14px;
+    line-height: 58px;
+    span{
+        color: red;
+    }
+}
+.total-warp{
+    display: flex;
+    justify-content: space-between;
+    
+    ul{
+        height: 76px;
+        border:1px solid #979797;
+        background: #fff;
+        li{
+            float: left;
+            width: 16.666%;
+            text-align: center;
+            line-height: 30px;
+            list-style: none;
+            font-size: 14px;
+            padding:8px 0;
+            color: #3F3F3F;
+            span{
+                color: #6E6E6E;
+            }
+        }
+    }
+}
+</style>

src/view/index/schedule/contract-form.vue

@@ -378,21 +378,21 @@ export default {
             this.flowsList = res.result
           }
         })
-        // axios.get('/supplier/su/detail?id=' + this.data.supplierId, {}).then(res=>{
-        //   if(res.data.code == 200){
-        //     this.supplierDetail = res.data.data
-        //   }
-        // })
-        // axios.get('/purchaseContract/check/isNewSu?materialCode=' + this.data.materialCode + '&supplierId=' + this.data.supplierId, {}).then(res=>{
-        //   if(res.data.code == 200){
-        //     this.isNewSu = res.data.data
-        //   }
+        axios.get('/supplier/su/detail?id=' + this.data.supplierId, {}).then(res=>{
+          if(res.data.code == 200){
+            this.supplierDetail = res.data.data
+          }
+        })
+        axios.get('/purchaseContract/check/isNewSu?materialCode=' + this.data.materialCode + '&supplierId=' + this.data.supplierId, {}).then(res=>{
+          if(res.data.code == 200){
+            this.isNewSu = res.data.data
+          }
           
-        // })
-        // axios.get('/purchaseContract/last/newPur?materialCode=' + this.data.materialCode, {}).then(res=>{
-        //   res.data.data.purchaseQty = (res.data.data.purchaseQty * 1).toFixed(2)
-        //   this.newPurData = res.data.data
-        // })
+        })
+        axios.get('/purchaseContract/last/newPur?materialCode=' + this.data.materialCode, {}).then(res=>{
+          res.data.data.purchaseQty = (res.data.data.purchaseQty * 1).toFixed(2)
+          this.newPurData = res.data.data
+        })
         GetPurContractPolicy({
           id: this.data.id
         }).then(res => {

src/view/material-manege/pay/pay-history2.vue

@@ -0,0 +1,519 @@
+<!-- 合同付款详情 -->
+<template>
+  <div class="container-wrap">
+    <div>
+        <Input></Input>
+    </div>
+    <div style="background:#fff;padding:10px;margin-bottom:10px">
+        <Tabs v-model="salesVolumeCompanyTotalType" @on-click="tabsChange">
+            <TabPane  label="全部" name="1"></TabPane>
+            <TabPane :label="(h) => {
+                return h('div', [
+                    h('span', '50万以上('),
+                    h('span',{style:{color:'red'}}, salesVolumeCompanyTotal['50up']),
+                    h('span', ')')])
+            }" name="2"></TabPane>
+            <TabPane :label="(h) => {
+                return h('div', [
+                    h('span', '20-50万('),
+                    h('span',{style:{color:'red'}}, salesVolumeCompanyTotal['20-50']),
+                    h('span', ')')])
+            }" name="3"></TabPane>
+            <TabPane :label="(h) => {
+                return h('div', [
+                    h('span', '10-20万('),
+                    h('span',{style:{color:'red'}}, salesVolumeCompanyTotal['10-20']),
+                    h('span', ')')])
+            }" name="4"></TabPane>
+            <TabPane :label="(h) => {
+                return h('div', [
+                    h('span', '5-10万('),
+                    h('span',{style:{color:'red'}}, salesVolumeCompanyTotal['5-10']),
+                    h('span', ')')])
+            }" name="5"></TabPane>
+            <TabPane :label="(h) => {
+                return h('div', [
+                    h('span', '5万以下('),
+                    h('span',{style:{color:'red'}}, salesVolumeCompanyTotal['5down']),
+                    h('span', ')')])
+            }" name="6"></TabPane>
+        </Tabs>
+        <div>
+            <Button style="margin:0 10px 5px 0" :type="params.companySelectId == null ? 'primary' : 'default'" @click="changeCompany(null,0)" >全部</Button>
+            <Button 
+                style="margin:0 10px 5px 0" 
+                @click="changeCompany(i.supplierId,index)" 
+                v-for="(i,index) in statisticsData" 
+                :type="params.companySelectId == i.supplierId ? 'primary' : 'default'"
+                :key="i.supplierId"
+                v-if="i.type == salesVolumeCompanyTotalType || salesVolumeCompanyTotalType == '1'">
+                {{i.supplierName}}<span :style="params.companySelectId == i.supplierId ?  'color:#ffc107' : 'color:red'"> ({{i.total}})</span>
+            </Button>
+        </div>
+    </div>
+    <div class="container">
+      <!-- 表格 -->
+      <div class="table-content">
+        <div v-if="data && data.length === 0" style="height: 100%;display: flex;justify-content: center;align-items: center">
+          暂无数据
+        </div>
+        <div v-else class="list">
+          <div class="item" v-for="(item, index) in data" :key="index">
+            <div class="content">
+              <div class="item-left">
+                <div class="row">
+                  <div class="col">
+                    <div class="label">合同编码：</div>
+                    <div class="value">{{ item.purchaseBillNo }}</div>
+                  </div>
+                  <div class="col">
+                    <div class="label">供应商：</div>
+                    <div class="value">{{ item.supplierName }}</div>
+                  </div>
+                  <div class="col">
+                    <div class="label">付款期限：</div>
+                    <div class="value">{{ item.check.payDate }}</div>
+                  </div>
+                  <div class="col" style="flex: 1">
+                    <div class="label">单价：</div>
+                    <div class="value">{{ item.price }}</div>
+                  </div>
+                </div>
+                <div class="row">
+                  <div class="col">
+                    <div class="label">物料名称：</div>
+                    <div class="value">{{ item.materialName }}</div>
+                  </div>
+                  <div class="col">
+                    <div class="label">规格：</div>
+                    <div class="value">{{ item.materialSpec }}</div>
+                  </div>
+                  <div class="col">
+                    <div class="label">采购数量：</div>
+                    <div class="value">{{ item.purchaseQty * 1 }}</div>
+                  </div>
+                  <div class="col" style="flex: 1"></div>
+                </div>
+                <div class="row">
+                  <div class="col">
+                    <div class="label">合同金额：</div>
+                    <div class="value">{{ item.contractAmount * 1 }}元</div>
+                  </div>
+                  <div class="col">
+                    <div class="label">质检金额：</div>
+                    <div class="value">{{ item.adjustAmount * 1 }}元</div>
+                  </div>
+                  <div class="col">
+                    <div class="label">已付金额：</div>
+                    <div class="value">{{ item.hadPayAmount * 1 }}元</div>
+                  </div>
+                  <div class="col" style="flex: 1">
+                    <div class="label">本次应付：</div>
+                    <div class="value">
+                      <span style="color: red">{{ item.actAmount  }}</span>元
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="item-right">
+                <div class="forms">
+                  <div class="row">
+                    <div class="col">
+                      <span class="text" @click="showForm(0, item)">申购单</span>
+                      <Icon type="md-checkmark" color="#07C909" size="20" />
+                    </div>
+                    <div class="col">
+                      <span class="text" @click="showForm(1, item)">入库单</span>
+                      <Icon v-if="item.check.inoutBillCheck" type="md-checkmark" color="#07C909" size="20" />
+                      <Icon v-else type="md-close" color="red" size="20" />
+                    </div>
+                    <div class="col">
+                      <span class="text" @click="showForm(2, item)">质检单</span>
+                      <Icon v-if="item.check.quantityCheck" type="md-checkmark" color="#07C909" size="20" />
+                      <Icon v-else type="md-close" color="red" size="20" />
+                    </div>
+                  </div>
+                  <div class="row">
+                    <div class="col">
+                      <span class="text" @click="showForm(3, item)">合同</span>
+                      <Icon v-if="item.check.ContractCheck" type="md-checkmark" color="#07C909" size="20" />
+                      <Icon v-else type="md-close" color="red" size="20" />
+                    </div>
+                    <div class="col">
+                      <span class="text" @click="showForm(4, item)">发票</span>
+                      <Icon v-if="item.check.invoiceCheck" type="md-checkmark" color="#07C909" size="20" />
+                      <Icon v-else type="md-close" color="red" size="20" />
+                    </div>
+                    <div class="col"></div>
+                  </div>
+                  <div class="row">
+                    <div class="col" style="justify-content: flex-start">
+                      <span class="text" style="text-decoration: none;cursor: auto">质检金额&lt;=发票金额</span>
+                      <Icon v-if="item.check.invoiceCheck" type="md-checkmark" color="#07C909" size="20" />
+                      <Icon v-else type="md-close" color="red" size="20" />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="other" style="margin-top: 2px" v-if="item.hasOtherPayBill">
+              <Collapse :value="item.payObjList ? '1' : '0'" @on-change="open(item)">
+                <Panel name="1">
+                  合同付款记录
+                  <div slot="content">
+                    <div class="row" v-for="(payItem, payIndex) in item.payObjList" :key="payIndex">
+                      <div class="col">
+                        <div class="label">付款时间：</div>
+                        <div class="value">{{ payItem.payTime }}</div>
+                      </div>
+                      <div class="col">
+                        <div class="label">付款金额：</div>
+                        <div class="value">
+                          <span style="color: red">{{ payItem.payAmount }}</span>元
+                        </div>
+                      </div>
+                      <div class="col">
+                        <div class="label">审批状态：</div>
+                        <div class="value" :style="{color: payItem.approvalStateStr === '待审批'? 'red' : '' }">
+                          {{ payItem.approvalStateStr }}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </Panel>
+              </Collapse>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- 分页 -->
+      <div class="table-page">
+        <Page :current="params.pageIndex" :total="params.total" :show-total="true" :page-size="10" show-elevator @on-change="changePage" />
+      </div>
+    </div>
+    <pass-modal v-model="passShow" :data="currentItem" @getlist="getList"></pass-modal>
+    <my-form-pay v-model="payShow" type="form" :data="currentItem" :showSider="false"></my-form-pay>
+    <store-in-form v-model="storeInShow" :data="currentItem"></store-in-form>
+    <quality-form v-model="qualityShow" :data="qualityData"></quality-form>
+    <invoice-form v-model="invoiceShow" :data="currentItem" @getlist="getList"></invoice-form>
+    <contract-form v-model="contractShow" :data="currentItem" @getlist="getList"></contract-form>
+    <apply-form v-model="applyShow" :data="currentItem" @getlist="getList"></apply-form>
+  </div>
+</template>
+
+<script>
+import {
+  GetHistoryPaymentRecord,
+  GetHistoryPaymentMaterial,
+  GetApplyPurchasePageList,
+  GetContractQtyCheckBill,
+  GetApplyPayBill
+} from '@/api/applyPurchase'
+import MyTable from '_c/my-table/my-table'
+import MyFormPay from '_c/my-modal-pay'
+import PassModal from './modals/pass-modal'
+import StoreInForm from './modals/store-in-form'
+import QualityForm from './modals/quality-form'
+import InvoiceForm from './modals/invoice-form'
+import ContractForm from './modals/contract-form'
+import ApplyForm from './modals/apply-pass-form'
+import { GetInStockBill } from '@/api/stock'
+import axios from 'axios'
+export default {
+  name: 'material_pay_detail',
+  components: {
+    MyTable,
+    PassModal,
+    MyFormPay,
+    StoreInForm,
+    QualityForm,
+    InvoiceForm,
+    ContractForm,
+    ApplyForm
+  },
+  data () {
+    return {
+        statisticsData:[],
+      salesVolumeCompanyTotalType:'1',
+      salesVolumeCompanyTotal:{
+            '50up':0,
+            '20-50':0,
+            '10-20':0,
+            '5-10':0,
+            '5down':0,
+        },
+        company:[],
+      titleDay: 0,
+      tabsIndex: 0,
+      access: this.$store.state.user.access,
+      contractShow: false,
+      invoiceShow: false,
+      qualityShow: false,
+      storeInShow: false,
+      payShow: false, // 申购单
+      passShow: false, // 驳回
+      applyShow: false,
+      currentItem: {},
+      qualityData: [],
+      list: [],
+      supplierList: [],
+      data: [],
+      params: {
+        pageNum: 1,
+        pageSize: 10,
+        total: 0,
+        supplierId: '',
+        supplierName: '',
+        strTime: '',
+        endTime: ''
+      }
+    }
+  },
+  methods: {
+    tabsChange(){
+        const v = this
+        v.params.companySelectId = null
+        //v.searchFn()
+    },
+    filterChange () {
+      this.params.pageIndex = 1
+      this.params.materialCode = ''
+      this.getHistoryPaymentMaterial()
+      this.getList()
+    },
+    materialChange () {
+      this.params.pageIndex = 1
+      this.getList()
+    },
+    back () {
+      this.$store.commit('closeTag', this.$route)
+      setTimeout(() => {
+        this.$router.push('pay_history')
+      }, 500)
+    },
+    open (item) {
+      if (!item.payObjList) {
+        GetApplyPayBill({
+          purchaseBillNo: item.purchaseBillNo,
+          payBillId: item.payBillId
+        }).then(res => {
+          if (res.code === 0) {
+            this.$set(item, 'payObjList', res.result)
+          }
+        })
+      }
+    },
+    changePage (pageIndex) {
+      this.params.pageIndex = pageIndex
+      this.getList()
+    },
+    showForm (type, item) {
+      this.currentItem = { ...item }
+      switch (type) {
+        // 申购单
+        case 0:
+          this.currentItem.id = this.currentItem.payBillId
+          GetApplyPurchasePageList({
+            pageIndex: 1,
+            pageSize: 1,
+            purBillState: 1,
+            keyWord: this.currentItem.applyBillNo
+          }).then(res => {
+            if (res.code === 0) {
+              this.currentItem = { ...this.currentItem, ...res.result.list[0] }
+              this.payShow = true
+              console.log(this.currentItem)
+            }
+          })
+          break
+        case 1:
+          GetInStockBill({
+            inOutStorageNo: this.currentItem.inOutStorageNo,
+            applyBillNo: this.currentItem.applyBillNo
+          }).then(res => {
+            if (res.code === 0) {
+              this.currentItem = { ...this.currentItem, ...res.result }
+              this.storeInShow = true
+            }
+          })
+          break
+        case 2:
+          GetContractQtyCheckBill({
+            purchaseBillNo: this.currentItem.purchaseBillNo
+          }).then(res => {
+            if (res.code === 0) {
+              this.qualityData = res.result
+              this.qualityShow = true
+            }
+          })
+          break
+        case 3:
+          this.contractShow = true
+          break
+        case 4:
+          this.invoiceShow = true
+          break
+      }
+    },
+    getHistoryPaymentMaterial () {
+      GetHistoryPaymentMaterial({
+        beginTime: this.params.beginTime,
+        endTime: this.params.endTime,
+        supplierId: this.params.supplierId
+      }).then(res => {
+        if (res.code === 0) {
+          this.list = res.result.map(item => {
+            return {
+              label: item.value,
+              value: item.key
+            }
+          })
+        }
+      })
+    },
+    getStatistics(){
+        const v = this
+        axios
+            .post('/cloudApi/purchaseContract/pay/statistics', v.params)
+            .then((res) => {
+                this.statisticsData = res.data.data
+                for (let i = 0; i < res.data.data.length; i++) {
+                    const element = res.data.data[i];
+                    element.total = element.sumMoney * 1
+                    const totalkeyName = 
+                        element.total < 50000 ? '5down' : 
+                        element.total >= 50000 && element.total < 100000 ? '5-10' :
+                        element.total >= 100000 && element.total < 200000 ? '10-20' :
+                        element.total >= 200000 && element.total < 500000 ? '20-50' :
+                        element.total >= 500000 ? '50up' : '';
+                    element.type = 
+                        element.total < 50000 ? '6' : 
+                        element.total >= 50000 && element.total < 100000 ? '5' :
+                        element.total >= 100000 && element.total < 200000 ? '4' :
+                        element.total >= 200000 && element.total < 500000 ? '3' :
+                        element.total >= 500000 ? '2' : '';
+                    v.salesVolumeCompanyTotal[totalkeyName] ++
+
+                }
+            })
+            
+    },
+    getList () {
+        const v = this
+        axios
+            .post('/cloudApi/purchaseContract/pay/list', v.params).then(res=>{
+                this.data = res.data.data
+                console.log(this.data)
+            })
+        axios
+            .post('/cloudApi/purchaseContract/pay/list/count', v.params).then(res=>{
+                this.params.total = res.data.data
+            })
+        
+      
+    }
+  },
+  mounted () {
+    this.getStatistics()
+    // this.getHistoryPaymentMaterial()
+    this.getList()
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.container-wrap {
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  .filter {
+    margin-bottom: 10px;
+    height: 32px;
+    line-height: 32px;
+  }
+  .container {
+    flex: 1;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    .table-content {
+      flex: 1;
+      overflow: hidden;
+      .row {
+        margin-bottom: 5px;
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+        &:last-child {
+          margin-bottom: 0;
+        }
+        .col {
+          padding: 0 5px;
+          flex: 2;
+          overflow: hidden;
+          display: flex;
+          justify-content: space-between;
+          align-items: flex-start;
+          .value {
+            flex: 1;
+            overflow: hidden;
+            word-break: break-all;
+          }
+        }
+      }
+      .list {
+        height: 100%;
+        overflow: auto;
+        .item {
+          margin-bottom: 10px;
+          &:last-child {
+            margin-bottom: 0;
+          }
+          .content {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 10px;
+            border: 1px solid #d7d7d7;
+            border-radius: 5px;
+            background: #FFFFFF;
+            .item-left {
+              padding: 0 10px;
+              flex: 1;
+              border-right: 1px solid #333333;
+            }
+            .item-right {
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              .forms {
+                padding: 0 10px;
+                .col {
+                  align-items: center;
+                  .text {
+                    text-decoration: underline;
+                    cursor: pointer;
+                  }
+                }
+              }
+              .btn {
+                display: flex;
+                flex-direction: column;
+              }
+            }
+          }
+        }
+      }
+    }
+    .table-page {
+      padding: 10px 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 43px;
+      overflow: hidden;
+    }
+  }
+}
+</style>

src/view/store-manage/store-manage/store-manage-2.vue

@@ -0,0 +1,1209 @@
+<!-- 库存管理 -->
+<template>
+	<div class="container">
+		<div class="total-warp">
+			<div class="h2">今日剩余</div>
+			<div class="total-box">
+				<div class="active" style="width: 7%; text-align: center" @click="getAll"
+				:style="
+						params.technologyType == null && params.purpose == null ? 'border:2px solid #0077ff' : ''
+					">
+					全部
+				</div>
+				<div
+					class="mianliao"
+					:style="
+						params.technologyType == 4 ? 'border:2px solid #0077ff' : ''
+					"
+					style="width: 50%"
+					@click="mianliaoTbleLineCk({ name: '面料' }, 4)"
+				>
+					<div class="label" style="border-right: 2px solid #dcdcdc">
+						<Icon
+							type="md-add"
+							v-if="!tableModalType"
+							style="margin-right: 15px"
+							@click.native="tableModalType = true"
+						/>
+						<Icon
+							type="md-remove"
+							v-else
+							@click="tableModalType = false"
+							style="margin-right: 15px"
+						/>
+						<span>面料库存</span>
+					</div>
+					<ul>
+						<li>
+							卷数
+							<span>{{ totalData.fabric.sum }}</span>
+						</li>
+						<li>
+							米数
+							<span>{{ totalData.fabric.count }}</span>
+						</li>
+						<li>
+							面积
+							<span>{{ totalData.fabric.measureArea }}</span>
+						</li>
+						<li>
+							金额
+							<span>{{ totalData.fabric.money }}</span>
+						</li>
+					</ul>
+				</div>
+				<div
+					class="moshui"
+					style="width: 40%"
+					@click="mianliaoTbleLineCk({ name: '墨水' }, 3)"
+					:style="
+						params.technologyType == 3 ? 'border:2px solid #0077ff' : ''
+					"
+				>
+					<div class="label" style="border-right: 1px solid #dcdcdc">
+						<span>墨水库存</span>
+					</div>
+					<ul>
+						<li>
+							件数
+							<span>{{ totalData.ink.count }}</span>
+						</li>
+						<li>
+							千克
+							<span>{{ totalData.ink.sum }}</span>
+						</li>
+						<li>
+							金额
+							<span>{{ totalData.ink.money }}</span>
+						</li>
+					</ul>
+				</div>
+			</div>
+		</div>
+		<div class="table-modal" v-if="tableModalType">
+			<div style="width: 49%">
+				<Table
+					:columns="columns1"
+					@on-row-click="mianliaoTbleLineCk"
+					:row-class-name="rowClassName2"
+					height="190"
+					:data="totalData.typeStatistics"
+				></Table>
+			</div>
+			<div style="width: 49%">
+				<Table
+					@on-row-click="yongtuTbleLineCk"
+					:row-class-name="rowClassName"
+					:columns="columns2"
+					height="190"
+					:data="totalData.purposeStatistics"
+				></Table>
+			</div>
+		</div>
+		<div class="table-filter">
+			<div class="filter-item"></div>
+
+			<div style="float: right">
+				<div class="filter-item">
+					<Button
+						type="error"
+						style="width: 90px"
+						@click="toInventory"
+						>发起盘点</Button
+					>
+				</div>
+			</div>
+			<div class="filter-item" style="float: right">
+				滞留：在库时间超过{{ delayPeriod || 0 }}天
+			</div>
+			<div class="filter-item">
+				<Checkbox
+					v-model="params.inventoryResults"
+					true-value="0"
+					false-value="1"
+					@on-change="errChange"
+					>筛选异常</Checkbox
+				>
+			</div>
+			<div class="filter-item" @keyup.enter="getList">
+				<Input
+					v-model="params.keyword"
+					clearable
+					placeholder="请输入关键字"
+				/>
+			</div>
+			<div class="filter-item" style="width: 160px">
+				<my-tree-select
+					v-model="params.categoryCode"
+					:treeData="materialTreeData"
+					placeholder="请选择物料类型"
+				></my-tree-select>
+			</div>
+			<div class="filter-item" style="width: 160px">
+				<Select v-model="params.houseId" clearable>
+					<Option
+						v-for="item in stockList"
+						:value="item.value"
+						:key="item.value"
+						>{{ item.label }}</Option
+					>
+				</Select>
+			</div>
+			<div class="filter-item">
+				<Button type="primary" style="width: 90px" @click="search"
+					>查询</Button
+				>
+			</div>
+			<div class="filter-item">
+				<Button
+					type="primary"
+					style="width: 90px"
+					@click="$router.push('store_warning')"
+					>库存预警</Button
+				>
+			</div>
+			<div class="filter-item">
+				<Button type="primary" style="width: 90px" @click="exportExcel"
+					>导出Excel</Button
+				>
+			</div>
+		</div>
+		<div class="line" style="margin-bottom: 10px"></div>
+		<!--用途（原来代码）-->
+		<!--<div class="table-filter" style="height: auto;padding-bottom: 0">
+    <div class="filter-item">
+      <Button
+        :type="itemIndex === '' ? 'primary' : 'default'"
+        style="width: 90px;margin-bottom: 10px"
+        @click="itemClick()">
+        全部
+      </Button>
+    </div>
+    <div class="filter-item" v-for="(item, index) in itemData" :key="index">
+      <Button
+        v-if="item"
+        :type="itemIndex === index ? 'primary' : 'default'"
+        style="min-width: 90px;margin-bottom: 10px"
+        @click="itemClick(index, item)">
+        {{ item }}
+      </Button>
+    </div>
+  </div>-->
+		<!-- 表格 -->
+		<div class="table-content-wrap">
+			<div class="table-content">
+				<div
+					v-if="data.length === 0"
+					style="
+						font-size: 16px;
+						font-weight: bold;
+						height: 100%;
+						display: flex;
+						justify-content: center;
+						align-items: center;
+					"
+				>
+					暂无数据
+				</div>
+				<Collapse
+					:value="item.storageDetails ? '1' : '0'"
+					v-for="(item, index) in data"
+					:key="index"
+					@on-change="open(item)"
+				>
+					<Panel name="1">
+						<div class="table-item">
+							<div class="row">
+								<div class="col">
+									物料类型：{{ item.categoryName }}
+								</div>
+								<div class="col">
+									物料编码：{{ item.materialCode }}
+								</div>
+								<div class="col">
+									物料名称：{{ item.materialName }}
+								</div>
+								<div class="col"></div>
+								<div class="col" style="flex: 0.2"></div>
+								<div
+									class="col blue"
+									style="
+										padding-right: 15px;
+										display: flex;
+										justify-content: space-between;
+										flex: none;
+										width: 140px;
+									"
+								>
+									<!--                <span @click="toHistory(0)">入库记录</span>-->
+									<!--                <span @click="toHistory(1)">出库记录</span>-->
+								</div>
+							</div>
+							<div class="row">
+								<div class="col">
+									库存数量：{{ item.houseInfo.sum }}
+								</div>
+								<div class="col">
+									库存件数：{{ item.houseInfo.count }}
+								</div>
+								<div class="col orange">
+									滞留数量：{{ item.retentionQuantity }}
+								</div>
+								<div class="col">
+									安全库存：{{ item.materialSafetyStock }}
+								</div>
+								<div class="col" style="flex: 0.2"></div>
+								<div
+									class="col"
+									style="flex: none; width: 140px"
+								>
+									<Button
+										style="height: 30px; line-height: 1"
+										@click.stop="showInventory(item)"
+										>盘点记录</Button
+									>
+								</div>
+							</div>
+							<div class="row">
+								<div class="col">
+									{{
+										`一楼：${item.yilouSum}，四楼：${item.yilouCount}`
+									}}
+								</div>
+								<div class="col">
+									{{
+										`一楼：${item.silouSum}，四楼：${item.silouCount}`
+									}}
+								</div>
+								<div class="col"></div>
+								<div class="col"></div>
+								<div class="col" style="flex: 0.2"></div>
+								<div
+									class="col"
+									style="flex: none; width: 140px"
+								></div>
+							</div>
+							<div class="row">
+								<div class="col red">
+									盘点结果：{{ item.checkResult }}
+								</div>
+								<div
+									class="col red"
+									style="
+										text-decoration: underline;
+										cursor: pointer;
+									"
+									@click.stop="openTag(item)"
+								>
+									库存修正量：{{ item.correctionQuantity }}
+								</div>
+								<div class="col">
+									盘点人：{{ item.OperUserName }}
+								</div>
+								<div class="col">
+									盘点时间：{{ item.checkTime }}
+								</div>
+								<div class="col" style="flex: 0.2"></div>
+								<div
+									class="col"
+									style="flex: none; width: 140px"
+								></div>
+							</div>
+						</div>
+						<div slot="content" class="content">
+							<Table
+								:columns="columns"
+								:data="item.storageDetails"
+								max-height="250"
+							></Table>
+						</div>
+					</Panel>
+				</Collapse>
+				<!--查看人工盘点记录-->
+				<artificial-inventory-record
+					v-model="inventoryRecordShow"
+				></artificial-inventory-record>
+			</div>
+		</div>
+		<!-- 分页 -->
+		<div class="table-page">
+			<Page
+				:current="params.pageIndex"
+				:total="params.total"
+				:show-total="true"
+				:page-size="20"
+				show-elevator
+				@on-change="changePage"
+			/>
+		</div>
+		<inventory-form
+			v-model="inventoryShow"
+			:formData="formData"
+		></inventory-form>
+		<tag-form v-model="tagShow" :form-data="formData"></tag-form>
+	</div>
+</template>
+
+<script>
+import { exportExcel } from '@/libs/util'
+import {
+	GetStockPageList,
+	GetStockDetailSum,
+	GetStockMaterialPurpose,
+	GetStockTagDetailList,
+} from '@/api/stock'
+import MyTable from '_c/my-table/my-table'
+import artificialInventoryRecord from './artificial-inventory-record'
+import InventoryForm from './inventory-form'
+import TagForm from './tag-form'
+import MyTreeSelect from '_c/my-tree-select/my-tree-select'
+import axios from 'axios'
+import {
+	GetMaterialCategoryZTree,
+	GetMaterialSet,
+	GetTechnologyTypList,
+	GetStockHouse,
+} from '@/api/baseData'
+export default {
+	name: 'store',
+	components: {
+		MyTable,
+		MyTreeSelect,
+		artificialInventoryRecord,
+		InventoryForm,
+		TagForm,
+	},
+	data() {
+		return {
+			tableModalType: false,
+			delayPeriod: 0,
+			typeName: '属性',
+			useName: '用途',
+			tabName: 'open',
+			tabIndex: 0,
+			itemIndex: '',
+			tabs: [],
+			materialTreeData: [],
+			stockList: [],
+			materialCategoryCode: '',
+			key: '',
+			filterData: {},
+			formData: {},
+			show: false,
+			inventoryRecordShow: false,
+			inventoryShow: false,
+			tagShow: false,
+			itemData: [],
+			titleData: {
+				directSum: {
+					stockSum: {
+						sumName: '直喷',
+						totalAmount: 0,
+						tagCount: 0,
+						quantity: 0,
+					},
+					stockSumItems: [],
+				},
+				heatSum: {
+					stockSum: {
+						sumName: '热转',
+						totalAmount: 0,
+						tagCount: 0,
+						quantity: 0,
+					},
+					stockSumItems: [],
+				},
+				paperSum: {
+					stockSum: {
+						sumName: '打纸',
+						totalAmount: 0,
+						tagCount: 0,
+						quantity: 0,
+					},
+					stockSumItems: [],
+				},
+			},
+			data: [],
+			columns1: [
+				{
+					title: '按工艺查看',
+					key: 'name',
+				},
+				{
+					title: '卷数',
+					key: 'count',
+				},
+				{
+					title: '米数',
+					key: 'sum',
+				},
+				{
+					title: '面积',
+					key: 'measureArea',
+				},
+				{
+					title: '金额',
+					key: 'money',
+				},
+			],
+			columns2: [
+				{
+					title: '按用途查看',
+					key: 'materialPurpose',
+				},
+				{
+					title: '卷数',
+					key: 'count',
+				},
+				{
+					title: '米数',
+					key: 'sum',
+				},
+				{
+					title: '面积',
+					key: 'measureArea',
+				},
+				{
+					title: '金额',
+					key: 'money',
+				},
+			],
+			columns: [
+				{
+					title: '序号',
+					type: 'index',
+					width: 60,
+					align: 'center',
+				},
+				{
+					title: '物料标签值',
+					key: 'rfid',
+					tooltip: true,
+					minWidth: 150,
+				},
+				{
+					title: '物料数量',
+					key: 'quantity',
+					minWidth: 150,
+				},
+				{
+					title: '入库时间',
+					key: 'addStorageTime',
+					minWidth: 150,
+				},
+				{
+					title: '在库时间',
+					key: 'inStorageDay',
+					minWidth: 150,
+				},
+				{
+					title: '所在仓库',
+					key: 'stockHouseName',
+					minWidth: 150,
+				},
+				{
+					title: '质检状态',
+					key: 'quantityState',
+					minWidth: 150,
+					render: (h, params) => {
+						return h(
+							'span',
+							params.row.quantityState === 0
+								? '未质检'
+								: params.row.quantityState === 1
+								? '已质检'
+								: params.row.quantityState === 2
+								? '无需质检'
+								: ''
+						)
+					},
+				},
+			],
+			params: {
+				pageIndex: 1,
+				pageSize: 20,
+				total: 0,
+				inventoryResults: '1',
+				keyword: null,
+				categoryCode: null,
+				houseId: null,
+				technologyType: null,
+				purpose: null,
+			},
+			totalData: {
+				fabric: {},
+				ink: {},
+				purposeStatistics: [],
+				typeStatistics: [],
+			},
+			technologyTypeName: null,
+		}
+	},
+	methods: {
+		rowClassName(row, index){
+			if (row.materialPurpose == this.technologyTypeName) {
+				return 'table-info-row'
+			}
+		},
+		rowClassName2(row, index) {
+			if (row.name == this.technologyTypeName) {
+				return 'table-info-row'
+			}
+		},
+		getAll(){
+			this.params.technologyType = null
+			this.params.purpose = null
+			this.params.pageIndex = 1
+			this.technologyTypeName = null
+			this.getList()
+		},
+		yongtuTbleLineCk(row,index){
+			this.technologyTypeName = row.materialPurpose
+			this.params.purpose = row.materialPurpose
+			this.params.technologyType = null
+			this.params.pageIndex = 1
+			this.getList()
+		},
+		mianliaoTbleLineCk(row, index) {
+			this.technologyTypeName = row.name
+			this.params.purpose = null
+			this.params.technologyType = index
+			this.getList()
+		},
+		getList() {
+			axios
+				.post('/cloudApi/stockWater/remainingTodayPage', this.params)
+				.then((res) => {
+					console.log(res)
+					if (res.data.code == 200) {
+						for (let i = 0; i < res.data.data.records.length; i++) {
+							const element = res.data.data.records[i]
+							for (let j = 0; j < element.houseInfo.length; j++) {
+								const jelement = element.houseInfo[j]
+								if ((jelement.houseName = '一楼面料仓库')) {
+									element.yilouSum = jelement.sum
+									element.yilouCount = jelement.count
+								}
+								if ((jelement.houseName = '四楼面料仓')) {
+									element.silouSum = jelement.sum
+									element.silouCount = jelement.count
+								}
+							}
+						}
+						this.data = res.data.data.records
+						this.params.total = res.data.data.total
+						console.log(this.data)
+						this.resize()
+					}
+				})
+			// GetStockPageList(this.params).then(res => {
+			//   if (res.code === 0) {
+			//     this.data = res.result.list
+			//     this.params.total = res.result.totalCount
+			//     this.resize()
+			//   }
+			// })
+		},
+		getRemainingToday() {
+			const v = this
+			axios
+				.post('/cloudApi/stockWater/remainingToday', {})
+				.then((res) => {
+					console.log(res)
+					for (let i = 0; i < res.data.data.purposeStatistics.length; i++) {
+						const element = res.data.data.purposeStatistics[i];
+						if(element.materialPurpose == '') element.materialPurpose = '其他'
+					}
+					this.totalData.fabric = res.data.data.fabric
+					this.totalData.ink = res.data.data.ink
+					this.totalData.purposeStatistics =
+						res.data.data.purposeStatistics
+					this.totalData.typeStatistics = [
+						{ ...res.data.data.typeStatistics[0], name: '直喷' },
+						{ ...res.data.data.typeStatistics[1], name: '热转' },
+						{ ...res.data.data.typeStatistics[2], name: '打纸' },
+					]
+				})
+		},
+
+		resize() {
+			let scrollEl = document.getElementsByClassName('content-wrapper')[0]
+			if (scrollEl) {
+				scrollEl.scrollTop = 0
+			} else {
+				setTimeout(() => {
+					this.resize()
+				}, 500)
+			}
+		},
+		errChange() {
+			this.params.pageIndex = 1
+			this.getList()
+		},
+		open(item) {
+			if (!item.storageDetails) {
+				GetStockTagDetailList({
+					materialCode: item.materialCode,
+				}).then((res) => {
+					if (res.code === 0) {
+						this.$set(item, 'storageDetails', res.result)
+					}
+				})
+			}
+		},
+		openTag(item) {
+			if (item.detailId) {
+				this.formData = { ...item, detialId: item.detailId }
+				this.tagShow = true
+			}
+		},
+		/* 查看盘点记录 */
+		toDetail(type) {
+			this.$router.push({
+				name: 'inventory_record_new',
+				query: {
+					technologyType: type,
+				},
+			})
+		},
+		/* 显示盘点记录 */
+		showInventory(item) {
+			this.inventoryShow = true
+			this.formData = { ...item }
+		},
+		showArtificialInventoryRecord() {
+			this.inventoryRecordShow = true
+			// this.$router.push('artificial-inventory-record')
+		},
+		toInventory() {
+			this.$router.push('inventory')
+		},
+		tabClick(index = '', value, text) {
+			if (text) {
+				this.useName = '全部'
+				this.typeName = text
+				this.tabIndex = index
+				this.itemIndex = ''
+				this.params.technologyType = value
+				this.getItemData()
+				this.getList()
+			} else {
+				this.typeName = text
+				this.tabIndex = index
+				this.itemIndex = ''
+				this.params.technologyType = value
+				this.getItemData()
+				this.getList()
+			}
+		},
+		itemClick(index = '', item = '') {
+			if (item) {
+				this.typeName = '全部'
+				this.useName = item
+				this.itemIndex = index
+				this.params.purpose = item
+				this.getList()
+			} else {
+				this.useName = item
+				this.itemIndex = index
+				this.params.purpose = item
+				this.getList()
+			}
+		},
+		// 跳转对应记录列表 0入库记录 1出库记录
+		toHistory(type) {
+			if (type === 0) {
+				this.$router.push({
+					name: 'store_in_record',
+				})
+			} else if (type === 1) {
+				this.$router.push({
+					name: 'store_out_record',
+				})
+			}
+		},
+		// 获取控件宽度
+		getComWidth(item) {
+			if (item.name === 'Button') {
+				return '80px'
+			} else if (item.name === 'Input') {
+				return '200px'
+			}
+		},
+		cfm(type, formData) {
+			if (type === 'add') {
+				FacPriceAdd({
+					...formData,
+					materialCode: formData.code,
+				}).then((res) => {
+					if (res.code === 0) {
+						this.$Message.info(res.msg)
+						this.getList()
+					}
+				})
+			} else if (type === 'edit') {
+				FacPriceChange({
+					...formData,
+					factoryPriceId: formData.id,
+				}).then((res) => {
+					if (res.code === 0) {
+						this.$Message.info(res.msg)
+						this.getList()
+					}
+				})
+			}
+		},
+		exportExcel() {
+			if (this.data.length < 1) return this.$Message.error('数据为空！')
+			let columns = [
+				{ title: '物料类型', key: 'categoryName' },
+				{ title: '物料编码', key: 'materialCode' },
+				{ title: '物料名称', key: 'materialName' },
+				{ title: '安全库存', key: 'saveQuantity' },
+				{ title: '库存数量', key: 'quantity' },
+				{ title: '库存件数', key: 'tagCount' },
+				{ title: '滞留数量', key: 'retentionCount' },
+			]
+			GetStockPageList({
+				...this.params,
+				pageIndex: 1,
+				pageSize: 999999,
+			}).then((res) => {
+				if (res.code === 0) {
+					let data = res.result.list
+					exportExcel(columns, data, '库存管理')
+				}
+			})
+		},
+		// 检索条件事件处理
+		eventHandle(option) {
+			switch (option._evnet) {
+				case 'search':
+					this.params.pageIndex = 1
+					this.params.key = option.key
+					this.params.purContractState = option.purContractState
+					this.getList()
+					break
+				case 'add':
+					this.formType = 'add'
+					this.show = true
+					break
+				case 'back':
+					this.$router.go(-1)
+					break
+			}
+		},
+		changePage(pageIndex) {
+			this.params.pageIndex = pageIndex
+			this.getList()
+		},
+		search() {
+			this.params.pageIndex = 1
+			// this.params.key = this.key
+			// this.params.materialCategoryCode = this.materialCategoryCode
+			this.getList()
+		},
+
+		handleData(data) {
+			data.forEach((item) => {
+				item.title = item.name
+				// item.expand = true
+				if (item.children) {
+					this.handleData(item.children)
+				}
+			})
+		},
+		getTree() {
+			GetMaterialCategoryZTree().then((res) => {
+				if (res.code === 0) {
+					this.materialTreeData = res.result
+					this.handleData(this.materialTreeData)
+				}
+			})
+		},
+		getTitleData() {
+			GetStockDetailSum().then((res) => {
+				console.log(res)
+				if (res.code === 0) {
+					this.titleData = res.result
+				}
+			})
+		},
+		getItemData() {
+			GetStockMaterialPurpose({
+				technologyType: this.tabIndex,
+			}).then((res) => {
+				if (res.code === 0) {
+					this.itemData = res.result
+					this.itemData.unshift('全部')
+				}
+			})
+		},
+		getTechnologyTypList() {
+			GetTechnologyTypList().then((res) => {
+				if (res.code === 0) {
+					this.tabs = res.result
+					this.tabs.unshift({
+						text: '全部',
+						value: '',
+					})
+				}
+			})
+		},
+		getMaterialSet() {
+			GetMaterialSet().then((res) => {
+				if (res.code === 0) {
+					this.delayPeriod = res.result.delayPeriod
+				}
+			})
+		},
+		getStockHouse() {
+			GetStockHouse().then((res) => {
+				if (res.code === 0) {
+					this.stockList = res.result.map((item) => {
+						return {
+							label: item.name,
+							value: item.id,
+						}
+					})
+				}
+			})
+		},
+	},
+	mounted() {
+		this.getList()
+		this.getTree()
+		this.getTitleData()
+		this.getItemData()
+		this.getTechnologyTypList()
+		this.getMaterialSet()
+		this.getStockHouse()
+		this.getRemainingToday()
+	},
+}
+</script>
+<style>
+.ivu-table .table-info-row td {
+	background-color: #2db7f5;
+	color: #fff;
+}
+</style>
+<style lang="less" scoped>
+.container {
+	display: flex;
+	flex-direction: column;
+	.table-modal {
+		background: #fff;
+		border: 1px solid #dcdcdc;
+		margin-top: 20px;
+		position: relative;
+		justify-content: space-between;
+		display: flex;
+		padding: 20px;
+	}
+	.table-modal:before {
+		position: absolute;
+		width: 20px;
+		height: 20px;
+		border-top: 1px solid #dcdcdc;
+		border-left: 1px solid #dcdcdc;
+		background: #fff;
+		content: ' ';
+		top: -11px;
+		transform: rotate(45deg);
+		left: 13%;
+	}
+	.total-warp {
+		.h2 {
+			font-size: 18px;
+			font-weight: bold;
+			color: #333;
+			height: 40px;
+			line-height: 30px;
+		}
+		.total-box {
+			display: flex;
+			justify-content: space-between;
+		}
+		.total-box > div {
+			background: #ffffff;
+			border: 1px solid #dddcdc;
+			font-size: 18px;
+			height: 60px;
+			line-height: 60px;
+			color: #3f3f3f;
+			ul {
+				display: flex;
+				li {
+					list-style: none;
+					font-size: 12px;
+					color: #838383;
+					line-height: 30px;
+					span {
+						color: #3f3f3f;
+						font-weight: bold;
+						font-size: 18px;
+						display: block;
+					}
+				}
+			}
+		}
+		.mianliao {
+			display: flex;
+			.label {
+				width: 20%;
+				text-align: center;
+			}
+			ul {
+				width: 80%;
+				li {
+					width: 25%;
+					text-align: center;
+				}
+			}
+		}
+		.moshui {
+			display: flex;
+			.label {
+				width: 25%;
+				text-align: center;
+			}
+			ul {
+				width: 75%;
+				li {
+					width: 33.3%;
+					text-align: center;
+				}
+			}
+		}
+	}
+	.bar {
+		display: flex;
+		justify-content: space-between;
+		.item {
+			flex: 1;
+			margin-right: 20px;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			height: 70px;
+			border-radius: 3px 3px 0 0;
+			background-color: #ffffff;
+			border: 1px solid #e6e6e6;
+			&:last-child {
+				margin-right: 0;
+			}
+			.left,
+			.center,
+			.right {
+				height: 100%;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				flex-direction: column;
+				text-align: center;
+				border-right: 1px solid #e6e6e6;
+				.number {
+					margin-top: 5px;
+					font-size: 16px;
+					font-weight: bold;
+					color: #3f92f9;
+					&.red {
+						color: #db0020;
+					}
+				}
+			}
+			.left {
+				width: 100px;
+				font-size: 16px;
+				font-weight: bold;
+				.detail {
+					font-size: 12px;
+					font-weight: normal;
+					cursor: pointer;
+				}
+			}
+			.center {
+				flex: 5;
+			}
+			.right {
+				flex: 5;
+				&:last-child {
+					border-right: none;
+				}
+			}
+			&.more {
+				flex: none;
+				margin-right: 0;
+				padding: 0 20px;
+				justify-content: center;
+				width: 140px;
+				background-color: #333333;
+				color: #ffffff;
+				cursor: pointer;
+			}
+		}
+	}
+	.info {
+		display: flex;
+		justify-content: space-between;
+		margin-bottom: 16px;
+		.info-item {
+			margin-right: 20px;
+			flex: 1;
+			overflow: hidden;
+			border: 1px solid #e6e6e6;
+			background-color: #ffffff;
+			&:last-child {
+				margin-right: 0;
+			}
+			.ivu-collapse {
+				border: none;
+			}
+			/deep/ .ivu-collapse-header {
+				padding: 0;
+				height: auto;
+				line-height: 1.2;
+				vertical-align: middle;
+				.ivu-icon-ios-arrow-forward {
+					display: none;
+				}
+			}
+			.row {
+				display: flex;
+				justify-content: space-between;
+				align-items: stretch;
+				border-bottom: 1px solid #e6e6e6;
+				.col {
+					flex: 1;
+					overflow: hidden;
+					text-align: center;
+					padding: 5px 3px;
+					border-right: 1px solid #e6e6e6;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					&:first-child {
+						flex: 2;
+					}
+					&:last-child {
+						border-right: none;
+					}
+				}
+			}
+		}
+		.info-content {
+			height: 200px;
+			overflow: overlay;
+		}
+		/deep/ .ivu-collapse-content {
+			padding: 0;
+		}
+		/deep/ .ivu-collapse-content-box {
+			padding: 0;
+		}
+		/deep/ .ivu-collapse {
+			border-top: none;
+			border-radius: 0 0 3px 3px;
+		}
+		/deep/ .ivu-collapse-header {
+			height: 30px;
+			line-height: 30px;
+			background: #d7d7d7;
+			color: #000000;
+			font-weight: bold;
+		}
+	}
+	.table-filter {
+		padding-bottom: 10px;
+		line-height: 42px;
+		overflow: hidden;
+		.filter-item {
+			margin-right: 10px;
+			float: left;
+			//&:last-child {
+			//  margin-right: 0;
+			//}
+		}
+	}
+	.line {
+		height: 1px;
+		border-bottom: 1px solid #d7d7d7;
+	}
+	.table-content-wrap {
+		flex: 1;
+		overflow: hidden;
+		.table-content {
+			overflow: auto;
+			height: 100%;
+			.table-item {
+				width: 100%;
+				.row {
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+					.col {
+						padding: 0 5px;
+						flex: 1;
+						display: flex;
+						align-items: center;
+						height: 30px;
+						overflow: hidden;
+						white-space: nowrap;
+						text-overflow: ellipsis;
+						&.red {
+							color: red;
+						}
+						&.orange {
+							color: orange;
+						}
+						&.blue {
+							color: #169bd5;
+						}
+					}
+				}
+			}
+			.content {
+				padding-left: 30px;
+			}
+		}
+	}
+	.table-page {
+		padding-top: 10px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		height: 43px;
+		overflow: hidden;
+	}
+}
+.table-content-wrap {
+	/deep/ .ivu-collapse-header {
+		min-width: 750px;
+		display: flex;
+		height: 120px !important;
+		background-color: #ffffff;
+		border-bottom: none !important;
+	}
+	/deep/ .ivu-icon-ios-arrow-forward {
+		height: 30px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+	/deep/ .ivu-collapse-content-box {
+		padding: 0;
+		padding-bottom: 10px;
+	}
+	/deep/ .ivu-collapse {
+		margin-bottom: 5px;
+	}
+}
+::-webkit-scrollbar {
+	//width: 0px; /*对垂直流动条有效*/
+	//height: 0px; /*对水平流动条有效*/
+	width: 5px; /*对垂直流动条有效*/
+	height: 10px;
+	background-color: #ffffff;
+}
+</style>