yangfeng
2023-08-09 acdff03246ce648082192dfb069c3a006a7fbee6
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<template>
  <div class="edit-selClient-box">
    <el-dialog
      :title="editCommonConfig.title"
      :visible.sync="editConfig.editVisible"
      :width="dialogWidth"
      :before-close="handleClose"
      :append-to-body="true"
      :close-on-click-modal="false"
    >
      <div class="bg-view">
        <div class="query-bg">
          <el-input placeholder="请输入内容" v-model="queryInput" size="mini" class="input-with-select">
            <el-select v-model="select" slot="prepend" placeholder="请选择">
              <el-option v-for="item in commonOptions" :key="item.id" :label="item.name" :value="item.name">
              </el-option>
            </el-select>
          </el-input>
          <div class="btn">
            <el-button type="primary" size="mini" disabled>设置字段</el-button>
            <el-button type="primary" size="mini" disabled>快速创建</el-button>
          </div>
        </div>
        <TableCommonView ref="tableListRef" :table-list="tableList" :select-box="false" @selCommonClick="selNameClick">
        </TableCommonView>
        <div slot="footer" class="dialog-footer">
          <div class="remark">说明:支持多字段模糊查询,仅显示符合条件的前5条数据</div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
 
<script>
export default {
  name: "EditSelCommonDialog",
  props: {
    editCommonConfig: {
      type: Object,
      default: () => {
        return {
          editVisible: false,
          title: "",
          tableInfomation: []
        }
      }
    }
  },
  components: {},
  computed: {},
  data() {
    return {
      dialogWidth: "50%",
      editConfig: this.editCommonConfig,
      queryInput: "",
      select: "全部字段",
      tableData: [],
      searchSelOptions: [],
      loading: false,
      tableList: {},
      commonOptions: []
    }
  },
  created() {
    this.setTable()
  },
  methods: {
    setTable() {
      if (this.editConfig.title === "销售总单") {
        this.tableList = {
          tableInfomation: this.editConfig.tableInfomation,
          tableColumn: [
            { label: "单据编号", prop: "number", isClick: true }, // 单据编号
            { label: "负责人", prop: "member_id" } // 负责人
          ]
        }
      } else if (this.editConfig.title === "服务合同") {
        this.tableList = {
          tableInfomation: this.editConfig.tableInfomation,
          tableColumn: [
            { label: "客户名称", prop: "clientId" }, // 客户名称
            { label: "服务合同编号", prop: "number", isClick: true }, // 服务合同编号
            { label: "负责人", prop: "memberId" }, // 负责人
            { label: "合计", prop: "total" }, // 合计
            { label: "签约日期", prop: "signTime", isTime: true }, // 签约日期
            { label: "合同状态", prop: "serviceContractStatusId" } // 合同状态
          ]
        }
      } else if (this.editConfig.title === "销售明细单") {
        this.tableList = {
          tableInfomation: this.editConfig.tableInfomation,
          tableColumn: [
            { label: "客户名称", prop: "clientId" }, // 客户名称
            { label: "订单编号", prop: "number", isClick: true }, // 订单编号
            { label: "签约日期", prop: "signTime" }, // 签约日期
            { label: "销售负责人", prop: "memberId" }, // 销售负责人
            { label: "合计", prop: "tptal" } // 合计
          ]
        }
      }
 
      this.commonOptions = [{ id: 1, name: "全部字段" }]
      for (let i = 1; i < this.tableList.tableColumn.length; i++) {
        const label = this.tableList.tableColumn[i].label
        this.commonOptions.push({ id: (i + 1).toString(), name: label })
      }
    },
    handleClose() {
      this.editConfig.editVisible = false
    },
    selNameClick(row) {
      this.editConfig.editVisible = false
      if (this.editConfig.title === "销售总单") {
        this.$emit("selClient", row, "master")
      } else if (this.editConfig.title === "服务合同") {
        this.$emit("selClient", row, "serviceContract")
      } else if (this.editConfig.title === "销售明细单") {
        this.$emit("selClient", row, "contract")
      }
    }
  }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.bg-view {
  margin: 10px;
  .query-bg {
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    .el-input {
      width: 310px;
      .el-select {
        width: 100px;
      }
    }
    .btn {
      float: right;
    }
  }
}
.sel-name {
  color: $color-primary;
  cursor: pointer;
}
.dialog-footer {
  height: 40px;
  line-height: 40px;
  color: red;
}
::v-deep {
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
}
</style>